NEW!! Using SnapDIFF to catch visual regressions in SnapDOM examples

[tinchox5]

Since snapDOM v2.12.0, I’ve been using a new tool internally before releases: SnapDIFF.

It is a small client-side visual regression tool built on top of snapDOM itself. The reason I built it is simple: unit tests can pass while an example is still visually wrong. That happens often with the kind of things snapDOM cares about: CSS edge cases, fonts, gradients, filters, transforms, shadows, web components, and other rendering details. A function can return the expected value, but the captured output can still look different.

SnapDIFF lets me run visual checks against the examples before publishing a new SnapDOM version. It captures DOM elements in the browser, compares them against saved baselines, and shows a review UI with split / slider / diff views.

The simplest mode runs entirely in the browser with a script tag and data-snap attributes. There is also a staleness CLI and a Vitest browser integration for CI-style checks.

I’m pretty happy with it because it started as release tooling for snapDOM, but I think it can be useful in other projects too: component libraries, docs, static sites, demos, or any frontend project where “does this still look right?” matters.

Demo:
https://zumerlab.com/snapdiff/

Repo:
https://github.com/zumerlab/snapdiff

npm:
https://www.npmjs.com/package/@zumer/snapdiff