What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To set up Happo with Storybook, install the happo development dependency, point happo.config.ts at your .storybook directory, add a Happo CLI script, and run it. For pull-request checks, keep full reports on your main or default branch so partial runs have baseline screenshots to compare against.
Before you start
You need a working Storybook and stories that render the component states you want to check. A screenshot suite is only as useful as its coverage: include meaningful states such as default, loading, error, and open or closed UI states where they apply. Happo describes its Storybook integration and prerequisites in its integration overview.
As an Amazon Associate I earn from qualifying purchases.
This setup is independent of your application framework and CI provider. The exact CI workflow file depends on the provider your repository uses.
Install Happo and configure Storybook
1. Add the Happo package
Install happo as a development dependency using your package manager:
#1 Best Overall
npm install --save-dev happopnpm add --save-dev happoyarn add --dev happo
Use the current happo/storybook integration. Older setup guides may refer to a separate happo-plugin-storybook package; the current Happo guide uses the happo package instead.
2. Create happo.config.ts
At the project root, configure Happo to use your Storybook directory:
import { defineConfig } from 'happo';
export default defineConfig({
integration: {
type: 'storybook',
configDir: '.storybook',
},
});.storybook is the documented default configuration directory. If your project stores Storybook configuration elsewhere, set configDir to that directory. Add outputDir, staticDir, or usePrebuiltPackage only if your build needs them. In particular, when using an existing build, make outputDir match its location. See the Happo Storybook documentation for the available configuration options.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteRank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
3. Add and run the CLI script
Add a script to the scripts section of package.json:
{
"scripts": {
"happo": "happo"
}
}Then run:
npm run happoHappo’s CLI places its client runtime in the Storybook package it builds. For the current setup, you do not need to add a manual runtime registration import just to get screenshots running.
Run Happo in CI and establish baselines
Run full Happo reports when changes are pushed to the main or default branch, and use those reports as baselines for pull-request comparisons. A partial pull-request run needs an available baseline to compare with; without full reports on the default branch, that comparison may not have the reference screenshots it needs.
Rank #3
Start with full runs if you do not yet have a reliable story-selection strategy. Happo documents --only to include stories and --skip to exclude them. With excluded stories, Happo carries their screenshots into the comparison from a recent baseline; only freshly rendered screenshots count against quota. Its documentation also describes baseline lookup and fallback behavior, including falling back to a full run if the needed files or baseline state cannot be resolved.
For its own Storybook, Happo Founder and CEO Henric Persson reported a 40% reduction in snapshot volume after adopting --only in a May 26, 2026 article. That is Happo’s internal result, not an independent benchmark or a guaranteed saving for another repository. Happo discusses the approach and its trade-offs in its article on growing coverage while managing snapshot volume.
Choose stories carefully when filtering
Use change-aware selection conservatively
A custom --only filter can select stories based on changed files by building a module dependency graph and including stories that transitively import those files. But static analysis can miss dynamic-loading patterns such as require.context and import.meta.glob. Audit for these patterns and include affected areas in full runs unless your selection logic accounts for them.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Treat changes to Storybook configuration, package metadata, and lockfiles as potentially affecting the suite globally. When a changed file or its dependencies are not understood, prefer a full run over silently reducing coverage. As Persson puts it, “The conservative default (full build when unsure) means you’re not risking coverage while you refine it.”
Exclude or refresh stories deliberately
Use --skip or a per-story happo: false parameter for stories that should not be captured. Remember that a skipped story may be represented by a recent baseline screenshot in a partial comparison rather than a newly rendered image. If state leaks between stories, use navigatePerStory to force a fresh page load for each story; this can improve isolation but makes the run slower.
Free tools Windows power users keep installed
One-click scans. No signup required.
Account for themes and asynchronous content
If your design system supports multiple themes, use theme parameters and Happo’s theme-switcher helper to capture the relevant variants. For asynchronous content, prefer documented waitFor or waitForContent conditions where appropriate. Delays are a last resort: they add time to the suite and may not address the underlying cause of inconsistent rendering. The documented default render timeout is two seconds; increase it for stories that genuinely need longer, such as those with extended interactions.
Optional Storybook helpers
Current Happo documentation makes manual registration optional. If you need helpers such as theme switching or forced screenshots, import happo/storybook/register in .storybook/preview.js. The Happo panel is another optional aid for inspecting parameters and testing hooks; neither the panel nor decorator is required for the basic setup.
Happo’s documentation flags a compatibility issue for versions before v6.19.1 when adding its decorator under renderers other than React. Check the current documentation and your installed version before adding that decorator; do not add optional integration code as boilerplate when you do not need it.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What screenshot checks can tell you
Visual comparisons can surface presentation changes in areas such as layout, spacing, styling, and typography. They complement rather than replace functional tests, which exercise behavior and interactions. Happo describes its own real-browser coverage, responsive viewport options, CI review, and accessibility regression testing on its Storybook screenshot testing page; check the targets and availability for the plan and configuration you intend to use.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallTroubleshooting
| Symptom | Likely cause | What to check |
|---|---|---|
| Happo cannot find or build Storybook | The configured Storybook directory or build output does not match the project. | Confirm configDir points to the Storybook configuration directory. If using a prebuilt Storybook, make outputDir match the existing build location and consult the configuration guide. |
| Partial pull-request comparisons lack expected reference screenshots | A full baseline report may not be available, or baseline files/state could not be resolved. | Ensure the main/default branch produces full reports. Check the documented baseline lookup and fallback behavior before relying on a partial run. |
| A changed component is missing from a filtered run | The custom file-to-story selector may have missed a dependency, especially a dynamic import pattern. | Review the dependency graph and patterns such as require.context or import.meta.glob. Run the affected area fully until selection is reliable. |
| A story times out or captures before content is ready | The render may take longer than the default timeout, or asynchronous content is not awaited. | Use an appropriate waitFor or waitForContent condition. Increase the documented two-second default render timeout only for stories that genuinely need more time. |
| One story affects the rendering of another | State may be leaking between stories. | Consider navigatePerStory for a fresh page load per story, accounting for the slower run. |
| A helper decorator causes compatibility trouble | The decorator may be used with an older Happo version or a non-React renderer. | Manual registration and the panel are optional. Check current version-specific guidance, including the documented issue for versions before v6.19.1. |
Or skip the browser setup
Happo checks Storybook states for visual changes. If your separate need is to capture a website page through an API, ScreenshotNeo offers a one-request screenshot or PDF endpoint; it is not a replacement for Happo’s Storybook visual-regression comparisons.
For example, this cURL request saves a screenshot of Stripe:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie/consent banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
