We’re sharing details about a potential vulnerability that may affect a small subset of built and published Storybooks. 🧵 (1/4)
17.12.2025 16:47
👍 15
🔁 8
💬 1
📌 1
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 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 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.
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!
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...
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...
😍 Preview of the revamped a11y addon coming soon to SB 9.
Now includes deeplinking which simplifies repros with stakeholders.
It's official! I'm speaking at Svelte Summit, come see me in Barcelona in May! Can't wait to meet you all in person!
I'll be diving into @svelte.dev with @storybook.js.org, and how you can use it to write delicious Component Tests! 🚀
Might also include a surprise collab... 🙊
2017-2020 was @storybook.js.org's honeymoon period. We were first time OSS maintainers, but a UI component workshop was the right tool at the right time. We could do no wrong! Then things started to unravel. 🧵
Most companies weren’t built with AI in mind, yet now they’re navigating this transformation. These are some of the notes I’ve picked up along the way.
In our case the generation is the most straightforward part of the toolchain.
The community put that together a year ago (h/t Kaelig at Netlify). To make a solution that's fit for purpose, we'd need to build the guardrails and fit it into customer's workflows.
