npm install chromatic
Publishes your Storybook to Chromatic and kicks off tests if they're enabled.
👉 Read the Chromatic CLI docs
📝 View the Changelog
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:
Change your script to use the
npx chromatic@next --project-token ...
Using a dependency in
Update to the latest
next version with:
yarn add --dev chromatic@next # or npm i --save-dev chromatic@next
Using the github action
- uses: chromaui/action-next@v1
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
- Ensure all dependencies are installed with
- Build + watch the code locally:
- 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:
canaryreleases are intended for testing purposes and should not be used in production, as they may only work against a staging or dev environment.
nextreleases should be valid, working releases that can potentially be used by early adopters of new features, for example to handle a support request.
latestreleases are the general audience production releases, used by most people.
For GitHub Actions, we publish
chromaui/action-next, which contain the latest
nextrelease, respectively. A
latestrelease will also automatically update
chromaui/action), in order to keep users who happen to depend on
chromaui/action-nextup to date with the
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.
yarn release patch canary
yarn release major latest