Today, we’re proud to launch Storybook 8 in beta! This latest iteration of Storybook continues our march towards an instant-on, seamless environment for all frontend developers. Check out the release highlights and try it out by upgrading today!
🚀 Major performance improvements
📱 New mobile UI
📸 Automated visual tests
🔬 Improved test utilities
⚛️ Storybook for React Server Components
👋 Adios, React dependency
🧩 Ecosystem updates
💯 Hundreds of fixes
Major performance improvements
Storybook 8’s priority is improving Storybook’s compatibility and performance.
First, we switched the default compiler for new projects from Babel to SWC (Speedy Web Compiler). SWC is dramatically faster than Babel and requires zero configuration. We’ll continue to support Babel in any project currently using it.
For React projects, we now auto-generate controls using react-docgen. This reduces startup time by up to 20%, even for small projects!
We also added a new --test flag for faster test builds, so that you can bypass processes that are unnecessary for testing (like docs compilation). This triples the speed of static builds. Learn more.
Improved mobile support
Storybook 8 revamps Storybook’s mobile UI.
On mobile devices, Storybook’s sidebar and addon panel now appear at the bottom of the screen. This prevents the canvas from shrinking and makes it easier to navigate with your thumb.
We also fixed a long-standing, super-annoying responsiveness bug, where UI state was lost when transitioning between desktop and mobile view.
Lastly, we just released a new version of React Native Storybook: RN Storybook 7. It brings major performance and compatibility improvements, including automatic story loading, improved error handling, stronger types, and much more.
Automatic visual tests
Storybook gives you the superpower of using stories as test cases. You can compare stories before and after code changes and flag differences for review without needing to push a commit.
To improve that process, we launched Chromatic in 2017, a cloud service that lets you automate visual tests by comparing snapshots of your stories before and after every change.
Storybook 8 closes the gap between Chromatic and Storybook with an official visual testing addon for Storybook (@chromatic-com/storybook). This enables you to run visual tests of your stories on the fly without needing to commit your changes. Then, you can inspect the results in Storybook, inside your dev environment.
As part of today’s launch, @chromatic-com/storybook is now available in public beta. Try it today by heading to Chromatic’s docs.
Improved test utilities
Storybook 8 streamlines two existing test packages (@storybook/jest and @storybook/testing-library) into a single, more powerful testing library: @storybook/test. It’s based on Vitest spies and expect, which have a much smaller installation footprint in your project. Learn more.
React Server Components
Many devs have asked us, ‘When will Storybook support RSCs?’ Storybook 8 provides the answers. Our latest iteration officially introduces experimental RSC support, initially limited to Next.js projects.
Why experimental? We’re still figuring out the best practices for building RSC components and pages. We also need to prove that our approach works well with other RSC frameworks like Waku.
Learn more about RSC support in Storybook 8 and how to use Storybook 8 to build an RSC app in isolation.
Adios, React dependency!
In Storybook 7, we added a React peer dependency to make Storybook work with modern package managers like pnpm and Yarn PnP. We prioritized package manager compatibility, but frankly, this sucked for Vue, Angular, Web-components, and Svelte users. It clashed with one of our primary goals of making users of all frameworks feel at home in Storybook.
Storybook 8 removes the React dependency through smarter bundling. It provides the basis for a series of quality of life improvements for non-React users, which you can look forward to in Storybook 8 and beyond.
Hello, ecosystem!
Every major release is an opportunity for Storybook to keep up with the ecosystem.
Storybook 8 includes the following dependency changes:
- Bumps Node requirement to 18+
- Adds Vite 5 and Lit 3 support
- Upgrades MDX, prettier, eslint, and remark
- Drops support for Vue 2, Svelte 3, Angular 14, and Next <13.5
- Drops official Yarn 1 support (it still works, just unsupported)
In addition, we dropped support for Storyshots and provided an upgrade guide to transition to other options. We also dropped support for the legacy storiesOf story API.
Try Storybook 8 today
Upgrade to Storybook 8 beta today with the following command:
npx storybook@next upgrade
We’re still working on automating certain aspects of the upgrade. But in the meantime, we’ve provided a migration guide to help fill in the gaps.
Get involved
Ahead of the full launch, we’d love your help with battle-testing and QAing Storybook 8, to help us ship the best release possible.
If you’re interested in taking part in our open source project, we’d love your help with tackling some of the following issues on GitHub.
We’ll also be sharing more about how you can take part in community QA in the weeks ahead, so please keep an eye on our social media feeds on Twitter and LinkedIn.
Top comments (0)