congrats Andrew and awesome to see you in SF!

hey I make a VRT tool

There are 2 types of VRT, the local loop (Storybook) and the CI loop (Chromatic)

In both cases, you need to express edge cases and solve the image/stabilization/diff algo challenges. *.stories are a JS standard way to test functional, a11y, VRT at once across both loops.

Storybook MCP for React is here 🎉

Storybook MCP gives AI agents structured context from your components and design system to build better UI the first time.

🧵 ⤵

Founder here, if this is interesting we should talk

how to ship ui with storybook mcp webinar

AI agents write better UI with the right context. Storybook MCP gives them access to your components, stories & tests so they can build, preview & validate UI from a single prompt.

Join us for a walkthrough of the workflow + a sneak peek of upcoming features. Link in comments 👇

We’re sharing details about a potential vulnerability that may affect a small subset of built and published Storybooks. 🧵 (1/4)

Storybook-MCP-early-access-program

🧵 (1/3) Most AI-generated code looks good until you try to merge it. Wrong props, odd states, subtle regressions.

Storybook MCP fixes that.

It turns your stories, docs & tests into machine-readable context so agents actually follow your patterns.

Storybook 10 ESM-only, 29% lighter, module automocking, and more

Storybook 10 is here!

✂️ ESM-only (the only breaking change!)
🧩 Module automocking for easier testing
🏭 Typesafe CSF factories Preview for React
💫 UI editing and sharing optimizations
🏷️ Tag filtering exclusion for sidebar management
🔀 Svelte async component support

Parsimony is going to matter for folks deploying AI in their orgs. Or you end up lighting your budget on fire. 🤷

Anyone done similar benchmarking, what did you find?

Token parsimony. 45% fewer tokens if you provide better context.

Better context > more context. Been running experiments on LLM cost:

- Vanilla prompt $0.71
- With Storybook MCP: $0.39

That’s 45% fewer tokens for the same job.

Anyone done DevRel or advocacy within a marketing team?

for sure Alex, happy to share the technical approach we used. I'll DM you.

It was only when we considered a11y a pipeline and not a checklist that things actually changed.

We were able to block merging regressions and finally had visibility into the scope of the issues.

Before +17,000 » after 6,579.

We cut @chromatic.com total accessibility violations by over 66% in the last 6 weeks. Here's how:

Over the years, we accrued a11y debt because it was everyone and no one's responsibility. Sure, we did VPATs but they were out of date the moment they were finished.

Storybook is going ESM-only Smaller, simpler, and modern

Storybook 10 (now in beta) is ESM-only.

🤏 Smaller package size (15%)
🫧 Cleaner, simpler codebase
⛓️‍💥 Reduced bugs from module duplication and aliasing
🧱 A more future-proof foundation for Storybook and its ecosystem

Read all about why we’ve made the transition and what it means for you:

Join me at squiggle conf sep 18-19 to talk about a11y pipelines

A11y lags behind because testing doesn’t match how we build software. Why?

- Audits live outside the dev workflow
- Page-level tests create noise
- CI/CD gets blocked by a ton of old issues

Join me at SquiggleConf to build an a11y pipeline using Storybook!

Poster for SquiggleConf 2025, September 18-19 Boston Catch Accessibility Issues at the Source with Storybook Dominic Nguyen, Chromatic Creator; Storybook maintainer

🌟 Speaker Spotlight: Dominic Nguyen

@domyen.bsky.social is a maintainer of Storybook, which does more than just visualize your components. Did you know it can help you catch accessibility issues early in your development flow?

Schedule, speakers, and more: squiggleconf.com

The file Dashboard.stories.ts containing the code: import { mocked } from 'storybook/test'; import { trackEvent } from '../lib/analytics.ts'; export const MyStory = { beforeEach: () => { /* * The `trackEvent` function is already a mock! * The `mocked` utility is just for proper mock function types */ mocked(trackEvent).mockResolvedValue({ status: 'ok' }); }, play: async () => { // ... interact with the component await expect(trackEvent).toHaveBeenCalledWith('dashboard-viewed'); }, };

Testing components that depend on things like localStorage or authentication can be tricky. Storybook makes it easy with our new module mocking API built on top of @vitest.dev's excellent mocking tools.

storybook.js.org/blog/next-ge...

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

Frontend test coverage with Storybook 9 Stories give you free test coverage

Our latest post walks through how to use the coverage reporting in Storybook 9 to be sure your components are well-tested.

Storybook 9 is here!

▶️ Interaction tests
♿ Accessibility tests
👁️ Visual tests
🛡️ Coverage reports
🚥 Test widget
🪶 48% Leaner
✍️ Story generation
🏷️ Tag-based organization
🌐 Story globals
🏗️ Major updates for Svelte, Next.js, React Native, and more!

Let’s dive in!

Storybook 9 is now in RC! That means everything shared in this post is now even more ready for you to use in your projects.

🆙 Upgrade - npx storybook@9 upgrade

🆕 Get started - npm create storybook@9

Live session: Frontend testing from dev to prod

Frontend tests don’t have to suck. We’re hosting a live session next week to prove it.

Demoing core workflows in the SB 9 release.

You'll learn how to build fast, reliable UI tests using Storybook & Chromatic!

Storybook 9 is now in beta Try the future of UI testing today

Storybook 9 is now in beta!

It’s ready for you to try today.

Let’s see what’s inside…

Live session. Pragmatic accessibility testing for developers. April 22, 2025, 10:00–11:00am PDT, 19:00–20:00 CET. Storybook, Khan Academy, Chromatic. Marcy Sutton Todd. Senior Engineer, Frontend Infrastructure, Khan Academy. Kyle Gach, DX Engineer, Storybook.

Join us for a live session with @marcysutton.com from @khanacademy.org to talk about accessibility testing! We'll share testing strategies, demo what's coming in Storybook 9 next month, and answer your accessibility questions.

Happening in 24 hrs. Register now!

us02web.zoom.us/webinar/regi...

Pragmatic accessibility testing for developers: live session from Storybook, Khan Academy, and Chromatic. Hosted by Marcy Sutton Todd and Kyle Gach on April 22, 2025 from 10:00 to 11:00 am PDT / 19:00 to 20:00 CET.

Next Tuesday, April 22nd at 10am Pacific I'm participating in a webinar on Accessibility Testing in @storybook.js.org with @kylegach.com from the Chromatic team. You can register here: us02web.zoom.us/webinar/regi...

UX Engineering Meetup: NYC, Thu, Apr 17, 2025, 6:00 PM | Meetup Hello frontend developers, UX engineers, design system experts, and design engineers! Are you looking for a space to connect with fellow senior engineers and talk shop? Jo

The speakers lineup for our inaugural UX Engineering meetup has dropped! 🎉

If you're into building better UIs, scaling design systems, or just love a good dev talk, this one’s for you.

RSVP, spread the word, and let’s make it a good one. 👇

www.meetup.com/nyc-frontend...

Congrats on shipping!

Love to see this addon getting some love

Screenshot of Storybook 9.0's interface showing the new Accessibility addon panel. The panel displays accessibility violations with their severity. The left sidebar shows component navigation, with indicators for stories that have accessibility violations.

We're revamping the Accessibility addon in Storybook 9.0

🔍 Rule-based layout for better readability
🎯 Highlight issues in the canvas
🔗 Permalinks for sharing
🧪 Integrates with Storybook Test
🚦 Integrates with Chromatic for regression checks

storybook.js.org/blog/previe...