Storybook@storybookjs

Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom

 npx storybook@latest init
storybook.js.org/
Joined May 2017
1,553 Photos and videos
Load newest
Read the post for more details: storybook.js.org/blog/storyb… We need your feedback! Please give it a try and let us know how it goes.

Storybook 9 is now in beta

Try the future of UI testing today

storybook.js.org
1
1
17
3,128
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
1
1
12
2,491
React Native & React Native Web Official support for both! RNW Storybook includes Docs and Test features.
Marcelo Prado's React Native Flash Calendar running side-by-side in both RNW and RN. The RNW Storybook includes the Docs and Test addons. A test run shows that the calendar passes all WCAG accessibility checks!

ALT Marcelo Prado's React Native Flash Calendar running side-by-side in both RNW and RN. The RNW Storybook includes the Docs and Test addons. A test run shows that the calendar passes all WCAG accessibility checks!

1
2
30
2,576
Tags for organizing your stories Use built-in and custom tags to filter down to exactly what you need to get your work done.
Storybook's sidebar with the filter menu on the search bar open. There are two options, experimental and play-fn. The sidebar has been filtered to only show the Experimental Feature story under the Button component.

ALT Storybook's sidebar with the filter menu on the search bar open. There are two options, experimental and play-fn. The sidebar has been filtered to only show the Experimental Feature story under the Button component.

1
15
2,028
48% lighter weight Less than half the size of Storybook 8, with a much, much smaller and flatter dependency tree.
Dependency graph, Before, A full-height, very complex dependency graph. After, a much simpler graph approximately 10% the size of the other one.

ALT Dependency graph, Before, A full-height, very complex dependency graph. After, a much simpler graph approximately 10% the size of the other one.

3
1
61
2,388
Test coverage Calculate test coverage whenever you run your tests, and open an interactive report from Storybook.
Two browser windows. The foreground window shows an interactive coverage report. Many of the files have 100% coverage and are highlighted green, but card.tsx has 74% and is highlighted yellow. The background window shows Storybook's sidebar, where the coverage summary of 95% is visible.

ALT Two browser windows. The foreground window shows an interactive coverage report. Many of the files have 100% coverage and are highlighted green, but card.tsx has 74% and is highlighted yellow. The background window shows Storybook's sidebar, where the coverage summary of 95% is visible.

1
14
2,287
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.
Storybook with the Primary story of the Button component open. The Visual tests panel is open, showing a visual diff between the baseline and the latest snapshot.

ALT Storybook with the Primary story of the Button component open. The Visual tests panel is open, showing a visual diff between the baseline and the latest snapshot.

1
1
17
2,408
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, with the Empty Form story of the LoginForm component open. In the preview, a gray button is highlighted and a popover informs about a color contrast ratio violation. The Accessibility panel is open and more details about that violation are shown.

ALT Storybook, with the Empty Form story of the LoginForm component open. In the preview, a gray button is highlighted and a popover informs about a color contrast ratio violation. The Accessibility panel is open and more details about that violation are shown.

1
1
14
2,592
Interaction testing Simulate behavior and assert that your components function as they should. Debug test failures interactively.
Storybook with the Filled Form story for the LoginForm component open. The Interactions panel is open, showing a passing test with the interactive debugger and each step of the interaction, all of which are successful.

ALT Storybook with the Filled Form story for the LoginForm component open. The Interactions panel is open, showing a passing test with the interactive debugger and each step of the interaction, all of which are successful.

1
14
2,734
Storybook Test It’s a batteries-included combo of the best UI development and testing tools: Storybook, @vitest_dev's browser mode, and @playwrightweb. Run interaction, accessibility, and visual tests with a click and get real-time feedback inside your Storybook.
Storybook's test widget. It's titled "Run components tests". Under that is "Testing... 1/97" with an eye and stop icons beside them. Then three rows of checkboxes labeled, Interactions, Coverage, and Accessibility, each with a gray status dot. Under that is another section, titled "Run visual tests in cloud". The final section has a "Run tests" button.

ALT Storybook's test widget. It's titled "Run components tests". Under that is "Testing... 1/97" with an eye and stop icons beside them. Then three rows of checkboxes labeled, Interactions, Coverage, and Accessibility, each with a gray status dot. Under that is another section, titled "Run visual tests in cloud". The final section has a "Run tests" button.

2
3
44
4,705
Storybook 9 is now in beta! It’s ready for you to try today. Let’s see what’s inside…
Storybook 9 beta

ALT Storybook 9 beta

10
65
405
60,999
Here's a new addition to the WC Toolkit - the Changelog. It compares two versions of a Custom Elements Manifest to let you know what changes were introduced between versions of your #webcomponents library. #webdev #javascript #html #css wc-toolkit.com/adoption/chan…

Changelog

A tool to detect changes between two version of a web component package using the Custom Elements Manifest.

wc-toolkit.com
2
4
19
1,230
Thanks @dartrode @kettanaito We're going with the right one - it's limited edition for the svelte conf
3
621
which one should we make into custom stickers?
6
1
8
2,393
This is filling up fast, but there's still room for more. 2 hours away! us02web.zoom.us/webinar/regi…
Storybook@storybookjs
21 Apr 2025
Join us for a live session with @marcysutton from @khanacademy 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…
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.

ALT 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.
3
4
1,484
Join us for a live session with @marcysutton from @khanacademy 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…
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.

ALT 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.
1
4
2,374
Storybook retweeted
Chromatic@chromaticcom
18 Apr 2025
Accessibility issues are easiest to fix before they ship. Join us live with @marcysutton 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. Signup in the link in comments 👇
1
1
2
846
Made it to @chromaticcom @storybookjs meetup in NYC. Time to learn about UX 🙂
2
14
1,026
lu.ma/xfblie5e

UX Engineering Meetup: NYC (April) · Luma

Hello frontend developers, UX engineers, design system experts, and design engineers! Are you looking for a space to connect with fellow senior engineers and…

luma.com
721
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.
1
9
1,397
Load more