BackstopJS vs Chromatic
Chromatic is the most polished product in this category and the one most often recommended to BackstopJS users — usually without asking the question that actually decides it: are you testing components in isolation, or whole pages as a user sees them? BackstopJS scenarios are URLs. Chromatic's test cases are Storybook stories. That's not a pricing difference, it's a different unit of work.
Pick Chromatic if you already maintain a Storybook and your regressions are component-shaped — it turns those stories into a reviewed visual suite with hosted baselines and genuine cross-browser rendering. Stay on BackstopJS (or move to another page-level tool) if your scenarios are deployed URLs and you have no Storybook: building one is a quarter of work, not a migration.
Side by side
BackstopJS vs Chromatic at a glance
| BackstopJS | Chromatic | |
|---|---|---|
| Unit under test | Whole rendered pages at a URL | Storybook stories (components) |
| Prerequisite | A URL | A Storybook (or a Playwright/Cypress suite) |
| Free plan | Unlimited, forever | 5,000 snapshots/mo, Chrome only |
| Entry paid tier | n/a | Starter $179/mo — 35,000 snapshots |
| Next tier | n/a | Pro $399/mo — 85,000; Enterprise custom |
| Overage | n/a | $0.008 per snapshot |
| Cross-browser | Headless Chrome only | Chrome, Safari, Firefox, Edge — paid tiers |
| Baseline storage | Committed bitmaps in your repo | Hosted, tracked per branch |
| Review & approval | Local HTML report, no sign-off | Best-in-class review UI + PR status |
| Extras | — | Published Storybook per commit, interaction & a11y checks, Figma links |
| Licence · status | MIT · frozen, 6.3.25 Sep 2024 | Commercial · active, by the Storybook maintainers |
| Self-hosting | It only ever runs on your machines | ✗ hosted service |
| Best for | Page-level diffs, zero budget, no third party | Design-system and component-library teams |
Sources: Chromatic pricing · BackstopJS repo · npm registry data. Read 28 July 2026.
Where Chromatic wins
The review experience is the product
Every tool here can produce a diff. Chromatic is the one that made looking at diffs pleasant: changes grouped by component, a clear accept-or-deny per story, baselines tracked per branch so a long-lived feature branch doesn't fight main, and a status posted on the pull request. It's built by the Storybook maintainers, and it shows — this is a workflow designed by people who spend all day in component libraries.
Real cross-browser rendering
BackstopJS is headless Chrome, full stop. Chromatic's paid tiers render the same stories in Safari, Firefox and Edge, which catches the class of bug BackstopJS structurally cannot see: a flexbox gap Safari interprets differently, a font-rendering shift, a filter that quietly does nothing. If your bug reports skew toward "only on iPhone", this is the biggest single upgrade on the page.
Baselines stop being commits
Chromatic hosts baselines per branch, so the "3 MB of PNGs in every visual pull request" problem disappears, along with merge conflicts on bitmaps. For a repository that has been running BackstopJS for two years, that alone changes how the git history feels to work in.
More than screenshots
The published Storybook per commit is a genuinely useful side effect — designers and PMs get a URL showing the components as built, without a local dev environment. Interaction tests, accessibility checks and Figma design links come in the same tool. None of that is visual regression testing, but all of it is work you'd otherwise wire up separately.
Where BackstopJS still wins
It tests the page, not the parts. This is the crux. A component suite proves every button renders correctly in isolation; it does not prove the checkout page still looks right when the promo banner, the cookie bar and a very long product name coexist at 1024px. BackstopJS scenarios point at real URLs with real data, and that is exactly the class of regression that reaches users. Teams with a serious design system usually end up running both rather than swapping one for the other.
No Storybook, no migration. If your app doesn't have one, "switch to Chromatic" means building and maintaining a component library first — a real project with its own ongoing cost, undertaken to satisfy a testing tool. Chromatic can ingest Playwright and Cypress runs instead, but then the honest comparison is the Playwright page for capture plus a review service, and Argos is the cheaper way to buy just the review half.
$179 is the entry price, and snapshots multiply. The free tier is 5,000 snapshots and Chrome only — so the cross-browser reason to pay is also the thing that multiplies your snapshot count by the number of browsers. A 200-story library across 4 browsers is 800 snapshots per build; at 44 builds a month you're through Starter's 35,000. Model that number before the budget conversation, not after.
Nothing leaves your infrastructure. BackstopJS runs on your machines. Chromatic is hosted with no self-hosting option, so pre-release UI and whatever data your stories render go to a third party. Usually fine; occasionally a procurement blocker with no fallback.
Migrating BackstopJS → Chromatic
1. Check the premise first. Open your backstop.json and count how many scenarios are single components versus assembled pages. If most are pages, Chromatic is an addition to your stack rather than a replacement, and it should be planned as one.
2. Model the snapshot count. Stories × browsers × builds per month. The browser multiplier is what pushes teams from free to Starter to Pro, so decide which browsers you actually need instead of enabling all four by default.
3. Port the scenarios that map cleanly. Component-shaped BackstopJS scenarios become stories; your hideSelectors and removeSelectors rules become story parameters and Chromatic ignore settings. Dynamic content still has to be neutralised — the mechanism changes, the discipline doesn't.
4. Decide what runs the page-level suite. Whatever you keep for full-page diffs still needs a maintained runner, since BackstopJS itself hasn't shipped a release since September 2024. That decision belongs on the main comparison.
Common questions
BackstopJS vs Chromatic — FAQ
Can I use Chromatic without Storybook?
Chromatic is built around Storybook and its story-based workflow — stories are the test cases, and the component library is what gets published for review. Chromatic has added support for capturing Playwright and Cypress end-to-end tests, but if you have neither a Storybook nor a component-test suite, adopting Chromatic means adopting one of them first. For a BackstopJS user whose scenarios are URLs of deployed pages, that is a much larger project than swapping tools.
What does Chromatic cost compared to staying on BackstopJS?
Chromatic is free for up to 5,000 snapshots a month on Chrome only. Starter is $179 a month including 35,000 snapshots and adds Safari, Firefox and Edge, with overage at $0.008 per snapshot; Pro is $399 for 85,000; Enterprise is custom. BackstopJS costs nothing and never will. What the money buys is hosted baselines, a review and approval workflow, and real cross-browser rendering — none of which BackstopJS has.
Does Chromatic replace page-level visual testing?
Not on its own. Component-level snapshots catch a button that changed padding; they do not catch a layout that broke because two components collide at 1024px, a font that failed to load on the real page, or a CMS-driven section that pushed the footer off screen. Teams that care about both usually keep a small page-level suite alongside the component suite rather than choosing one.