Vanilla Components

@blazediff/ui gives you the same four comparison modes as the React package, mounted into any DOM node. Each demo below is the real thing, running in this page.

Every mount* call returns a { update, destroy } handle: update(options) swaps sources or options in place, destroy() tears the UI down. Underneath sits a headless engine you can drive directly from Vue, Svelte, Solid or your own renderer, which is what the React package does.

Installation


npm install @blazediff/ui


pnpm add @blazediff/ui


yarn add @blazediff/ui


bun add @blazediff/ui

swipe-mode


import { mountSwipe } from "@blazediff/ui";
 
// A draggable divider over two stacked images. position is 0 to 100.
const handle = mountSwipe(document.getElementById("app"), {
  src1: "before.png",
  src2: "after.png",
  onPositionChange: (position) => console.log(position),
});

two-up-mode


import { mountTwoUp } from "@blazediff/ui";
 
// Side by side, with a label when the two images differ in size.
// zoom: 3 shows both images magnified under the pointer.
const handle = mountTwoUp(document.getElementById("app"), {
  src1: "before.png",
  src2: "after.png",
  zoom: 3,
  onImagesLoaded: ({ image1, image2 }) => console.log(image1, image2),
});

onion-skin-mode


import { mountOnionSkin } from "@blazediff/ui";
 
// Blends the two images. Good for spotting small position shifts.
const handle = mountOnionSkin(document.getElementById("app"), {
  src1: "before.png",
  src2: "after.png",
  opacity: 50,
  onOpacityChange: (opacity) => console.log(opacity),
});

difference-mode


import { mountDifference } from "@blazediff/ui";
 
// Runs an actual pixel diff in the browser and paints the result.
const handle = mountDifference(document.getElementById("app"), {
  src1: "before.png",
  src2: "after.png",
  threshold: 0.1,
  onDiffComplete: ({ diffCount, percentage }) =>
    console.log(diffCount, percentage),
});

Using React? The React components wrap these
Every option and the engine API: @blazediff/ui reference