Chromatic
@chromatic
Our mission: to improve the UX of the Internet. Core maintainers of Storybook and makers of Chromatic.
Bonus: you can now ignore any test manually too. New story not ready for review? Weird diff after a rebase? Set it aside and come back later.
Ignoring a flaky test doesn't mean ignoring the problem. Every unstable test gets a Playwright trace attached automatically (network, console, DOM) ready to reivew when you are.
Flake Filter renders every test multiple times to check its stability. Unstable ones move into an auto-ignored group. Their diffs stop blocking your build.
Flaky tests shouldn't block your build. Meet Flake filter: Chromatic now auto-detects unstable tests, so you can focus on real changes without getting blocked by flakes. 🧵
Vitest already has visual testing. How is this better? ✔️ Fast and reliable servers consistently snapshot components in parallel ✔️ Automatically detect and reduce flakiness ✔️ Review and debug the real code behind your components, not screenshots
Why visual test? For UI, checking that something works with functional tests doesn’t tell the full story. Your Add to Cart button may technically be clickable, but if it looks untrustworthy or broken, no one will click it. Visual tests guard against that, with no extra code.
Get first access to our @vitest.dev plugin, which adds Chromatic’s visual testing and review to your browser tests. It’s built by @ariperkkio.dev, a Vitest core maintainer. It’s free to use while in beta and requires no changes to your test files. Read on for more info 🧵
We’re launching early access for Vitest visual testing with Chromatic! ⚡️ Built with @vitest.dev core maintainer ariperkkio.dev, Chromatic adds visual testing to the browser tests you already write. 🧵 (1/4)
📱Announcing beta Chromatic support for visually testing React Native apps! If you already use Chromatic, this workflow should feel familiar: Push a change → Chromatic captures rendered native UI → visual regressions show directly in your PR. 🔍✨ (1/3)
Many a11y issues are repetitive, straightforward, and ideal for parallelized AI workflows. 🤖 Learn how to use Storybook + Chromatic to: ✅ Detect issues ✅ Parallelize remediation ✅ Use AI agents to fix + retest ✅ Validate fixes in Storybook 🎟️ Register in comments 👇
Our April changelog is out: 🔀 PR comments: Your test results and Storybook link right in the PR comment 🫨 Auto Playwright traces on unstable snapshots (no rerun needed) 🤖 Publish your Storybook MCP so agents reuse your approved components Read the full changelog 👇
🎟️ Want to see it live? Join the Storybook team Tuesday, 3/31 at 2 PM EST / 20:00 CEST for a live demo and Q&A: us02web.zoom.us/webinar/regi...
What if your UI didn’t have to be decided at build time? Generative UI lets AI assemble the components you already ship using intent, state + data to render UI needed in the moment. We’re walking through how this works live with @mrmagan.bsky.social (Tambo). Register in comments 👇
Frontend dev is a feedback loop: build → test → review → ship. AI speeds it up, and can ship slop just as fast. Here’s a practical guide for humans + agents to share the same loop using functional + visual + a11y checks to keep UI stable while shipping faster. 👇 link in comments
🚀 New Chromatic updates are here. We’ve been sharpening the testing experience so teams can spot issues earlier and triage way faster. Accessibility testing, UI clarity, and Page Shift Detection all got meaningful upgrades. 🧵 (1/7)
UI testing covers a huge surface area—logic, visuals, interactions, a11y, user flows. The challenge isn’t running tests; it’s choosing the right approach. We break down a component-driven strategy that aligns with how modern UIs are built. 👉 www.chromatic.com/blog/how-to-...
Most teams fix a11y issues. Not all stop creating new ones. Tomorrow, our product team is sharing how we built a system that does both—cutting 15k+ violations without slowing delivery. Join us live & bring your questions! 📅 Nov 13 • 12 PM ET / 18 CET 👉 Register in comments
You can’t trust what you can’t reproduce. Flaky tests pass, fail, then pass again — not because of randomness, but rendering instability. This Thursday, Scott Johnson, PhD from Chromatic shows how SteadySnap has cut false diffs by 34%. 🗓️ Oct 30 · 12 PM EDT 🔗 Registration link in comments 👇
👀 Reminder: our webinar’s tomorrow A11y testing isn’t either/or. Automated checks catch the obvious. Manual testing catches the weird stuff. Used together = fewer bugs in prod. Join us + Homer Gaines, CPACC to break down a workflow that scales. 🎫 Save your spot: us02web.zoom.us/webinar/regi...
Automated a11y tests = fast + scalable. Manual a11y testing = real-world coverage. Used together? You catch more bugs before they ship. Join us + accessibility expert Homer Gaines to build a workflow that works. 🗓️ Tues, Aug 5 — 12PM EDT 🎟️ register here → us02web.zoom.us/webinar/regi...
Accessibility debt adds up fast—especially with limited time, lean teams, and legacy code. Join @a11ymel.bsky.social (HashiCorp) & @ericwbailey.website (GitHub) for a live session on how to fix A11y debt without burning out your team or blowing up your roadmap. Registration link in comments 👇
Accessibility debt piles up fast. Fixing it shouldn’t burn out your team. Join @a11ymel.bsky.social (HashiCorp) and @ericwbailey.website (GitHub) for a live session on how to reduce A11y debt without overwhelming your team. 🗓 July 24, 12PM EDT 🔗 save your spot: us02web.zoom.us/webinar/regi...
🚀 Accessibility Testing is live in Chromatic! Run a11y checks in Storybook. Catch regressions in CI. Track progress in the new dashboard. Join us tomorrow for a live demo of the full pipeline + AMA. 🗓 July 10 · 12PM EDT 🔗 Sign up here: us02web.zoom.us/webinar/regi...
The dashboard gives you a component-level overview of accessibility issues across your entire project. 📈 Visualize trends over time and measure progress 🔍 Find components that need the most attention 📋 Prioritize fixes by impact
Smart regression checks in CI Easily distinguish between pre-existing accessibility debt and new issues introduced by your PR. So you can ship fast without accidentally adding new accessibility issues.
Traditional tools create redundant errors because they run page-level tests, and components are reused across your app. You waste time tracing each error back to its source. Chromatic uses your existing stories to run tests, making it easier to spot and fix issues.
🚀 Chromatic's Accessibility Testing & Dashboard are now live! Powered by Storybook & axe, we're making accessibility compliance seamless across your entire dev lifecycle—without slowing you down.
🚀 Accessibility Testing drops next week in Chromatic. Join us for a live demo + AMA: See how to catch issues in Storybook, prevent regressions in CI, and track fixes over time—without slowing down your team. 🗓 July 10 · 12:00 PM EDT / 18:00 CET 👉 Save your spot: us02web.zoom.us/webinar/regi...