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

npx storybook@latest init
Rolldown might be the most important web project of the next 5-10 years. I thought it might be helpful to explain why: The landscape: Rollup is the best and most comprehensive bundler to date. It was ahead of its time, pioneering key concepts like tree shaking (🙏 @Rich_Harris & @lukastaegert) and still hasn’t been matched in this regard. When @evanyou introduced @vite_js — Rollup was a cornerstone of the build process. Vite plugins are (for the most part) Rollup plugins. It didn’t take long for Vite to become the standard development and build environment for nearly every major meta framework: @nuxt_js, @solid_js start, @sveltejs kit, @remix_run, @angular cli, etc. (basically everything except Next). Rollup is still the underpinning of all of these. It has gone from being a way to bundle your library before publishing on npm to the backbone of how the modern web is being written. The problem: We find ourselves in a world where Rollup has been pressed into service building nearly every byte on the web — something it wasn’t originally intended to do — and its performance (really JavaScript’s performance) could be improved. esbuild (🙏 @evanwallace), a bundler written in Go, showed the world just how much faster a "native" bundler can be, but esbuild was not Rollup compatible and had its fair share of shortcomings as well (no TypeScript, limited tree shaking, etc.). @vite_js uses esbuild and Rollup to get the best of both worlds, but here lies another problem: parsing. Different build tools use different AST trees, and each of these must parse the code to derive the AST. Also, many plugins for Rollup/Vite perform their own parsing. Wouldn’t it be incredible if the parsing was done a single time and a single AST tree could be used by all layers of the build stack? @evanyou said recently that @vite_js often has to parse the same TS file at least 5 times at various levels in the stack. Clearly this could be better. The solution: The @rolldown_rs project is attempting to (eventually) solve all of these problems. First, it is written in Rust, one of the fastest languages out there — generally even faster than Go (i.e., esbuild) due to Rust not using garbage collection. In some applications, this doesn’t matter much, but in the context of parsing and compiling, this is a massive benefit (oh the irony that Rust itself is the world’s slowest compiler 😂). Rolldown isn’t just attempting to be fast though, it is also attempting to be API compatible with Rollup. This would be a monumental accomplishment (the Rollup API is not for the faint of heart). If successful, the @vite_js team could swap out the engine inside Vite while the plane is flying and we wouldn’t notice anything except we arrived at our destination much earlier. Finally — and perhaps most ambitiously — a standard singular parse. Perhaps this is a bit further down the road, but because Vite is so prevalent and because Rolldown uses OXC (🙏 @boshen_c) for parsing, we could end up in a world that standardizes around a single parse and AST tree. The performance improvements we could see in our development environment and build times would be tremendous. If successful, Rolldown will be responsible for transforming nearly every byte of web code — no matter what framework you use (happy to share my thoughts on what it means for Next some other time). Thanks: Finally, thanks to the @vite_js team, and everyone working on @rolldown (@_hyf0, @_h_ana___, @evanyou)! I am in no way affiliated with these fine engineers, just a mere plebe building on the backs of these giants.
Hello world! Rolldown is now open source on GitHub: github.com/rolldown-rs/rolld…
11
78
333
35,741
it’s a beautiful day! congratulations, @rolldown_rs!
Hello world! Rolldown is now open source on GitHub: github.com/rolldown-rs/rolld…
16
2,006
A self-service design system 🤯 Another amazing reveal by the @hermaeai team!
Alright, this is crazy! 🤩 Just type what you want, and @HermaeAI will code it using your team's frontend components or design system. And then it renders right there, with editable code. Best part: we only need your Storybook to make this work 🤯
1
3
11
2,645
Storybook retweeted
Replying to @ChakirQatab
@ChakirQatab has worked very hard for this, thank you!! Maybe Astro/MDX support next? Let's go. 🚀
Storybook 8 strengthens our @vuejs support by integrating Vue’s official language tools (built on Volar)! ⚡️ Learn how this improves your Storybook’s controls and component documentation in our new Storybook 8 sneak peek: storybook.js.org/blog/first-…
2
2
13
2,457
Storybook 8 strengthens our @vuejs support by integrating Vue’s official language tools (built on Volar)! ⚡️ Learn how this improves your Storybook’s controls and component documentation in our new Storybook 8 sneak peek: storybook.js.org/blog/first-…
3
27
165
23,928
Our next major release is approaching 💨fast💨 Catch up on many of the release highlights in our beta announcement, and keep an eye out for more news very soon! storybook.js.org/blog/storyb…
1
1
3
1,014
Please note: this is only compatible in @vuejs @vite_js projects! Learn more about getting started in our docs ⬇️ storybook.js.org/docs/8.0/ge…
3
747
Storybook retweeted
Interested in improving your design system’s performance? 🎨 On March 14, join us and the team at @omlet_dev for a webinar on measuring and improving your design system’s adoption! RSVP ⬇️ omlet.dev/events/tools-and-a…
3
3
12
1,360
Storybook retweeted
Replying to @storybookjs
Using a virtual screen reader isn’t everyone’s cup of tea (appreciate it’s not a “real” screen reader so it comes with caveats)… Luckily you can also automate VoiceOver and NVDA using Guidepup for e2e testing of your @storybookjs stories ☺️ github.com/guidepup/guidepup
1
5
11
1,275
If you’re using Storybook for a11y testing, this one’s for you! Learn how you can configure Storybook with Virtual Screen Reader, to test your UI against the screen reader’s dictation. Kudos to @scottnath for the great post! dev.to/scottnath/simple-setu…
4
12
60
7,790
And if you’d like to learn more about a11y tests and Storybook, check out our a11y addon! storybook.js.org/addons/@sto…
2
566
Shoutout to our friends at @uxpin, who launched today on @ProductHunt! 🥳 UXPin’s Storybook integration is simply stunning: it lets designers take stories and automatically turn them into designs. Here’s a great @uxpin explainer of how it works: uxpin.com/merge/storybook-in…
1
2
6
1,122
Give their new launch some love on Product Hunt! producthunt.com/posts/uxpin-…
3
515
fixed #agile
The only thing I didn't like about the new release of @storybookjs 8 is that they didn’t put the accent on “Adiós” 🤭😒
2
9
2,038
This is a perfect time to remind you that : 1. Storybook 8 removes the React dependency requirement for non-React frameworks 2. We’re now in RC – full release coming very soon 👀 3. If adiós makes it into the full release post, we will be sure to accent it correctly
1
3
586
This is such a cool Storybook integration: generate stories for your components automatically via CLI! ⏩
Now that #instagram and #facebook are down I think it's the perfect time to meet the @storybookjs Genie✨ Now you can use a custom story template file to generate consistent stories. npmjs.com/package/storybook-… #reactjs #webdev #GenAI
10
2,331
On March 28, we’re not just in New York: we’ll also be in Paris! 🥳 🇫🇷 Join Storybook, @figma’s Paris team, and the Paris frontend community for discussion, pizza, and beer! If that sounds as great to you as it does to us, book here: figma-storybook-frog.splasht…
2
3
11
2,140
And here’s New York!
On March 28, we’re heading to New York 🥳 Join our core team for a Storybook meetup, celebrating and sharing all the highlights of Storybook 8 (coming soon)! RSVP 👉 storybook-new-york-march-202…
1
4
904
New York 🤝 Paris 🤝 Storybook 🤝 Figma 🤝 pizza 🤝 you?
1
493