Last updated 08-14-2026
Category:
Reviews:
Join thousands of AI enthusiasts in the World of AI!
VizDiff
VizDiff uploads Storybook builds from GitLab CI, renders a screenshot for every story, and blocks merges when component pixels change.
Generic screenshot tools compare whole pages. VizDiff is built around Storybook stories, so component-level diffs surface in GitLab merge requests with Old, New, Diff, and side-by-side views. The first run on a branch marks every story as New; later commits on the same merge request show only stories that actually changed.
Frontend teams already running Storybook in GitLab get the most value from this automation workflow. Designers and engineers share baselines, walk through pending screenshots with keyboard shortcuts, and flip a build to approved or denied without leaving the review UI. GitHub setups are supported through a separate setup guide for teams on that platform.
Uploads Storybook builds via npx @vizdiff/cli in GitLab CI pipelines
Posts vizdiff/visual-tests commit statuses on merge request commits
Comparison views include Old, New, Diff, and 2-Up layouts per story
First branch run establishes baselines; later commits show only Changed stories
Microsoft Entra SSO sign-in for organization-managed deployments
GitHub and GitLab setup guides with copy-paste CI YAML examples
Purpose-built for Storybook stories instead of full-page captures that miss component regressions.
GitLab commit statuses block merges until visual changes are explicitly approved.
CLI upload slots into existing build-storybook CI jobs with one extra step.
Diff, 2-Up, and keyboard navigation speed up reviewing dozens of story screenshots.
Self-hosted deployments let teams keep screenshot data inside their own infrastructure.
Requires Storybook in your repo and Maintainer access to add GitLab CI variables.
No public pricing page, so cost depends on your organization's VizDiff deployment.
Very low domain authority suggests a newer or niche product with limited third-party coverage.
What does VizDiff test?
VizDiff captures screenshots of Storybook component stories on each CI build. It compares them against approved baselines and highlights pixel-level differences so teams can spot visual regressions before merging.
Which Git hosts does VizDiff support?
VizDiff integrates with GitLab merge requests out of the box, including commit statuses and review links. A separate GitHub setup guide covers pull request workflows for teams on GitHub.
How do I connect VizDiff to GitLab CI?
Add a VIZDIFF_PROJECT_TOKEN CI/CD variable in GitLab, build Storybook to storybook-static, then run npx @vizdiff/cli upload in your pipeline. VizDiff reads GitLab's predefined CI variables automatically.
What happens on the first VizDiff run?
On the first VizDiff run for a branch, every Storybook screenshot shows as New because no baseline exists yet. Push another commit on the same merge request and VizDiff flags only stories where the UI actually changed.
How do I approve visual changes in VizDiff?
Open the VizDiff review page from the GitLab commit status link, inspect each screenshot, then approve or deny the build. VizDiff updates the commit status to success or failed immediately after your decision.
Does VizDiff require personal GitLab authorization?
No. VizDiff uses a deployment service token configured by your administrator to read project metadata and post commit statuses. Developers authenticate to VizDiff through their organization's SSO provider.