snapDiff demos

snapDiff is a browser-based tool designed for visual regression testing of user interfaces. It captures a screenshot of a UI, saves it as a baseline, and alerts users when visual changes are detected in subsequent runs. This approach helps maintain consistency in UI appearance over time by identifying unexpected visual differences.

The platform offers three distinct integration methods to accommodate various project needs. The simplest setup allows users to add a single script tag and a data attribute to any UI element they want to track; a corner badge then indicates whether any visual changes have occurred, making this method suitable for static sites and quick checks. For projects with existing test suites, snapDiff can be called directly from test code, supporting integration with tools like Vitest, Jest, or vanilla JavaScript, giving developers control over when each visual check is performed. The third method is intended for larger scale use, such as in design systems and component libraries: snapDiff can process a folder containing one HTML file per component, loading each file in a hidden iframe and performing visual comparisons across all components.

All three setups operate entirely within the browser. The package also includes additional tools such as snapdiff-stale, which manages baseline maintenance, and a Vitest browser suite for continuous integration environments. These features are highlighted in the tool's README and demos, which showcase the different ways snapDiff can be wired into a project.

snapDiff addresses the need for automated visual regression testing in web development, offering flexibility for different workflows and project sizes.