Dart
Dart
HTML Canvas
HTML Canvas
Redis
Redis
Bash
Bash
JavaScript
JavaScript
Chromatic

Chromatic Cheat Sheet

Publishes your Storybook to Chromatic and kicks off tests if they're enabled.

Browser
Chrome
Visual Testing

Configuration

The Chromatic CLI can be configured through options in chromatic.config.json (recommended), or by passing CLI flags.

Environment variables

Environment variableDescription
CHROMATIC_PROJECT_TOKENProject token, see --project-token
CHROMATIC_SHAGit commit hash. See troubleshooting guide for issues
CHROMATIC_BRANCHGit branch name. See --branch-name for additional options and troubleshooting guide for issues
CHROMATIC_SLUGGit repository slug (e.g., chromaui/chromatic-cli). See troubleshooting guide for issues
CHROMATIC_POLL_INTERVALPolling interval when waiting for the build to finish (default: 1000)
CHROMATIC_OUTPUT_INTERVALFrequency of progress output while polling or uploading (default: 10000)
CHROMATIC_RETRIESNumber of times to retry file upload (default: 5)
CHROMATIC_STORYBOOK_VERSIONOverrides Storybook package/version detection (e.g. @storybook/react@7.0.1-alpha.25)
CHROMATIC_TIMEOUTNumber of ms before giving up on storybook dev (default: 300000 (5 minutes))
STORYBOOK_BUILD_TIMEOUTNumber of ms before giving up on storybook build (default: 600000 (10 minutes))
CHROMATIC_DNS_SERVERSOverrides the DNS server IP address(es) used by node-fetch, comma-separated. See troubleshooting guide for issues
CHROMATIC_DNS_FAILOVER_SERVERSFallback DNS server IPs (default: 1.1.1.1, 8.8.8.8 (Cloudflare, Google)). See troubleshooting guide for issues
CISee --ci
LOG_LEVELOne of: silent, error, warn, info, debug
DISABLE_LOGGINGSet to true to disable logging. Equal to LOG_LEVEL=silent
HTTPS_PROXY or HTTP_PROXYUsed to configure https-proxy-agent. See troubleshooting guide for issues

Configuration options

{
  "projectId": "Project:...",
  "autoAcceptChanges": "main",
  "exitOnceUploaded": true,
  "externals": ["public/**"],
  "onlyChanged": true,
  "skip": ["dependabot/**"]
}

Run Chromatic

npx chromatic --project-token <your-project-token>

Install

# Yarn
yarn add --dev chromatic

# npm
npm install --save-dev chromatic