Last verified: 2026-02-20 · Source
Component snapshots for Storybook
Automate screenshot capture of Storybook stories. Build visual regression testing into your component library CI/CD pipeline without browser overhead.
Storybook Story Screenshot Automation
Capture screenshots of published Storybook stories via API:
curl "https://api.scrnpix.com/screenshot?url=https%3A%2F%2Fyour-storybook.com%2Fiframe.html%3Fid%3Dbutton--primary&width=800&height=600&format=png" \ -H "X-KEY: your-api-key" \ -o button-primary.png
CI Response Handling
Handle API responses when capturing Storybook stories:
| Status | Description |
|---|---|
| 200 OK | Success. Save response to screenshots/[story-id].png. Use story ID as filename for organization. |
| 400 Bad Request | Invalid story URL. Verify iframe.html?id= format and that story ID exists in stories.json. |
| 401 Unauthorized | API key missing. Set in CI environment variables and pass via request headers. |
| 404 Not Found | Storybook URL unreachable. Ensure Storybook is deployed/running before screenshot job. |
| 5xx Server Error | Transient error. When iterating stories, continue on failure and retry failed ones at end. |
Key Features
Story Snapshot Automation
Iterate through Storybook stories and capture screenshots via API. Build visual regression testing for entire component libraries automatically.
CI/CD Integration
Run in GitHub Actions, GitLab CI, or any CI system. No browser installation needed. Just HTTP requests to capture component screenshots.
Design System Testing
Test component library changes visually. Catch unintended UI regressions before they reach production. Perfect for design system maintenance.
Chromatic Alternative
Build your own visual testing pipeline without Chromatic's pricing. Use Scrnpix for screenshots + image diff libraries for comparison.
Frequently Asked Questions
How do I screenshot all Storybook stories automatically?
Use Storybook's stories.json API to list all stories, then iterate and call Scrnpix API with each story's iframe URL (iframe.html?id=story-id). Store screenshots in CI artifacts.
Can I use this instead of Chromatic?
Yes. Use Scrnpix for screenshot capture, pair with image diff libraries (pixelmatch, looks-same) for comparison. Build your own visual regression pipeline at lower cost.
How do I handle different component states?
Create separate stories for each state (hover, focus, error). Scrnpix captures the rendered story. For interactive states, use story parameters to pre-set state.
Does this work with Storybook 7 and 8?
Yes. Storybook's iframe.html pattern works across versions. As long as you can access stories via URL, Scrnpix can screenshot them.
Build visual testing for your component library
Automate Storybook screenshots and create visual regression testing. Integrate with CI/CD to catch UI regressions early.
Get Started