zumerlab/snapdiff … Mr SnapDOM pointing up

SnapDiff

Visual regression in the browser. One engine, three ways to wire it in.

snapDiff takes a screenshot of your UI, saves it as a baseline, and tells you the next time something looks different. Pick the setup closest to what your project already looks like.

Three setups
01 Easiest

Drop a tag on your page

Add data-snap to anything you want tracked. Drop one <script> tag. The corner badge tells you if anything changed.

Best for · Static sites & quick checks

<div data-snap="hero">…</div>
<script data-auto src="…"></script>
Open 02 Hands-on

Call it from your test code

Write runner.test() like any other test. Pair it with Vitest, Jest, or vanilla JS. You decide when each check runs.

Best for · Apps with a test suite

// inside your test
runner.test('hero', () =>
  document.querySelector('.hero'))
Open 03 At scale

Diff a folder of components

One HTML file per component in /components/. The runner walks the folder, loads each in a hidden iframe, diffs everything.

Best for · Design systems & libraries

components/
  ├─ hero.html
  ├─ pricing.html
  └─ avatar.html  → all diffed
Open
These three are all browser-side. The package also ships snapdiff-stale for baseline hygiene and a Vitest browser suite for CI — see the README.