Capture settings
Choose browsers, rendering defaults, and the resources your stories can load.
Project defaults#
Owners and admins configure capture under Project settings. Changes apply to new runs. Record why you change a default, because it may cause every story to need review again.
| Setting | What it controls |
|---|---|
| Browsers | Chromium, Firefox, and WebKit. Each adds visual snapshots. |
| Viewport width and height | Default browser size; stories can override it. |
| Device scale | Screenshot pixel density. |
| Locale and timezone | Formatting and browser environment for repeatable rendering. |
| Colour scheme | Browser light/dark preference. |
| Story timeout | Time allowed to render, run interactions, and settle. |
| Parallel pages | Capture concurrency; lowering it may help resource-heavy stories. |
| Allowed external hosts | Hosts the build may contact during capture. |
The settings form enforces valid ranges. A web viewport width can be 64–4096 pixels, height 64–16384, and device scale 1–3.
Multiple browsers#
Enable only the browsers your team intends to maintain. WebKit is browser-engine coverage, not a test on a physical iPhone. For actual React Native rendering, see the native preview guides.
One story in three browsers produces three visual snapshots per viewport or mode. Accessibility checks run in Chromium only.
External resources#
External hosts are blocked unless allowed. Use one hostname per line, for example fonts.gstatic.com or *.example.com, rather than a full URL. Check the run's blocked-host diagnostics if a font, image, or API request fails.
Prefer bundled assets and mocked APIs. Allowlisting a host does not supply credentials or make a private service reachable. Do not depend on a service running only on your laptop.
Cropping and regions#
The project can capture the full page or crop to the story's content where supported. Changing that setting reframes affected stories and can require acceptance again. A story's explicit capture region takes precedence. See story parameters.
Light and dark#
Changing the browser colour scheme affects prefers-color-scheme. A component theme controlled by a Storybook global also needs that global configured. See viewports and modes to capture named combinations.