
How to screenshot every Storybook component automatically
How to screenshot every Storybook component automatically Your Storybook is the source of truth for your component library. But the visual docs go stale the moment someone changes a component without updating the story screenshots. Chromatic solves this but costs $149/month before you need more than a handful of snapshots. And rolling your own Puppeteer setup to screenshot every story is surprisingly brittle — Storybook's build output changes, stories load at different speeds, and local browsers render differently than your CI environment. Here's how to screenshot every Storybook story automatically using the PageBolt API — no local browser required, consistent rendering every time. How Storybook's URL structure works Every Storybook story is accessible at a predictable URL: http://localhost:6006/iframe.html?id=STORY_ID&viewMode=story Where STORY_ID follows the pattern component-name--story-name (all lowercase, spaces replaced with hyphens). For example: button--primary forms-input--wi
Continue reading on Dev.to Webdev
Opens in a new tab

