Compatibility

Chromatic compatibility

storybranch reads parameters.chromatic from the story context Storybook has already merged. Keys below are applied. Any other chromatic key is left unused, so a block copied from Chromatic keeps the behavior below and does not silently change it.

Supported keys

chromatic.delay
number (ms)
Wait before the screenshot. Default 0.
chromatic.diffIncludeAntiAliasing
boolean
Count anti-aliasing as a diff. Default false.
chromatic.diffThreshold
number from 0 to 1
Pixel sensitivity. Default 0.1.
chromatic.disable
boolean
Skip the story when true.
chromatic.disableSnapshot
boolean
Skip the story when true.
chromatic.ignoreSelectors
string[]
CSS selectors whose boxes are excluded from the diff.
chromatic.pauseAnimationAtEnd
boolean
Pause CSS and Web Animations at the end. Default true. false pauses at the start.
chromatic.forcedColors
active | none
Emulate the forced-colors media feature.
chromatic.prefersReducedMotion
reduce | no-preference
Emulate prefers-reduced-motion.
chromatic.media
print | screen
Emulate the print or screen media type.
chromatic.cropToViewport
boolean
Clip the screenshot to the viewport. Default false.
chromatic.modes
object
One snapshot per mode. A named viewport is looked up; a number is a width.
chromatic.viewports
number[]
One snapshot per width, at height 900. Cannot be combined with modes.

Parameter	Value	What storybranch does
chromatic.delay	number (ms)	Wait before the screenshot. Default 0.
chromatic.diffIncludeAntiAliasing	boolean	Count anti-aliasing as a diff. Default false.
chromatic.diffThreshold	number from 0 to 1	Pixel sensitivity. Default 0.1.
chromatic.disable	boolean	Skip the story when true.
chromatic.disableSnapshot	boolean	Skip the story when true.
chromatic.ignoreSelectors	string[]	CSS selectors whose boxes are excluded from the diff.
chromatic.pauseAnimationAtEnd	boolean	Pause CSS and Web Animations at the end. Default true. false pauses at the start.
chromatic.forcedColors	active \| none	Emulate the forced-colors media feature.
chromatic.prefersReducedMotion	reduce \| no-preference	Emulate prefers-reduced-motion.
chromatic.media	print \| screen	Emulate the print or screen media type.
chromatic.cropToViewport	boolean	Clip the screenshot to the viewport. Default false.
chromatic.modes	object	One snapshot per mode. A named viewport is looked up; a number is a width.
chromatic.viewports	number[]	One snapshot per width, at height 900. Cannot be combined with modes.

Parameter inheritance

Capture calls getStoryContext once per story. That context already follows Storybook’s merge: project parameters from .storybook/preview, then the meta (component) parameters, then the story. Objects deep-merge. Arrays, including ignoreSelectors andviewports, are replaced by the more specific value rather than concatenated.

// preview: chromatic.delay 0, ignoreSelectors [".from-preview"], diffThreshold 0.2
// meta:    chromatic.ignoreSelectors [".from-meta"], forcedColors "none"
// story:   chromatic.delay 15, media "print"
// result:  delay 15, diffThreshold 0.2, ignoreSelectors [".from-meta"],
//          forcedColors "none", media "print"

Ignored elements

Three marks exclude pixels from the diff. The screenshot you review still shows the real element.

Class chromatic-ignore
Attribute data-chromatic="ignore"
Each selector in chromatic.ignoreSelectors

storybranch finds those elements in the light DOM and in open shadow roots. A selector does not cross a shadow boundary. Elements inside an iframe are not searched; put the mark on the iframe element to exclude its box. Pixels inside the boxes are left out of the comparison. If an ignored element changes size or position and that moves other pixels, or the screenshot itself changes size, the diff still fails.

parameters: {
  chromatic: { ignoreSelectors: [".price"] },
}

Media features

forcedColors,prefersReducedMotion, andmedia are story parameters. They apply to every snapshot of that story, including each mode. Putting them inside a mode object does not emulate them. An invalid value fails the story (invalid chromatic.forcedColors,invalid chromatic.prefersReducedMotion,invalid chromatic.media, orinvalid chromatic.ignoreSelectors) instead of capturing the wrong variant.