Storybook

One command opens every story of a built Storybook in Chromium, takes a screenshot at each width and uploads them.

Install#

The capture uses the Playwright in your project.

terminal

npm install -D stateofpixel playwright
npx playwright install chromium

Run it on CI#

.github/workflows/visual.yml

steps:
  - uses: actions/checkout@v4
    with:
      fetch-depth: 0
  - run: npm ci
  - run: npx playwright install --with-deps chromium
  - run: npx storybook build
  - run: npx stateofpixel storybook storybook-static --viewports 375,1280

Keep id-token: write and the push trigger on main from the Quickstart.

Each story is captured at every width in --viewports and named Title/Name [chromium 1280], like Button/Primary [chromium 375].

Pick stories and wait for them#

terminal

npx stateofpixel storybook storybook-static \
  --include "Components/**" \
  --exclude "**/Playground" \
  --wait-for-selector "[data-ready]" \
  --delay 200

Flag	Default	What it does
`--viewports <widths>`	`1280`	Comma separated viewport widths.
`--include <glob>`		Only stories whose title/name match.
`--exclude <glob>`		Skip stories whose title/name match.
`--wait-for-selector <selector>`	`#storybook-root > *`	Wait for this before each screenshot.
`--delay <ms>`	`0`	Wait this long before each screenshot.

In --include and --exclude, * stays inside one segment of Title/Name and ** crosses segments.

storybook also takes every flag of upload, like --build-name, --shard and --threshold. See the CLI reference. Use --dry-run to capture and print the plan without uploading.

Stories that load data or fonts late are the usual cause of noisy diffs. Stable screenshots has the fixes.