Diff

Diff component shows a side-by-side or before/after comparison. Perfect for image comparisons and visual changes.

Basic Example

Image comparison with drag resizer


const { default: Diff } = await import('/components/data-display/diff.js');

const { tags, $ } = Lightview;

const diff = Diff({ class: 'aspect-16/9', style: 'max-width: 500px;' },
    Diff.Item1({ src: 'https://picsum.photos/600/400?grayscale', alt: 'Before (Grayscale)' }),
    Diff.Item2({ src: 'https://picsum.photos/600/400', alt: 'After (Color)' }),
    Diff.Resizer({})
);

$('#demo').insert(diff);

Props

Prop	Type	Default	Description
`class`	string	-	Aspect ratio class (aspect-16/9, aspect-square, etc.)

Sub-components

Component	Props	Description
`Diff.Item1`	src, alt	First comparison item (before)
`Diff.Item2`	src, alt	Second comparison item (after)
`Diff.Resizer`	-	Drag handle for resizing

Interactive Demo

Drag the divider to compare images:

For more examples, see the DaisyUI Diff documentation.