Chromatic

Chromatic

@chromatic.com

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

257 followers6 following107 posts

Pinned

🚀 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.

In two days, your React Native stories become visual tests with Chromatic. 📱 No test scripts, devices to maintain, or test flake. Every story is snapshotted on iOS and Android, and shows reviewers exactly hat changed. Join for a live demo from local build to review and Q&A 👇

Chromatic reposted

How are agents really doing on your frontend? 🤖 Are they saving you work or shipping a button that’s 2px off? Tell us in the State of AI in Frontend Delivery 2026 survey. It takes 5 minutes and 5 people get a $75 Amazon gift card as a thank you. 🙏 Survey in comments👇

📣 New in Chromatic: Quarantine for flaky tests You can now quarantine the flaky diffs that slip past Chromatic’s automatic filter. Quarantine the test from its build or test page to get your PR moving. 🧵⤵️ (1/5)

View full thread

In Library > Quarantined, you can see each test’s issue rate. Fix the flake, remove quarantine, and put the test back to work. While quarantined, it won’t catch regressions. (4/5)

📣 New in Chromatic: Quarantine for flaky tests You can now quarantine the flaky diffs that slip past Chromatic’s automatic filter. Quarantine the test from its build or test page to get your PR moving. 🧵⤵️ (1/5)

Chromatic keeps capturing snapshots for quarantined tests, but ignores their diffs across builds, branches, and users. So the same flaky diff won’t keep showing up for review. (2/5)

The test doesn’t disappear. Quarantined diffs show up in the build’s Unstable group, alongside tests caught by the automatic flake filter. Expand the group to inspect them. (3/5)

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)

View full thread

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)

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 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)

This month we’re rolling out two changes to help you test more with fewer snapshots. 🔀 Builds that don’t touch UI are free 📊 New Trends dashboard to help you investigate usage spikes 👇

View full thread

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.

This month we’re rolling out two changes to help you test more with fewer snapshots. 🔀 Builds that don’t touch UI are free 📊 New Trends dashboard to help you investigate usage spikes 👇

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.

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 👇

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. 🧵

View full thread

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.

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. 🧵

View full thread

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.

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. 🧵

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 reposted

The frontend bottleneck is no longer code generation. It's now reviewing the output of an agent. Storybook is working on two things to fix that: ✅ Claude Code + Codex plugins ✅ Agentic review to surface key changes Join Storybook team for a live walkthrough + Q&A. Register in comments 👇

Chromatic reposted

Visual bugs don't always show up in your test suite. Kyle Gach from Chromatic shares how visual testing complements Vitest Browser Mode, helping catch the layout, styling, and responsive regressions that traditional component tests can miss. Early access is now open: tympanus.net/codrops/?p=1...

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 🧵

View full thread

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

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 🧵

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.

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👇

View full thread

Chromatic captures the states your tests create so you get: 📸 Snapshot real interaction states 🧪 Run tests in a stable cloud environment 🛠️ Debug rendered UI, not flat screenshots 🔎 Review visual changes before merge (3/4)

Your assertions can pass while the UI is still broken. → broken layouts → missing styles → bad interaction states → visual regressions after user flows (2/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)

- 📱 Native: Devices run on native macOS & Linux simulators - 🏎️ Fast: Parallel tests by default - 📷 No flake: Battle-tested stabilization algorithm - 📙 Unified testing: Powered by React Native for Storybook - 🔍 Full review: diff checker, baseline tracking & PR checks (2/3)

Chromatic reposted

Is your component library lighting up in errors and not sure how to tackle it? 👀 On Thursday, we’re showing how teams use parallel AI agents with Storybook + Chromatic to triage, fix, validate, and retest accessibility issues simultaneously. Register in comments 👇

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 👇