Skip to Content
Documentation@blazediff/ui

@blazediff/ui

Framework-agnostic Web Components for building image comparison interfaces. Works with any JavaScript framework or vanilla HTML.

Installation

npm install @blazediff/ui

Features

  • Framework agnostic: Works with React, Vue, Angular, Svelte, or Vanilla JS
  • Web Components: Standard-based custom elements
  • Multiple modes: Swipe, two-up, onion skin, and difference visualization
  • Customizable: Full styling control via CSS classes
  • Accessible: Keyboard navigation and proper event handling
  • Lightweight: Zero dependencies (except @blazediff/core)

Quick Start

HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import "@blazediff/ui";
    </script>
  </head>
  <body>
    <blazediff-swipe
      src1="image1.jpg"
      src2="image2.jpg"
      alt1="Original"
      alt2="Modified"
    >
    </blazediff-swipe>
  </body>
</html>

JavaScript

import "@blazediff/ui";
 
// The components are now available globally
document.body.innerHTML = `
  <blazediff-swipe
    src1="./before.jpg"
    src2="./after.jpg">
  </blazediff-swipe>
`;

API Reference

<blazediff-swipe>

Interactive swipe component for comparing two images with a draggable divider.

Attributes

AttributeTypeDefaultDescription
src1string-URL of the first image
src2string-URL of the second image
alt1string"Before"Alt text for the first image
alt2string"After"Alt text for the second image
class-containerstring-CSS class for the container
class-image1string-CSS class for the first image
class-image2string-CSS class for the second image
class-dividerstring-CSS class for the divider

Events

EventDetailDescription
position-change{ position: number }Fired when divider position changes (0-100)

<blazediff-twoup>

Side-by-side comparison component with dimension information.

Attributes

AttributeTypeDefaultDescription
src1string-URL of the first image
src2string-URL of the second image
class-containerstring-CSS class for the main container
class-container-innerstring-CSS class for the inner container
class-panelstring-CSS class for each panel
class-imagestring-CSS class for images
class-dimension-infostring-CSS class for dimension info text

Events

EventDetailDescription
images-loaded{ image1: {width, height}, image2: {width, height} }Fired when both images load
load-error{ error }Fired when image loading fails

<blazediff-onionskin>

Overlay comparison with opacity control slider.

Attributes

AttributeTypeDefaultDescription
src1string-URL of the base image
src2string-URL of the overlay image
opacitynumber50Initial opacity (0-100)
class-containerstring-CSS class for the main container
class-image-containerstring-CSS class for image container
class-imagestring-CSS class for images
class-slider-containerstring-CSS class for slider container
class-sliderstring-CSS class for the slider
class-slider-labelstring-CSS class for slider label
text-slider-labelstring"Opacity:"Text for the slider label

Events

EventDetailDescription
opacity-change{ opacity: number }Fired when opacity changes
images-loaded{ image1: {width, height}, image2: {width, height} }Fired when both images load
load-error{ error }Fired when image loading fails

<blazediff-difference>

Shows pixel differences using the BlazeDiff comparison algorithm.

Attributes

AttributeTypeDefaultDescription
src1string-URL of the first image
src2string-URL of the second image
thresholdnumber0.1Difference threshold (0-1)
include-aabooleanfalseInclude anti-aliased pixels
alphanumber0.1Opacity of original image
class-containerstring-CSS class for the container
class-canvasstring-CSS class for the canvas

Events

EventDetailDescription
diff-complete{ diffCount: number, totalPixels: number, percentage: number }Fired when comparison completes
diff-error{ error }Fired when comparison fails
Last updated on
@blazediff/bin@blazediff/react