Storybook
Develop, test, and document UI in isolation
🔗 storybook.js.org
🛠️ Maintained by Chromatic
- Storybook 9 is now in beta! It’s ready for you to try today. Let’s see what’s inside…
-
View full threadRead the post for more details: storybook.js.org/blog/storybo... We need your feedback! Please give it a try and let us know how it goes.
- We're hosting a live session on SB9 with demos bsky.app/profile/stor...
- 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!
- Join us here us02web.zoom.us/webinar/regi...
- Want Storybook Test support for @angular.dev? Coming 🔜!!!
- [Not loaded yet]
- yup Chromatic is embedded because it's the only tool that meets the speed + reliability threshold. however the testing widget is fully extensible and the underlying addons are open source so you can build your own integration with a visual testing provider if you want!
- Interesting take. And yes, if this is just by pre-bundling, I agree that this is indeed worse than before. But if everything was pre-bundled should the dependencies not be zero? Would it make sense to make it only mostly pre-bundled?
- React Native & React Native Web Official support for both! RNW Storybook includes Docs and Test features.
- Upgrade with a single command We built in a *lot* of automatic migration helpers to automate as much as we can. npx storybook@next upgrade
- 48% lighter weight Less than half the size of Storybook 8, with a much, much smaller and flatter dependency tree.
- Tags for organizing your stories Use built-in and custom tags to filter down to exactly what you need to get your work done.
- Visual testing We’ve integrated visual testing into Storybook Test as well. Make a change and quickly check all of your stories for any visual differences.
- Test coverage Calculate test coverage whenever you run your tests, and open an interactive report from Storybook.
- Interaction testing Simulate behavior and assert that your components function as they should. Debug test failures interactively.
- Accessibility testing We overhauled Storybook’s most popular addon to be even more helpful. Inspect violations in the story preview, and easily run accessibility tests for all of your stories.
- Storybook Test It’s a batteries-included combo of the best UI development and testing tools: Storybook, @vitest.dev's browser mode, and @playwright.dev. Run interaction, accessibility, and visual tests with a click and get real-time feedback inside your Storybook.
- This is filling up fast, but there's still room for more. 2 hours away! us02web.zoom.us/webinar/regi...
- 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...
- 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...
- Join us for our live event in NYC tomorrow (free) - meet other UX engineers, frontend folks, and design system pros. With folks from JP Morgan Chase, Peacock, SAP, Yahoo, Google, and Amazon. lu.ma/xfblie5e
- WIP new Highlight API for addons. Allows you to draw boxes and popovers directly on Storybook's canvas.
- 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.
- Don't miss Storybook maintainer @yannbf.bsky.social on JSWorld's livestream in a few mins, starting at 10:24 CET. It's free! He's talking about Next-level Component Testing, and his talk is going to be ... Next-level!!! 🚀 www.youtube.com/watch?v=5mn3...
- Catch our own @yannbf.bsky.social speak on JSWorld's livestream tomorrow at 10:24 CET. It's free! He'll help you test your UI components, using Storybook. www.youtube.com/watch?v=5mn3...
- Tomorrow! Join @kettanaito.com (creator of mswjs.io) and @kylegach.com (DX eng at Storybook) for a live discussion around mocking and UI testing. We'll walk through techniques and leave lots of time to answer your questions. Register here: us02web.zoom.us/webinar/regi...
- Did you know we have a Storybook Test Bootcamp, where we're teaching the what, why, and how of testing UIs in Storybook? This week, we published a video overview of component tests: what they are, why they're useful, and how to write and debug them. youtu.be/n3LJP9S7xxs
- Interested in more? You can join the bootcamp and receive weekly updates and exclusive Discord access with this form: storybook.js.org/sb-test-eap
- [Not loaded yet]
- Awesome! Wondering if you have a screenshot of what this looks like in the addon panel?
- AI + Storybook has arrived. Build a whole frontend in one prompt. Incredible to how well SB plays with Cursor and OpenAI. www.youtube.com/watch?v=gXma...
- [Not loaded yet]
- We reverted this change in 8.5.6
- [Not loaded yet]
- [Not loaded yet]
- Yeah probably better to start with a Storybook issue and we can escalate to Vitest if we think that’s what’s causing the problem!
- Storybook 8.5 is out! ♿️ Realtime a11y tests to help build UIs for everybody 🛡️ Project code coverage reporting 🎯 Focused tests for fast feedback ⚛️ React Native Web Vite framework for testing mobile UI 🎁 Storybook Test Bootcamp to level up your testing game storybook.js.org/blog/storybo...
- [Not loaded yet]
- Sorry about that. It shouldn't have. If you have a reproduction, please submit an issue. The test addon is experimental while we hammer out the best API with the help of our community, but it is quite functional and many teams (including us) are using it daily. Give it a try!
- Storybook 8.5 includes many other improvements too: ✅ React 19 support ✅ Vite 6 support ✅ Angular 19 support ✅ Code addon panel ✅ Experimental Bun support ✅ Svelte Storybook Test support ✅ Experimental Nuxt support
- Check out the post for all the details! Thanks, as always, to our wonderful community and everyone who contributed to this release! storybook.js.org/blog/storybo...
- If you don’t need to test every story, click the menu in the sidebar and test just the component or individual story. This can save time for Storybooks with hundreds or thousands of stories.
- To go along with the just-released React Native Storybook 8, we’ve published a React Native Web (RNW) Vite Storybook framework. It uses RNW to render your RN stories in the browser.
- The official Accessibility (A11y) addon has been expanded to run accessibility checks on all of your stories as you develop your components.
- Project code coverage is also newly available in Storybook Test. Quickly calculate coverage for all of your tested stories and view the generated report for insights on areas you could improve.
- Prefer a video overview? Watch @shilman.net demo Storybook Test’s watch mode, focused tests, a11y tests, and code coverage in 4 min. youtu.be/nK2K2MGph2I
- Neat addon to record interactions and generate test code automatically 🤩 www.npmjs.com/package/stor... by Igor Luchenkov
- Is your Storybook getting unwieldy with component playgrounds, tests, and documentation examples? Use tags to organize and filter the components and stories in your sidebar. 🏷️ Easy authoring 🔍 Interactive sidebar filter 🙈 Static tag-based filtering 🟢 Updated badges addon
- [Not loaded yet]
- One our esteemed community members, @sidnioulz.bsky.social, created storybook-addon-tag-badges, which will use your tags to render informative badges in the sidebar and toolbar.
- That’s tags. They’re simple, but quite useful. Read the post for all the details, then go forth and tidy!
- Then, you can filter the sidebar to only view stories that have the chosen tags.
- You can also use tags to opt in or out of features. Here, we remove the test tag from this story to exclude it from being tested:
- Applying a tag couldn’t be easier:
- Run every test for a component in 1-click. Also works with groups and individual stories.
