Diff

A before/after image comparison slider with a pixel-art twist. In its signature mode, the "before" side shows the original image while the "after" side auto-pixelates it — creating an interactive original-vs-pixel reveal. Supports custom slots for comparing any two pieces of content.

Inspired by daisyUI Diff, enhanced with the library's built-in pixelation engine.

?

Name	Category	Description	Type	Default
pixelSize	? Style	Pixel block size (higher = more pixelated)	number	8
grayscale	? Style	Enable grayscale mode (affects pixelated side only)	boolean	false
width	? Size	Container width	number | string	—
height	? Size	Container height	number | string	—
palette	? Color	Custom color palette (hex strings or RGB tuples)	string[] | number[][]	—
background	? Color	Background color for transparent areas	string	'#FFFFFF'
color	? Color	Handle accent color (primary / success / warning / info / danger)	string	—
initialPosition	? Behavior	Initial slider position (0-100)	number	50
src	? Content	Image source URL (before shows original, after shows pixelated version)	string	—
change	? Event	Emitted when the slider position changes	(position: number) => void	—
rendered	? Event	Emitted after pixelation rendering completes	() => void	—
error	? Event	Emitted when the image fails to load	(event: Event) => void	—
before	? Slot	Custom content for the "before" panel (left side)		—
after	? Slot	Custom content for the "after" panel (right side)		—
setPosition(n)	? Method	Set the slider position (0-100)	(position: number) => void	—
getPosition()	? Method	Get the current slider position	() => number	—

Basic Usage

Provide src to compare an image against its pixelated version. Drag the slider to reveal more or less of the original.

<template>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 16px">
    <px-diff src="/images/pixelate/001.png" :width="500" :height="300" />
  </div>
</template>

Custom Slots

Use before and after slots to compare any two pieces of content — different images, text, or components.

<template>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 16px">
    <px-diff :width="500" :height="300" color="primary">
      <template #before>
        <img src="/images/pixelate/001.png" style="width: 100%; height: 100%; object-fit: cover" />
      </template>
      <template #after>
        <img src="/images/pixelate/002.jpg" style="width: 100%; height: 100%; object-fit: cover" />
      </template>
    </px-diff>
  </div>
</template>

Grayscale

Combine grayscale with the pixelation mode for a retro monochrome look on the "after" side.

<template>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 16px">
    <px-diff
      src="/images/pixelate/002.jpg"
      :width="500"
      :height="300"
      :pixel-size="6"
      grayscale
      color="info"
    />
  </div>
</template>