Dembrandt vs Chromatic
Chromatic tests components in isolation. Dembrandt tests what ships in production.
Chromatic takes screenshots of Storybook stories and flags pixel changes between builds. Dembrandt extracts live design tokens from production URLs and scores how much they drift between deploys. Both run in CI. They catch different classes of regression.
Comparison
| Chromatic | Dembrandt | |
|---|---|---|
| What it tests | Storybook component screenshots (pixel diff) | Live production URL — computed tokens from the DOM |
| Scope | Isolated component stories in Storybook | Full page: colors, typography, spacing, radius, shadows |
| Drift metric | Pixel difference percentage per story | Numeric drift score (0–100) with per-token breakdown |
| Requires Storybook | Yes | No — runs against any URL |
| CI integration | GitHub Actions, GitLab CI, Bitbucket | GitHub Actions, GitLab CI, any CI |
| Production parity | Tests component isolation, not production rendering | Tests what users actually see in production |
| Multi-site support | Per-repository | One account, unlimited domains, single dashboard |
| Token extraction | Not extracted — visual comparison only | Full token set: hex colors, font stacks, px values |
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. If a CSS variable is overridden at the application level, or a token value changes in a global stylesheet that does not affect individual stories, Chromatic will not catch it. The story passes. The production page looks different.
Dembrandt reads from the live DOM after full page render. It sees the computed value the browser actually applies — including overrides from application CSS, third-party scripts, and dynamic theming. A color that passes in Storybook will show a drift score if it renders differently in production.
Running Chromatic in PR review and Dembrandt post-deploy covers both layers: component regression and production token drift.
Run a one-off extraction on any URL with no account required:
npx dembrandt your-site.comTo enforce drift in CI, get an API key and add --key $DEMBRANDT_KEY to your deploy step. Full setup: cloud drift CI recipe.