omaroubari/swatchbook

Swatchbook is a small web component called swatch-book that lets you compare a few design candidates for the same section of a page, one at a time, instead of stacking them all down the page. It is aimed at the moment when you have two or three versions of a hero section, a pricing table, or a call to action, and you want to click through them to pick a favorite. It has zero dependencies and weighs about 2.5 kilobytes after compression. Because it is a plain custom element rather than a framework-specific piece, it works inside Astro, React, Vue, Svelte, or plain handwritten HTML. You add one script tag, wrap your candidate designs in a swatch-book tag, and mark each candidate with a data-swatch attribute holding its name. One of them can be marked as the default. The component then shows a small floating control with previous and next arrows, dots, and a label showing which swatch is active. A key idea in the README is that the script tag itself acts as the on and off switch. Include the script during a design review and you get the carousel behavior. Leave it out when you ship to production, and the page falls back to showing only the swatch marked as default, as if the tool was never there. This is meant to make it disposable scaffolding rather than something that lingers in the codebase. The README also documents several gotchas. Swatches must be direct children of the swatch-book element, or the component cannot find them and everything renders stacked, which can look like a bug rather than a missing setup step. At least two swatches are required for there to be anything to flip between. Children added after the page loads, such as through async data, will not be picked up. The label attribute doubles as a storage key for remembering the last chosen swatch, so it must be unique on a page with more than one book. It can be installed with a script tag directly from a CDN, or through the pnpm package manager if you prefer to bundle it into your project.