New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,392
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Chromatic
Automate visual testing across browsers. Gather UI feedback. Versioned documentation.
npm install chromatic
Last updated about 1 month ago
643.7k
Downloads per week
Made by Storybook
Readme View on GitHub

Chromatic CLI

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

Published on npm Tested with Chromatic

Documentation

👉 Read the Chromatic CLI docs

📝 View the Changelog

Using a next version

From time to time we pre-publish a next version of the package to test new features. To use the next branch you can either:

Using npx

Change your script to use the next dist-tag:

npx chromatic@next --project-token ...

Using a dependency in package.json

Update to the latest next version with:

yarn add --dev chromatic@next

# or
npm i --save-dev chromatic@next

Using the github action

Use our chromatic-next action:

- uses: chromaui/action-next@v1

Contributing

Contributions of any kind are welcome! We're available to chat via the Intercom widget on the documentation site.

Compatibility & versioning

Compatibility is guaranteed between this package and Chromatic like so:

  • Production Chromatic ensures it’s compatible with what’s on npm
  • What's on the main branch is equal to what's published on npm
  • This package ensures it’s compatible with production Chromatic

To facilitate upgrading in the future, removing and adding features, this is the process:

  • Any new features will have to be on Chromatic production before they could be used in this package
  • We can add feature flags to be able to test new functionality
  • Chromatic production can not remove any features this package depends on until after the usage has been removed from this package in addition to a grace period to allow users to upgrade

Building and running locally

  1. Ensure all dependencies are installed with yarn install
  2. Build + watch the code locally: yarn dev
  3. Run a build of all the CLI's stories against a Chromatic project: yarn chromatic -t <token>.

Running against staging

CHROMATIC_INDEX_URL=https://index.staging-chromatic.com yarn chromatic -t 253df72b53d2

Running against development

To test against a local development version of the Chromatic stack, use

CHROMATIC_INDEX_URL=https://index.dev-chromatic.com yarn chromatic -t <token>

To only test a small number of test stories as a smoke test, use:

SMOKE_TEST=1 CHROMATIC_INDEX_URL=https://index.dev-chromatic.com yarn chromatic -t <token>

Publishing a new version to npm

Before publishing, make sure you've done the following:

  • Updated CHANGELOG.md
  • Committed and pushed everything (clean working directory)
  • Decide on the proper semver bump (major/minor/patch)
  • Decide on the proper tag (canary/next/latest)

We have three types of releases:

  • canary releases are intended for testing purposes and should not be used in production, as they may only work against a staging or dev environment.
  • next releases should be valid, working releases that can potentially be used by early adopters of new features, for example to handle a support request.
  • latest releases are the general audience production releases, used by most people.

For GitHub Actions, we publish chromaui/action-canary and chromaui/action-next, which contain the latest canary or next release, respectively. A latest release will also automatically update chromaui/action-next (besides chromaui/action), in order to keep users who happen to depend on chromaui/action-next up to date with the latest release.

A script is provided to create new releases:

yarn release <major|minor|patch> <canary|next|latest> [--dry-run]

This script ensures the version is bumped properly, the tag is set correctly and the corresponding GitHub Action is updated.

Examples:

yarn release patch canary

Releases e.g. 6.6.1-canary.0.

yarn release major latest

Releases e.g. 7.0.0.

Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI