Components / Data display

ImageCompare

A before/after image comparison: a draggable, keyboard-operable divider (horizontal or vertical), a transparency checkerboard, and split, side-by-side, before and after modes with an optional built-in switcher.

@ruckc/truss-ui Data display

Import

import { ImageCompare } from '@ruckc/truss-ui';

Playground

Recipe: compare a source with its output

Pass two image URLs. The divider is one slider: drag anywhere on the frame, or focus it and use the arrow keys (1%), Page Up / Page Down (10%), Home and End. checkerboard sits behind transparent images and follows the light and dark theme. Bind position to read or set the divider (0 to 100).

<ImageCompare before="/source.png" after="/traced.svg" bind:position ratio="4/3" checkerboard />

Recipe: four views with the built-in toolbar

toolbar adds a switcher for mode: the split divider, both images side by side, or either one alone.

<ImageCompare before={src} after={traced} bind:mode toolbar />

Recipe: custom content, vertical divider

before and after also take snippets, so a canvas or an inline SVG can be compared. Each side is named by its label.

<ImageCompare orientation="vertical" beforeLabel="Original" afterLabel="Traced">
  {#snippet before()}<canvas bind:this={a}></canvas>{/snippet}
  {#snippet after()}<canvas bind:this={b}></canvas>{/snippet}
</ImageCompare>

API

Prop	Type	Default	Description
before required	string | Snippet	—	An image URL, or a snippet rendering the content.
after required	string | Snippet	—
beforeLabel	string	'Before'
afterLabel	string	'After'
position bindable	number	50	Where the divider sits, 0 to 100 (percent of the frame showing the before side).
orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction.
ratio	number | string	16 / 9
fit	'contain' | 'cover'	'contain'
checkerboard	boolean	false	A transparency checkerboard behind each side (token-driven, light and dark).
mode bindable	('split' | 'side-by-side' | 'before' | 'after')	'split'	`split` shows the divider; `side-by-side` shows both; `before` / `after` show one.
toolbar	boolean	false	Show a built-in switcher for `mode`.
label	string	'Comparison'	Name of the divider slider.
class	string	''