Web Components

Use BlazeDiff UI components in any framework or vanilla HTML.

Installation


npm install @blazediff/ui


pnpm add @blazediff/ui


yarn add @blazediff/ui


bun add @blazediff/ui

Overview

You can find the full source code for the stories below in the GitHub repository .
You can also view the stories in the Storybook .

swipe-mode

https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/ui/stories/swipe-mode.stories.ts


import type { Meta, StoryObj } from "@storybook/web-components-vite";
import "../src/swipe-mode";
import { FIXTURE_2_A, FIXTURE_2_B } from "./fixtures";
 
const meta: Meta = {
	title: "Swipe Mode",
	render: (args) => {
		const element = document.createElement("blazediff-swipe");
		element.setAttribute("src1", args.src1);
		element.setAttribute("src2", args.src2);
		element.setAttribute("class-container", "w-1/2 h-dvh m-auto");
		if (args.threshold !== undefined) {
			element.setAttribute("threshold", String(args.threshold));
		}
		if (args.includeAA !== undefined) {
			element.setAttribute("include-aa", String(args.includeAA));
		}
		if (args.alpha !== undefined) {
			element.setAttribute("alpha", String(args.alpha));
		}
		return element;
	},
};
 
export default meta;
 
type Story = StoryObj;
 
export const Page: Story = {
	args: {
		src1: FIXTURE_2_A,
		src2: FIXTURE_2_B,
	},
};```

two-up-mode

https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/ui/stories/two-up-mode.stories.ts


import type { Meta, StoryObj } from "@storybook/web-components-vite";
import "../src/two-up-mode";
import { FIXTURE_1_A, FIXTURE_1_B, FIXTURE_2_A } from "./fixtures";
 
const meta: Meta = {
	title: "Two-Up Mode",
	render: (args) => {
		const element = document.createElement("blazediff-twoup");
		element.setAttribute("src1", args.src1);
		element.setAttribute("src2", args.src2);
		return element;
	},
};
 
export default meta;
 
type Story = StoryObj;
 
export const Page: Story = {
	args: {
		src1: FIXTURE_1_A,
		src2: FIXTURE_1_B,
	},
};
 
export const DifferentSizes: Story = {
	args: {
		src1: FIXTURE_1_A,
		src2: FIXTURE_2_A,
	},
};```

onion-skin-mode

https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/ui/stories/onion-skin-mode.stories.ts


import type { Meta, StoryObj } from "@storybook/web-components-vite";
import "../src/onion-skin-mode";
import { FIXTURE_1_A, FIXTURE_1_B } from "./fixtures";
 
const meta: Meta = {
	title: "Onion Skin Mode",
	render: (args) => {
		const element = document.createElement("blazediff-onionskin");
		element.setAttribute("src1", args.src1);
		element.setAttribute("src2", args.src2);
		if (args.opacity !== undefined)
			element.setAttribute("opacity", String(args.opacity));
		return element;
	},
};
 
export default meta;
 
type Story = StoryObj;
 
export const Page: Story = {
	args: {
		src1: FIXTURE_1_A,
		src2: FIXTURE_1_B,
		opacity: 50,
	},
};```

difference-mode

https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/ui/stories/difference-mode.stories.ts


import type { Meta, StoryObj } from "@storybook/web-components-vite";
import "../src/difference-mode";
import { FIXTURE_1_A, FIXTURE_1_B } from "./fixtures";
 
const meta: Meta = {
	title: "Difference Mode",
	render: (args) => {
		const element = document.createElement("blazediff-difference");
		element.setAttribute("src1", args.src1);
		element.setAttribute("src2", args.src2);
		element.setAttribute("class-canvas", "w-80");
		if (args.threshold !== undefined) {
			element.setAttribute("threshold", String(args.threshold));
		}
		if (args.includeAA !== undefined) {
			element.setAttribute("include-aa", String(args.includeAA));
		}
		if (args.alpha !== undefined) {
			element.setAttribute("alpha", String(args.alpha));
		}
		return element;
	},
};
 
export default meta;
 
type Story = StoryObj;
 
export const Page: Story = {
	args: {
		src1: FIXTURE_1_A,
		src2: FIXTURE_1_B,
	},
};```