Use with globals and params to control snapshot capturing behavior

When using Chromatic with Storybook, you can control how a snapshot is captured via Storybook parameters and globals.

Parameters

Parameters are static metadata that can be attached at the story, component (meta), and project (global) levels. For more information on how to use parameters in Storybook, see: Config with story params.

Parameter	Type	Purpose
`chromatic.delay`	`number`	Delay the capture by specified number of milliseconds.
`chromatic.diffIncludeAntiAliasing`	`boolean`	Include anti-aliasing in diffs
`chromatic.diffThreshold`	`number`	Control visual sensitivity of diffs, learn more
`chromatic.disableSnapshot`	`boolean`	Skip test
`chromatic.ignoreSelectors`	`string[]`	Ignore elements from diff
`chromatic.pauseAnimationAtEnd`	`boolean`	Pause animation at end
`chromatic.forcedColors`	`string`	Control CSS forced colors mode
`chromatic.prefersReducedMotion`	`string`	Control CSS reduce motion setting
`chromatic.media`	`string`	Enable CSS print media styles
`chromatic.cropToViewport`	`boolean`	Crop the screenshot to the viewport, learn more
`chromatic.modes`	`object`	Apply modes
`chromatic.viewports`	`number[]`	Legacy API for setting viewports for a story. Use Modes instead.

Check parameters in a published Storybook

In Storybook 10, open a story’s iframe.html page and run this in the browser console to see its Chromatic parameters:

window.__STORYBOOK_PREVIEW__.currentRender.story.parameters.chromatic;

Run the command after the story loads. From the Storybook manager page, select the storybook-preview-iframe frame in DevTools first.

To list stories with visual snapshots disabled, run this in the iframe.html console:

Object.entries(await window.__STORYBOOK_PREVIEW__.extract())
  .filter(([, story]) => story.parameters?.chromatic?.disableSnapshot)
  .map(([id]) => id);

These commands use Storybook’s preview internals, which may differ in other versions. You can check the published Storybook version at /project.json in the Storybook root.

Globals

Globals in Storybook represent “global” (as in not story-specific) inputs that affect how a story is rendered.

Global	Type	Purpose
`viewport`	`object`	Use the Storybook viewport feature to control the dimensions of the story
`a11y`	`object`	Configure accessibility tests
Custom global	user defined	Custom globals in modes

Edit page Submit feedback