Sign in

Chromatic

@chromatic.com
255 followers 6 following 100 posts

Our mission: to improve the UX of the Internet. Core maintainers of Storybook and makers of Chromatic.

PostsRepliesMedia
Chromatic @chromatic.com · 3h
Our new @vitest.dev plugin turns the tests you already have into visual tests. 📖 No Storybook required ✍️ No changes to your test code Join @ariperkkio.dev, the Vitest core maintainer who built it, and @kylegach.com live tomorrow. 🧪 🎟️ Save your spot 👇
How to visually test your components with Vitest & Chromatic
100
Chromatic @chromatic.com · 24/09/2026
@vitest.dev already renders your components in a real browser. Now you can visually test them there, with no test code changes. 🎙️ @ariperkkio.dev, the Vitest core maintainer who built our new plugin, is doing a live walkthru with @kylegach.com to show you how. 🎟️ Save your spot 👇
How to visually test your components with Vitest & Chromatic
1151
Chromatic @chromatic.com · 03/09/2026
Run your tests as usual. Chromatic then: ✔️ Compares snapshots across stable cloud browsers ✔️ Runs every browser and viewport in parallel ✔️ Surfaces visual changes in your PR for team review ✔️ Stores the full rendered UI behind every diff (3/4)
vitest build screen in chromatic
110
Chromatic @chromatic.com · 03/09/2026
Vitest core maintainer, @ariperkkio.dev, built the plugin around Browser Mode tests. As your tests run, Chromatic captures a web archive of each result: the HTML, CSS, JS & assets behind the UI. When something is off, open that exact state in a browser instead of debugging a flat screenshot. (2/4)
Terminal output of Chromatic visual regression testing on vitest
110
Chromatic @chromatic.com · 03/09/2026
Chromatic for @vitest.dev Browser Mode is live. 🧪📸 Browser Mode runs your component tests in a real browser. Now Chromatic checks how those components look by capturing the rendered UI. No new screenshot assertions. No second suite to maintain. 🧵 (1/4)
Vitest Visual Regression Testing with Chromatic
1244
Chromatic @chromatic.com · 02/09/2026
iOS is now available for React Native visual testing on Chromatic 📱 Chromatic now builds your Storybook app for iOS and runs your visual tests on the iOS simulator. 👉 Request beta access to get started: share.hsforms.com/1Bjqi15TSS3m...
Chromatic iOS testing React Native
020
Chromatic @chromatic.com · 25/08/2026
Trends dashboard charts all factors that affect billed snapshots: no. of builds you run, snapshots generated by each build, and the average cost per snapshot. This helps you see what's driving usage usage and investigate unexpected increases.
Trends dashboard displays a line chart showing billed snapshots over 156 weeks, highlighting different contributing factors.
100
Chromatic @chromatic.com · 25/08/2026
TurboSnap now bypasses builds when there are no changes in any story’s dependency graph within that build. Nothing is captured, nothing is copied, and you’re charged zero snapshots.
CLI output for a Chromatic build that was bypassed. It confirms how many snapshots were bypassed and that this build will not be displayed in the Chromatic webapp UI.
100
Chromatic @chromatic.com · 06/08/2026
Our upcoming public API lets agents test their own frontend work, diagnose what failed, and fix it in the same loop. Join Jarel Fryer and Varun Vachhar for a live preview and our roadmap for agents. Register in comments 👇
Sneak peek of Chromatic API for Agents webinar
131
Chromatic @chromatic.com · 14/07/2026
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.
Ignore flaky tests automatically and manually
100
Chromatic @chromatic.com · 14/07/2026
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.
Playwright trace is attached automatically via Flake filter with Chromatic
100
Chromatic @chromatic.com · 14/07/2026
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.
Chromatic flake filter ignores flaky tests automatically
100
Chromatic @chromatic.com · 14/07/2026
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. 🧵
220
Chromatic @chromatic.com · 11/06/2026
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
Vitest suite → Test cases → Browser cloud (self-manager, standardized, parallel)
120
Chromatic @chromatic.com · 11/06/2026
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.
Vitest + assertions above a screenshot of code. Vitest + visual tests above a screenshot of code half the length of the prior one. Visual tests cover more with less code.
110
Chromatic @chromatic.com · 11/06/2026
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 🧵
Early access. Vitest Browser Mode visual tests in Chromatic for free (while in beta for the summer)
1163
Chromatic @chromatic.com · 09/06/2026
AI gets you to prototype fast. The hard part is proving the next prompt didn’t break the UI. Join @bolt.new CEO, Eric Simons and Chromatic CEO, Zoltan Olah for a live session on taking AI-generated UIs to production with visual tests + human review. Register in comments👇
from prototype to production webinar bolt and chromatic
162
Chromatic @chromatic.com · 28/05/2026
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)
vitest-chromatic-integration-early-access-program
3538
Chromatic @chromatic.com · 20/05/2026
📱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)
react native early access program chromatic
151
Chromatic @chromatic.com · 06/05/2026
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 👇
how to use parallel agents to fix a11y issues
131
Chromatic @chromatic.com · 17/04/2026
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 👇
Chromatic changelog April 2026
110
Chromatic @chromatic.com · 24/03/2026
🎟️ 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...
storybook mcp ama webinar
000
Chromatic @chromatic.com · 24/03/2026
Announcing Storybook MCP for React + publishing on Chromatic 🎉  🧵 ⤵️
storybook mcp for react launch
152
Chromatic @chromatic.com · 27/01/2026
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 👇
how to implement generative ui without losing control webinar
121
Chromatic @chromatic.com · 22/01/2026
Generative UI isn’t AI writing code. It’s assembling your tested components based on intent, state & data. That only works if your component library is reliable. We’re digging into the React workflow live with @mrmagan.bsky.social (Tambo). Register to join live & get the recording 👇
how to implement generative ui without losing control webinar
112
Chromatic @chromatic.com · 21/01/2026
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
frontend-workflow-ai-guide
120
Chromatic @chromatic.com · 09/12/2025
🚀 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)
Changelog-December-2025
100
Chromatic @chromatic.com · 20/11/2025
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-...
how-to-automate-ui-testing-from-scratch
030
Chromatic @chromatic.com · 12/11/2025
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
How we fixed 15K accessibility issues in Chromatic using Chromatic
151
Chromatic @chromatic.com · 07/11/2025
We cut our a11y issues by 94% after we stopped treating them as tickets & started treating them as system flow. Then we blocked new regressions in CI, inflow dropped to zero & the backlog finally moved. Now we’re sharing how we did it in a live session. 🔗 Link in comments
How we fixed 15K accessibility issues in Chromatic using Chromatic
121
Chromatic @chromatic.com · 27/10/2025
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 👇
How we auto-heal flaky Snapshots with SteadySnap webinar invite
110
Chromatic @chromatic.com · 22/10/2025
Your test fails. You rerun it. It passes. Flake ≠ random. It’s render instability. Join Chromatic’s graphics specialist, Scott Johnson, to learn what causes flake & how SteadySnap cuts visual inconsistencies by 34%. 🗓️ Oct 30 · 12 PM EDT / 18 CET 👇 Registration in comments
How we auto-heal flaky Snapshots with SteadySnap webinar invite
100
Chromatic @chromatic.com · 04/08/2025
👀 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...
homer-gaines-webinar-manual-vs-automated-a11y-testing
011
Chromatic @chromatic.com · 01/08/2025
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...
automated vs manual a11y testing webinar
131
Chromatic @chromatic.com · 22/07/2025
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 👇
143
Chromatic @chromatic.com · 18/07/2025
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...
1267
Chromatic @chromatic.com · 09/07/2025
🚀 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...
001
Chromatic @chromatic.com · 08/07/2025
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
Accessibility dashboard showing a chart of violations over time and breakdown of violations per component.
130
Chromatic @chromatic.com · 08/07/2025
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.
100
Chromatic @chromatic.com · 08/07/2025
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.
Offending nodes are highlighted in red within the snapshot
100
Chromatic @chromatic.com · 08/07/2025
🚀 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.
2106
Chromatic @chromatic.com · 02/07/2025
🚀 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...
031
Chromatic @chromatic.com · 18/04/2025
Accessibility issues are easiest to fix before they ship. Join us live with @marcysutton.com on Tuesday to learn how to catch them early—with practical techniques for testing in dev, CI & beyond. It’s the workflow every frontend team should see. 🎟️ Register here: us02web.zoom.us/webinar/regi...
041
Chromatic @chromatic.com · 21/03/2025
Accessibility isn’t a one-time fix—it’s an ongoing process. 🔄 With the European Accessibility Act on the way, teams need to catch accessibility regressions early. The best way? Automated testing. Learn how Storybook, axe & Chromatic help keep your UI accessible—without extra effort. Link below👇
132
Chromatic @chromatic.com · 11/03/2025
You’ll get realtime reporting with impact analysis. Chromatic continuously tracks accessibility issues across components. A birds-eye view helps you identify areas that'll have the greatest impact. As your team resolves issues, you can track progress toward WCAG compliance.
accessibility testing real-time reporting
000
Chromatic @chromatic.com · 11/03/2025
Chromatic also makes it easy to drill down and debug these violations: 🔍 Problematic DOM nodes are highlighted in snapshot ⚙️ Launch the published Storybook to debug with browser devtools 🔗 Share links to specific violations with your team for faster collaboration
accessibility testing violations
000
Chromatic @chromatic.com · 11/03/2025
Regression detection is the secret sauce here. Instead of drowning in violation reports, Chromatic sets baselines and flags only the changes in each PR. This separates pre-existing issues from new ones, ensuring teams never backslide as the app evolves.
regression detection in accessibility testing
000
Chromatic @chromatic.com · 11/03/2025
Traditional accessibility testing tools navigate page-by-page and run scans to compile a report. You have to sort through thousands of noisy violations to figure out which component caused the violation. Component-first testing makes it easier to identify the root cause.
accessibility testing for components
000
Chromatic @chromatic.com · 11/03/2025
We’re excited to share a sneak peek of Accessibility Regression Testing which combines Storybook & axe with Chromatic's specialized regression workflow. 🧩 Component-level scans find the root cause 🚦 Regression checks stop repeat violations 📈 Real-time reports track progress over time
accessibility regression testing from chromatic
6187
Chromatic @chromatic.com · 30/01/2025
Going live in about an hour us02web.zoom.us/webinar/reg...
000