Version Scrubber

Step through prepared versions of a design with one slider. Free, MIT · Content and social › Interactive explainers

One slider through prepared versions of a design, an illustration or a product: the image of each step, its title, date and what changed. Selection is by id; images fit the reserved area without jumps, only the neighbours preload, and a late load of a previous image never replaces the current one.

Installation

npx valyro-cli@latest add version-scrubber

npx shadcn@latest add https://valyro.xyz/r/version-scrubber.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { VersionScrubber } from 'valyro-ui';

Props

Prop	Type	Default
`snapshots` *	`VersionSnapshot[]`		Prepared snapshots, in order.
`value`	`string`		Id of the shown snapshot. A controlled id missing from `snapshots` shows an error until a valid one comes.
`defaultValue`	`string`		Initial snapshot when uncontrolled. Default: the first. If it disappears, the first remaining one is shown.
`onValueChange`	`(id: string) => void`		Called with the new `value` when it changes.
`onValueCommit`	`(id: string) => void`		Called when a choice is settled: the slider released, a key, a button or a thumbnail. Not on every pixel.
`renderSnapshot`	`(snapshot: VersionSnapshot) => ReactNode`		Draws a snapshot instead of its image; it handles its own loading and errors.
`aspectRatio`	`number`	`16 / 9`	Width / height of the viewer, reserved before images load. Default 16 / 9.
`showThumbnails`	`boolean`	`true`	A thumbnail row when there are at most 8 snapshots. Default true.
`labels`	`Partial<VersionScrubberLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Feature Hotspots — Numbered points on an image that open a note about each detail
Exploded Layers — Prepared image layers pulled apart with captions
Prediction Card — The reader guesses first, then sees the answer and the explanation
Detail Dial — Choose how deep an explanation goes: short, detailed or full
Page Minimap — Schematic map of a long page with the visible area
Article Header — Article header: section, headline, lede, authors and date
Byline — Byline: authors, published and updated dates, reading time
Article Figure — Image with caption and photo credit
Pull Quote — Pull quote with attribution
Key Points — “Key points” summary block
Editor Note — Update, correction, disclosure and sponsored-content notes
Article Toc — Article table of contents that tracks the current section

Previous: Detail Dial · Next: Page Minimap · All Content and social