swatchbook
A zero-dependency web component for flipping through design variants one at a time, instead of stacking them down the page.
A zero-dependency web component for flipping through design variants one at a time, instead of stacking them down the page.
swatchbook is a tiny, zero-dependency web component for comparing design directions in the browser. It replaces a long stack of competing sections with one focused view that reviewers can move through using arrows, pagination dots, or the keyboard.
Why I built it
When several versions of a hero, pricing block, or call to action live on the same page, the review stops feeling like a comparison. Each option appears at a different scroll position, surrounding content adds noise, and it becomes harder to judge the differences directly.
Swatchbook keeps every candidate in the same frame. Wrap each option in a <section data-swatch> element and <swatch-book> turns the group into a lightweight carousel—without introducing a framework or changing the underlying markup.
Designed to disappear
The script is the only switch. Include it while exploring and reviewing variants; remove it before shipping and the page falls back to the section marked data-default. The review interface leaves no runtime dependency or production-specific cleanup behind.
At roughly 2.5 kB, it stays small enough to drop into prototypes, static pages, and existing applications without changing their toolchain.