Vanilla Components

Use the BlazeDiff UI renderer (mount* functions) in vanilla JS - or drive the headless engine from any framework. Every example below is live and runs right on this page.

Installation


npm install @blazediff/ui


pnpm add @blazediff/ui


yarn add @blazediff/ui


bun add @blazediff/ui

swipe-mode


import { mountSwipe } from "@blazediff/ui";
 
mountSwipe(document.getElementById("app"), {
  src1: "before.png",
  src2: "after.png",
  onPositionChange: (position) => console.log(position),
});

two-up-mode


import { mountTwoUp } from "@blazediff/ui";
 
mountTwoUp(document.getElementById("app"), {
  src1: "before.png",
  src2: "after.png",
  onImagesLoaded: ({ image1, image2 }) => console.log(image1, image2),
});

onion-skin-mode


import { mountOnionSkin } from "@blazediff/ui";
 
mountOnionSkin(document.getElementById("app"), {
  src1: "before.png",
  src2: "after.png",
  opacity: 50,
  onOpacityChange: (opacity) => console.log(opacity),
});

difference-mode


import { mountDifference } from "@blazediff/ui";
 
mountDifference(document.getElementById("app"), {
  src1: "before.png",
  src2: "after.png",
  threshold: 0.1,
  onDiffComplete: ({ diffCount, percentage }) =>
    console.log(diffCount, percentage),
});

Each mount* call returns a { update, destroy } handle - call update(options) to change sources or options in place, and destroy() to remove the UI. See the full API reference →.