Diffy vs Chromatic: Visual Testing for Websites, Not Just Storybook

Chromatic is made by the team behind Storybook, and it is the most polished visual testing tool available for a component library that already lives there. Diffy is built for the other side of the fence — deployed websites, usually on a CMS, often maintained by an agency, where nobody wants to write a test suite just to find out whether the homepage still looks right. Both tools take screenshots and show you what changed. The difference is what they need from you before the first screenshot exists, and which question they are designed to answer once it does.

What each tool needs from you

This is the part to be accurate about, because it decides everything else.

Chromatic tests code. There is no mode where you hand it a URL. It plugs into one of four things: a Storybook (6.5 or later), a Playwright suite (1.38 or later), a Cypress suite (13.5 or later) or Vitest browser tests (4.0 or later, using the Playwright browser provider). You install the chromatic package, run npx chromatic --project-token <token>, and wire that command into CI so every push produces a build; Chromatic needs Git available in CI because it uses commit history to pick baselines. For Storybook, each story becomes a test. For Playwright and Cypress you keep Chrome in your config — Chromatic relies on it for snapshotting — and during the test run it captures an archive of each page (DOM, styles, assets), uploads it, and renders the snapshots in its own cloud. It is a clean, well-documented workflow, provided you have the code it plugs into.

Diffy tests URLs. You create a project in a browser tab, paste the addresses of the pages you care about, choose breakpoints, and press a button. Login credentials, elements to mask, selectors to mock, waits, cookies, headers and a schedule are fields on the same settings page. There is no repository, no Node install, no CI job and no test file unless you want one. The CLI and GitHub Action exist for teams that do want automation, but they are optional rather than the price of entry.

So the first question is not which tool is better. It is whether the thing you want to test is a Storybook or a website. If it is a Storybook with no deployed site behind it, Chromatic is the obvious pick and you can stop reading. If it is a live Drupal, WordPress or headless site — especially one where the person who wants visual testing is a PM, a designer or a site owner — read on.

Pricing

Both tools sell snapshots per month, but they count them very differently, and that matters more than the headline numbers.

Chromatic

Plan	Billed snapshots per month	Price
Free	5,000	$0
Starter	35,000	$179/mo
Pro	85,000	$399/mo
Enterprise	Unlimited	Custom

The Free plan is Chrome only; Safari, Firefox and Edge start at Starter, and so do accessibility tests. Extra snapshots on paid plans are $0.008 each. On the Free plan there is no overage: review and testing pause once the 5,000 snapshots are used up.

Diffy

Screenshots per month	Billed annually	Month-to-month
500 (Free)	$0	$0
2,000	$67/mo	$80/mo
8,000	$125/mo	$150/mo
30,000	$250/mo	$300/mo

Read side by side, Chromatic is cheaper per snapshot at volume: $179 for 35,000 is about half a cent each, against Diffy’s $250 for 30,000. Chromatic’s free tier is also ten times larger than ours. We would rather say that plainly than bury it. The reason the numbers are not the whole story is how a snapshot is counted.

How Chromatic counts. Chromatic’s own formula is visual snapshots = tests × builds × browsers × modes. Every story is a test, every viewport or theme combination you configure is a mode, every enabled browser multiplies again, and every push that runs the CLI is a build. A Storybook with 300 stories, tested at two viewports in Chrome and Safari, is 1,200 snapshots per build; thirty builds in a month is 36,000, already past the Starter allowance. TurboSnap brings that down a lot: it uses your Git history and the Webpack or Vite dependency graph to re-capture only stories whose code changed, and copies the rest from the previous baseline at 0.2 of a snapshot each (a build with no relevant changes at all is bypassed and costs nothing). But TurboSnap works with Storybook and Vitest only. Chromatic’s docs are explicit that it is incompatible with Playwright and Cypress, because those test a fully built app rather than tracked source files — so full-page E2E testing pays full price on every build.

How Diffy counts. One page at one breakpoint is one screenshot, and you only run when you ask to — on a schedule, before a deployment, or from CI. A 20-page site at three breakpoints, compared daily, is about 1,800 screenshots a month: the $67 plan. Forty pages is roughly 3,600, which fits the $125 plan with room to grow.

The entry point. For a website team that cares about Safari, the practical comparison is Chromatic’s Starter at $179/mo — the first plan with more than Chrome — against Diffy at $67/mo, which includes WebKit. That is the plan most site teams actually land on, and it is under 40% of the price.

Going over. On Chromatic’s paid plans testing continues uninterrupted past your allowance and the extra snapshots are charged at the end of the billing period, so a noisy month costs money. Diffy does not bill overage: if your usage outgrows your plan we get in touch and ask you to move up a tier, and your invoice stays the number on your plan.

Chromatic prices as published on chromatic.com/pricing in September 2026, where only monthly prices are listed. Check both pricing pages before you commit — everyone changes prices eventually.

Branches vs environments

This is the deeper difference, and it is not about features.

Chromatic is organised around Git. Every run is a build attached to a commit, and the baseline it compares against is worked out from your repository history: Chromatic finds the most recent ancestor commit that had a build, takes the accepted snapshots from it, and has explicit rules for merges (most recently approved change wins) and rebases (accepted baselines from the latest build on the branch are always included). It is a model designed to answer “did this pull request change the UI?”, and for that question it is excellent.

Diffy is organised around environments. Production, staging and development are first-class, you can add custom ones, and the question it answers naturally is “do these two deployed sites look the same?”:

• Does staging still match production before we go live?
• Did anything on production change overnight, without a deploy? Scheduled monitoring runs daily or weekly and compares an environment against itself over time.
• Does this Pantheon or Tugboat multidev match production?
• Did the core, plugin or module update we just applied move anything on the 60 templates this site uses?

The last one is where most CMS regressions actually come from, and it often has no meaningful commit attached to it — a composer update or a plugin bump in the admin UI. A Git-first tool has nothing to hang that comparison on. That is the case Diffy was built for.

Handling real-world pages without writing code

Most of the effort in visual testing is not taking screenshots, it is stopping them from being noisy. In Chromatic, a story is already an isolated, deterministic render, so the noise problem is largely solved by Storybook itself — that is a real advantage of the component approach. A deployed page has no such luxury: it has a logged-in state, a news feed, ads, a carousel and a date in the footer. In Diffy those are all settings in the UI:

• Log in before the screenshot. Presets for Drupal, WordPress and Netlify, plus a custom option; Diffy opens the login page, fills the credentials and continues. No test code required.
• Mock dynamic content. Give Diffy a list of selectors and it replaces their contents with placeholder text — the standard fix for sites that publish new articles between runs and can never be perfectly synced across environments.
• Remove or mask elements. Removal drops the element from the DOM; masking paints a visible rectangle over it, so reviewers can see what was hidden. Embedded videos and maps are masked by default.
• Inject custom CSS or JavaScript, set HTTP headers, cookies, and a custom User-Agent.
• Retina and dark mode are checkboxes.
• Any breakpoint between 240px and 3000px, as many as you like. In Chromatic, viewports are modes configured in Storybook, or viewport settings in your Playwright, Cypress or Vitest config.
• Throttle the crawl by limiting concurrent workers, or route it through a single IP address so it can be allowlisted.

Comparison that understands vertical shifts

Pixel-perfect diffing has a well-known failure mode on full pages: change the height of something near the top and every pixel below it moves, so the whole page lights up red. Components are short enough that this rarely bites in Storybook; on a 6,000-pixel landing page it bites every time.

Chromatic has started addressing this with Page Shift Detection, which excludes vertical content shifts from the diff. It is in beta and applies under specific conditions: content was added between baseline and head, there are at most two added blocks, and each is at least 30 pixels tall. Beyond that, Chromatic’s diffing is pixel-based, with a tunable diffThreshold and automatic anti-aliasing detection.

Diffy runs a custom algorithm alongside pixel-perfect comparison that recognises vertical shifts. Add a line to your header and Diffy highlights the header — not the other 4,000 pixels that merely moved down. You can still switch to strict pixel-perfect comparison, and you can tune comparison sensitivity, when that is what you want.

A review UI built for hundreds of pages

Chromatic’s review flow is per story and per pull request: UI Tests catch unintended regressions, and UI Review is a separate step, linked to the PR, where designers and product managers sign off on intentional changes. Diffy’s review is built around a whole site at once:

• Thumbnail view, with approval directly from thumbnails
• The same change grouped across every screenshot it appears in, so you approve it once — a header change on 200 pages is one decision, not 200
• Approve an individual change, a screenshot, or a page across all breakpoints
• Before/after slider
• Keyboard shortcuts for moving through a large set
• HTML source and the JavaScript console for the screenshot, for debugging
• Shareable links that work for people without a Diffy account

Integrations

• CLI tool for CI/CD, with examples for Pantheon, Tugboat and others
• GitHub Action that posts results back to the pull request
• Notifications via email, Slack and webhooks, with configurable thresholds
• Zapier, so a diff can open a ticket in your tracker
• Figma — pull design screenshots in and compare the build against the design. Chromatic’s Figma plugin, Storybook Connect, works the other way round: it links Figma components to stories in a Storybook hosted on Chromatic.
• Upload screenshots from Playwright or any other functional testing framework and use Diffy purely as the comparison and review layer
• Claude plugin, so you can create projects, capture screenshots and compare environments from a conversation — see below

Driving Diffy from Claude

Diffy publishes a Claude plugin that lets you run visual testing from a conversation instead of a dashboard or a CI config. It installs from the plugin marketplace in two lines:

/plugin marketplace add diffywebsite/diffy-skills
/plugin install diffy@diffy

That gives you ten skills under the /diffy: namespace, covering the whole loop rather than just capture: creating and updating projects from a description of the site, capturing screenshots remotely on Diffy’s servers or locally from a running app, comparing two screenshot sets or two environments server-side, and pulling back a summary with a per-page table and a JUnit report. Remote mode needs nothing installed beyond the plugin itself; local mode uses Docker for the screenshot worker.

In practice this is most useful in the middle of a change. You are already in Claude working on a template; asking it to compare staging against production and tell you which pages moved is faster than switching to a browser. The plugin is MIT licensed and developed in the open at github.com/DiffyWebsite/diffy-skills.

What about Storybook?

If you have both a Storybook and a deployed site, you do not have to choose. A published Storybook is a set of URLs, and Diffy will screenshot them like any other page. Capellic, a Drupal agency, works this way: each component in the Storybook is approved and captured with Diffy, the production site is under Diffy too, and monthly updates are pushed to a Pantheon multidev and tested automatically. You lose TurboSnap and Chromatic’s native story-level review, but you get one tool and one bill for components and pages.

Where Chromatic is the better fit

We would rather you pick the right tool than the one that emails you.

• Storybook-first teams. If your UI lives in Storybook, Chromatic’s integration is unmatched: stories become tests automatically, TurboSnap keeps the bill down, and UI Review gives designers a proper sign-off step. Diffy does not integrate with Storybook beyond treating stories as URLs.
• Interaction and accessibility tests. Chromatic runs Storybook interaction tests (free of snapshot charges) and, on paid plans, axe-based accessibility tests in the same build as visual tests. Accessibility tests are Storybook-only and Chrome-only. Diffy is visual only.
• Pull-request gating. Chromatic’s Git-aware baselines and its “UI Tests” status check are built for blocking a merge on UI changes. Diffy’s GitHub Action reports on PRs, but its model is environments, not commits.
• More browser engines. Chromatic covers Chrome, Firefox, Safari and Edge on paid plans. Diffy runs Chrome and WebKit.
• Longer history and a bigger free tier. Chromatic guarantees at least 12 months of build and snapshot retention on every plan, and says it does not delete older builds in practice; the free plan gives you 5,000 snapshots a month with unlimited projects and users. Diffy retains 6 months on paid plans, 1 month on the free plan, and the free plan is 500 screenshots.
• Enterprise controls. SSO, SCIM provisioning, custom Git integrations and priority support with an SLA are on Chromatic’s Enterprise plan.

Drupal and WordPress experts

We know a lot about Drupal and WordPress hosting environments and development workflows — it is why Diffy ships login presets for both, and why the CLI documentation has worked examples for Pantheon and Tugboat. If that is your stack, we will make sure you get a reliable testing setup, and you can talk to the people who built Diffy when something looks wrong.

Try it

Create an account, paste your URLs, and run your first comparison. Most teams have real results inside 10 minutes, and there is nothing to uninstall if it is not for you.