Local dev is where most UI changes happen (and where regressions sneak in). States drift, styles diverge, and tiny tweaks pile up until something breaks in CI. The Applitools Storybook Addon brings AI-powered visual testing straight into Storybook so you can catch issues as you code, approve the good changes quickly, and keep your CI/CD pipelines green.
AI-Powered Visual Testing Inside Storybook
Open your Storybook and run visual tests from an Applitools Eyes tab – no context switching. Results are grouped by component to mirror your Storybook structure, and a reporter widget highlights what needs attention first so you can review diffs in minutes, not hours. Learn more on our Storybook Component Testing with Applitools page.
- Catch bugs where you build. Validate component states during local development and avoid surprises later.
- Review faster with Visual AI. See only meaningful, human-perceptible UI changes without pixel-to-pixel noise. Tune sensitivity with AI match levels when you need to.
- Scale coverage painlessly. Run once; render everywhere with Ultrafast Grid across browsers, devices, and viewports in parallel.
How to Use the Applitools Eyes Storybook Addon
Getting started takes just a couple of minutes.
- Install the SDK & Addon
Add Applitools Eyes to your project and enable the Storybook addon (React, Vue, Angular supported). See the installation instructions in the Eyes Storybook Addon docs. - Run Applitools Visual Tests in Storybook
Open Storybook, switch to the Applitools Eyes tab, and trigger tests for a single story or an entire component. Results stream back in real time with automatic grouping by component. - Review & Maintain
Use Visual AI diffs, side-by-side views, and auto-maintenance to approve or reject changes in bulk. Prioritized sorting surfaces what needs attention first. - Scale Across Browsers/Devices
Turn on Ultrafast Grid to parallelize renders across Chrome, Firefox, Safari, Edge, and mobile sizes – without extra local setup.
Applitools Storybook Addon Use Case Playbook
Below are the three most common ways teams use the Eyes Storybook Addon each – with a quick, practical flow pulled right from the product.
Use Case: Guard Your Design System
As you refactor tokens or update themes, run visual tests on every component state. Spot unintended changes across the library instantly.
How to do it in Storybook
- Start Storybook and open your design‑system component in the Applitools Eyes tab.
- Click Run from the tab (or use Run in the left sidebar test module). The addon tests the stories and streams results inline for every browser/device in your applitools.config.js.
- In the sidebar, filter by Unresolved to zero in on changes across the library (Green = passed, Orange = unresolved, Red = failed).
- Open a story’s result and use Side‑by‑Side or the Slider to spot subtle spacing/typography diffs.
- Approve legit theme updates with Thumbs Up (or use ⋯ → Review actions to approve the whole story/batch). Reject regressions with Thumbs Down and fix.
Pro tip: Use the tab ⋯ → Configuration to confirm you’re validating the right browser matrix and server URL. See more options in the docs.
Use Case: Fix Fast During Local Dev
Working on a feature branch? Validate your component in Storybook before you commit.
How to do it in Storybook
- Open your feature’s stories, then hit Run in the Applitools tab for the component you’re touching.
- Watch statuses update inline; click the status buttons to filter to Unresolved so you only look at what changed.
- Click into any row to open compare tools: Diff Image, Actual Image, Expected Image, Side‑by‑Side, or Slider.
- If the change is intended, Thumbs Up to approve; otherwise Thumbs Down to flag and keep iterating.
- When you’re happy locally, push your branch. You can scale the same setup in CI using your existing Storybook build/preview URL.
Heads‑up: To view baselines or approve/reject, sign in to your Applitools account in the same browser that’s running Storybook (you’ll be prompted if not).
Use Case: Ship Multi‑Browser Confidence
One click, many targets. Validate layout and responsive behavior across browsers and viewports – early.
How to do it in Storybook
- In ⋯ → Configuration, verify your browsers/devices list (Chrome, Firefox, Safari, Edge; add viewports you care about).
- Hit Run for representative stories (states, theming, interactive). Results come back grouped by each browser/device so differences are obvious.
- Filter the sidebar by Unresolved and scan. Use Side‑by‑Side or Slider to compare layout at different sizes.
- Approve good changes in bulk (⋯ → Review actions) to keep maintenance low.
- For broader coverage, run the same setup in CI and expand the matrix.
Why Visual AI > Pixel Diffs for Storybook
Pixel-to-pixel tools are fragile with dynamic content and minor rendering differences. Applitools Visual AI mimics human vision to highlight only meaningful UI changes (structure, layout, content) while ignoring the noise. You can still dial sensitivity up or down with match levels whenever needed. Less flake, more signal.
Try AI-Powered Visual Testing in Storybook Today
Run your first component tests in minutes, review diffs right in Storybook, and expand coverage with Ultrafast Grid – without slowing delivery.
- Explore the Applitools Storybook Component Testing solution
- Read the Applitools Storybook Addon docs
- Compare Applitools Eyes against Chromatic
Frequently Asked Questions
It runs Applitools visual tests from inside Storybook. You can trigger tests per story or component, then review results and diffs inline with automatic grouping that mirrors your Storybook tree.
With the Applitools Storybook Addon, you existing stories become the tests.
Applitools’ Visual AI detects signficant visual differences instead of only pixel-to-pixel comparisons. This means you see fewer false positives and spend less time on maintenance.
Appitools also lets you auto-maintain hundreds of tests at once (when you do need to perform test maintenance), run them across multiple browsers and devices instantly, and manage everything in the same platform that’s also running your Playwright and Cypress end-to-end test flows. See our Applitools vs. Chromatic comparison page for a deeper breakdown.
Validate locally in Storybook to prevent CI failures. When you’re ready, run the same tests in CI and render broadly with Ultrafast Grid – fast and consistent.
Yes. You’ll need an active Applitools Eyes account and an API key to use the Applitools Storybook Addon.
