Chromatic

Captures component renderings across 4 browsers (Chrome, Firefox, Safari, Edge) and multiple viewport sizes, then performs pixel-level diff analysis to detect unintended visual changes. Uses a custom SteadySnap algorithm that tracks browser activity, freezes dynamic content, and performs burst capture to eliminate flaky false positives caused by animations, network requests, or timing variations. Stores snapshots in Chromatic's proprietary format and surfaces diffs in a web UI with side-by-side comparison and approval workflows.

Analyzes Git commit history and bundler dependency graphs (webpack, Vite, esbuild, Rollup) to identify which components were actually changed by a commit, then runs snapshots only for affected components and their dependents. Reduces snapshot consumption by up to 80% by skipping unchanged components. Works by parsing import statements, tracking component-to-file mappings, and comparing against the baseline branch to determine the impact scope.

Automatically converts Storybook stories (CSF format) into visual tests without requiring explicit test code. Each story variant becomes a test case that captures a snapshot and runs accessibility checks. Developers write stories once (for documentation) and Chromatic automatically generates tests from them, eliminating test code duplication. Supports story parameters for configuring snapshot behavior (viewport sizes, delay before capture, etc.).

Automatically manages snapshot baselines tied to Git branches, comparing snapshots against the baseline branch (usually main) to detect changes. Supports comparing across branches, commits, and tags. Handles branch merges and rebases by automatically updating baselines. Enables developers to review changes relative to any Git reference, not just the main branch.

Allows developers to configure snapshot behavior on a per-story basis using Storybook story parameters (e.g., viewport sizes, delay before capture, animation disabling, DOM element hiding). Supports custom viewport configurations beyond the default set, enabling testing of responsive designs at specific breakpoints. Parameters are stored in story metadata and applied automatically during snapshot capture.

Extracts component metadata (props, types, documentation) from component source code and Storybook stories, making it searchable and browsable in the Chromatic UI. Supports TypeScript prop types, JSDoc comments, and Storybook argTypes. Enables teams to discover components by searching for prop names, types, or documentation keywords. Planned integration with Storybook MCP (Model Context Protocol) for AI agent access to component APIs (Q1 2026).

Provides real-time snapshot consumption tracking and cost estimation based on the snapshot pricing model ($0.008 per snapshot overage). Displays projected monthly costs based on current usage trends. Allows teams to set snapshot budgets and receive alerts when approaching quota limits. Provides visibility into snapshot consumption by component, branch, and test run.

Runs axe accessibility scanner on every component snapshot to detect WCAG violations (color contrast, missing alt text, keyboard navigation issues, etc.). Results are aggregated per test run and displayed in the Chromatic UI with violation severity levels and remediation guidance. Scans run automatically as part of the snapshot process without requiring separate test configuration.

Allows developers to write interaction tests using Playwright or Cypress test syntax within Storybook stories (via play functions) or as standalone test files. Tests can verify component behavior (clicks, form submissions, state changes) and are executed as part of the Chromatic test run. Results are displayed alongside visual snapshots, enabling combined visual + interaction validation in a single test run.

Automatically posts visual test results to pull requests as a check status, displaying a summary of changed components, new components, and accessibility issues. Provides an embedded UI Review interface within the PR for reviewers to approve or request changes on visual diffs without leaving GitHub/GitLab/Bitbucket. Supports role-based approval workflows (e.g., design review required before merge) and integrates with branch protection rules.

Publishes Storybook instances to Chromatic's CDN with automatic versioning tied to Git commits or tags. Each published version is accessible via a stable URL and includes component metadata, documentation, and snapshots. Enables teams to share component libraries with external stakeholders (e.g., design partners, other teams) without requiring repository access. Supports custom domains on Pro tier and above.

Provides a Figma plugin that allows designers to link Figma components directly to their corresponding Storybook stories in Chromatic. Creates a bidirectional reference between design and code, enabling designers to view implementation details and developers to see design specifications. Links are embedded in Figma component metadata and accessible via a sidebar panel.

Exposes webhooks that fire on test completion, approval, or rejection events, allowing teams to trigger custom workflows (Slack notifications, Jira updates, custom CI/CD steps, etc.). Webhooks include full test result payload (snapshots, diffs, accessibility reports) in JSON format, enabling downstream systems to react to visual changes programmatically.

Provides role-based access control (RBAC) with predefined roles (Admin, Developer, Reviewer, Viewer) that control permissions for approving snapshots, managing team members, and accessing project settings. Supports team-level organization with multiple projects per team. Enables asynchronous collaboration via comments on components and change request workflows.

Sends Slack notifications when visual tests complete, fail, or require review. Notifications include a summary of changed components, links to the Chromatic UI, and inline approval buttons (approve/request changes) that allow reviewers to make decisions without leaving Slack. Supports custom Slack channels and message formatting.