Dembrandt vs Chromatic
Chromatic tests components in isolation. Dembrandt tests what ships in production.
Chromatic screenshots your Storybook stories and flags pixel changes between builds. Dembrandt extracts the design tokens a production URL actually renders, then scores how far they drifted since the last deploy. Both run in CI. They catch different classes of regression, and neither replaces the other.
Comparison
| Chromatic | Dembrandt | |
|---|---|---|
| What it tests | Storybook component screenshots, compared pixel by pixel | The live production URL. Computed tokens, read from the DOM. |
| Scope | Isolated component stories in Storybook | The full page: colors, typography, spacing, radius, shadows |
| Drift metric | Pixel difference percentage per story | A numeric drift score, 0 to 100, with a per-token breakdown |
| Requires Storybook | Yes | No. It runs against any URL. |
| Themes and viewports | The story modes you configure in Storybook | --dark-mode and --mobile read the variants off the live page |
| CI integration | GitHub Actions, GitLab CI, Bitbucket | Any CI. --compare exits 1 the moment tokens move. |
| Production parity | Tests components in isolation, not production rendering | Tests the rendered reality your users get |
| Multi-page runs | Per repository | --crawl and --sitemap extract a whole domain in one run |
| Token extraction | None. Visual comparison only. | The full set: hex colors, font stacks, px values |
| Private pages | Storybook behind your own auth | --cookie and --header extract behind a login |
| Agent access | None | An MCP server with fifteen tools, plus 43 design skills |
Use Chromatic when
- You maintain a Storybook component library and need regression protection per story
- You want PR review with visual diffs before merging
- Your component library is the primary source of truth for your UI
- You need pixel-level catch for layout regressions in isolated components
Use Dembrandt when
- You want to monitor what design tokens are actually rendering in production, not in stories
- You do not use Storybook, or your production site diverges from component stories
- You manage multiple sites and need cross-domain token drift in one dashboard
- You want a numeric drift score to gate in CI without manual screenshot review
The gap Chromatic does not cover
Chromatic tests components as they exist in Storybook. Override a CSS variable at the application level, or change a token in a global stylesheet that no single story touches, and Chromatic sees nothing. The story passes. The production page looks different. Nobody finds out until a customer does.
Dembrandt reads the live DOM after the page has fully rendered. It records the computed value the browser actually applied, including overrides from application CSS, third-party scripts, and dynamic theming. A color that passes in Storybook still earns a drift score if production renders it differently.
Run Chromatic in PR review and Dembrandt after deploy. That covers both layers: component regression, and drift in the tokens you actually shipped.
Run a one-off extraction on any URL with no account required:
To enforce drift in CI, get an API key, then run --compare <baseline> --key $DEMBRANDT_KEY in your deploy step. It exits 1 when the tokens move. Full setup: cloud drift CI recipe.
Other comparisons
Every tool here solves a different part of the problem. The full list says which does what.