storybook.js.org
Develop, test, and document UI in isolation
🔗 storybook.js.org
🛠️ Maintained by Chromatic
172 posts
3,135 followers
142 following
Regular Contributor
Active Commenter
comment in response to
post
In Storybook 8, we shipped a bunch of significant improvements that leverage the vue-components-meta tool:
storybook.js.org/docs/get-sta...
You should check it out!
comment in response to
post
The new coverage feature in SB 9 might help you stop Claude from writing too many stories that do the same thing
comment in response to
post
we (maintainers) are very interested in how to make SB better for this exact use case
llms generate code » automatically check code with SB component tests without human intervention » loop until correct » present to human for review
comment in response to
post
Whatever rulesets axe-core supports we support. Some teams have inserted different a11y checkers by forking the addon, so that's probably the path we'd recommend if you want full control
comment in response to
post
It's to render webpack/turbopack'ed components isolation with Vite. Makes the core storybook experience work better for Next users and unlocks all the vitest-powered functionality we've built into 9.
Not for RSCs which requires a more substantial change
comment in response to
post
We wrote this blog post a while ago:
storybook.js.org/blog/how-to-...
And here's the source of that screenshot:
github.com/yannbf/meald...
comment in response to
post
Thank you!
We couldn’t have produced Storybook 9 without contributions from our incredible community. Your bug reports, PRs, feedback on new features, and early access testing were invaluable.
comment in response to
post
Learn more about Storybook 9:
storybook.js.org/blog/storybo...
Including a sneak peek at what we’ll be doing next.
comment in response to
post
Try it in a new project:
`npm create storybook@latest`
If you have an existing Storybook project, use our automated migration wizard to help you along the way:
`npx storybook@latest upgrade`
comment in response to
post
React Native everywhere
@reactnative.dev and React Native Web can now run side-by-side in your project, so you can use the best tool for the job, whether that’s a mobile device, a simulator, or the full Storybook experience in a browser.
comment in response to
post
Svelte 5 support
You can now write your @svelte.dev stories using Svelte CSF, including support for runes and snippets.
comment in response to
post
Vite-powered Next.js
We recreated the Storybook framework for @nextjs.org in Vite, bringing an instant-on experience and support for everything in Storybook Test.
comment in response to
post
🌐 Story globals
Your components render in a context, like the color scheme, viewport size, locale, or background color. Story globals let you control that context, so you can develop, test, and document them reliably.
comment in response to
post
🏷️ Tag-based organization
Use built-in and custom tags to filter down the sidebar to exactly what you need to get your work done.
Amp it up even more with github.com/Sidnioulz/st...
comment in response to
post
✍️ Story generation
Generate additional stories or even a whole new stories file for a component in your project, without leaving Storybook.
Do the same for interaction tests with github.com/igrlk/storyb...!
comment in response to
post
🪶 48% Leaner
Less than half the size of Storybook 8, with a much, much smaller and flatter dependency tree. That means less conflicts in your node_modules and a faster install.
Thanks to our friends at @e18e.dev for their guidance!
comment in response to
post
🚥 Test widget
This all happens through the test widget in the sidebar. Toggle test types on and off and run tests for your whole project or a subset of stories with a click. Watch mode, too!
Results stream in to the sidebar, so you always know where you stand.
comment in response to
post
🛡️ Coverage reports
Calculate test coverage whenever you run your component tests, and open an interactive report from Storybook.
comment in response to
post
👁️ Visual tests
Of course, visual testing is built-in too. With a click, run visual tests with @chromatic.com on all of your stories and see the diffs in Storybook.
comment in response to
post
♿ Accessibility tests
The super-popular a11y addon has been completely redesigned to be even more helpful when surfacing violations found by axe-core. Click on a highlighted violation to see details right on top of your components.
And run a11y tests for your whole project with a click.
comment in response to
post
▶️ Interaction tests
We’ve partnered with @vitest.dev to test your components with simulated behavior in a real browser (shoutout to @playwright.dev), during local development and in CI. And you can debug those tests with a dedicated panel in Storybook.
comment in response to
post
Seems like windsurf has a browser panel that's intended to show your app so you can verify generated code gen.
comment in response to
post
You could do a minimal install of Storybook without testing and docs and then run it in a vscode/cursor browser panel?
You'd still have to run the SB server though
comment in response to
post
We're not an llm startup, but perhaps we could improve SB for your use case...
Can you tell us about what workflow you're looking for?
comment in response to
post
haha, we typically soft release it and take the next few days ensure stability before the official announcement (under promise over deliver and all that)
comment in response to
post
🔗 Save your spot: us02web.zoom.us/webinar/regi...
comment in response to
post
🔗 us02web.zoom.us/webinar/regi...
comment in response to
post
🔗 us02web.zoom.us/webinar/regi...
comment in response to
post
🔗 us02web.zoom.us/webinar/regi...