Storybook 8.1
A more productive, organized, and predictable Storybook
Storybook is the industry standard workshop for building, testing, and documenting UI components. Thousands of developers use it every day, including teams at BBC, Etsy, and Dropbox.
Over the past year we’ve focused on quality of life maintenance work. This culminated in the March launch of Storybook 8.0, our most performant and stable release yet.
Now in 8.x, we’re back on the hunt to improve your UI development experience. To kick that off, I’m excited to announce a more productive, organized, and predictable Storybook 8.1:
- 🤖 Story auto-generation and save from controls
- 🥸 Type-safe, standards-based module mocking
- ⚛️ Unit testing React Server Components
- 🧳 Portable stories for Playwright Component Tests
- 💯 Hundreds more improvements
New UI for creating and editing stories
Storybook’s atomic unit is the story, a small snippet of JavaScript that captures a component example. We’ve worked hard to make stories easy to read & write, but in 8.1 we’ve gone even further: you can now create and edit stories from Storybook’s UI and React projects can add stories for new components. To learn more, read the full announcement or check out the official documentation.
Creating a new generated stories file for an Avatar component
Type-safe module mocking
Components can depend on a variety of inputs and contexts, like needing to be rendered inside a context or receiving data from network requests. When developing and testing, you will often need to mock these dependencies.
Storybook supports a variety of mocks: from passing props to your components, to wrapping them with decorators that control styling or context, to mocking out network requests with Mock Service Worker (MSW).
In 8.1, we’ve added module mocking to Storybook. This allows you to flexibly swap JS modules with controlled replacements. You can use this to mock component inputs from browser cookies, local storage, or meta-framework features like your application router.
Our module mocking is completely typesafe, and best of all, it is completely standards-based. To learn more, read our detailed post or see the official documentation.
![A screenshot of a portion of a `package.json` file containing the code: { "type": "module", "imports": { "#lib/db": { "storybook": "./lib/db.mock.ts", "default": "./lib/db.ts" }, "#*": [ "./*", "./*.ts", "./*.tsx" ] } }](https://storybookblog.ghost.io/content/images/2024/05/SubpathImports.png)
lib/db module and automatically import the mock file when inside Storybook.Unit testing React Server Components
Unlike end-to-end tests (E2E), unit tests are faster, less flaky, and allow you to break down your UI and its tests to more easily verify key states. Storybook’s new module mocking gives us the capability to unit test React Server Components (RSCs), by mocking the server modules they depend on. This is a major advancement for React, which until now has lacked a unit testing strategy for RSCs.
Because RSCs are primarily used in Next.js projects right now, the bulk of this work involved creating mocked versions of many Next.js modules. Those mocks are automatically spied and add key abilities—like being able to set cookie values—which you can use directly within your stories. To learn more, check out our example repo and look forward to the full announcement.
![A screenshot of the `noteDetail.stories.ts` file, containing the code: import { cookies } from '@storybook/nextjs/headers.mock'; import { createUserCookie, userCookieKey } from '#lib/cookie'; import Page from './noteDetail'; const meta = { component: Page, // Use an RSC component in Storybook! async beforeEach() { // Set a Next.js cookie before each story is rendered cookies().set(userCookieKey, await createUserCookie('alice')) }, parameters: { nextjs: { navigation: { pathname: '/note/[id]', query: { id: '1' } }, }, }, } satisfies Meta<typeof Page>](https://storybookblog.ghost.io/content/images/2024/05/RSC.png)
Portable stories for Playwright Component Tests
One of the biggest benefits of developing in Storybook is that you get tests for free. Each isolated component example—or “story”—is a UI test. And if you want to test data fetching and user interactions, Storybook has tools for that too.
Now, for the first time, it is possible to easily reuse those stories in Playwright’s experimental component testing. This workflow combines Storybook’s component development and documentation with Playwright’s powerful test features. To learn more, read the full announcement or see the official documentation.
Using Playwright's VS Code extension to record a test based on a story
Hundreds more improvements
In addition to the features above, every Storybook release contains hundreds of improvements and bug fixes at every level. Here are some highlights:
- ✅ Experimental React 19 support #26960 #26898
- ✅ Angular 18 support #27237
- ✅ Support for Angular 17+ input and output signals #26413 #26546
- ✅ Tags to exclude stories from sidebar, autodocs, or test runs #26634 (official docs)
- ✅ Read-only controls #26577
- ✅ Support Next.js 14.2
useParams#26874
Try it today
Storybook 8.1 is available today. Try it in a new project:
npx storybook@latest init
Or upgrade an existing project:
npx storybook@latest upgrade
If you’re upgrading from 7.x, we have a guide to help you. We also have a guide for migrating from older versions.
What’s next
We are focused on two main projects for 8.2:
- Reducing Storybook install footprint and version conflicts
- Adding story lifecycle hooks for parity with other testing tools
For an up-to-date view on what we’re working on and considering, please check out Storybook’s new roadmap.
Credits
Huge shoutout to the 58 contributors whose PRs feature in Storybook 8.1!
@43081j @abiriadev @ariperkkio @arnabsen @balazsorban44 @bashmish @benmccann @cdedreuille @chakas3 @cherry @deining @drik98 @eric-blue @ethriel3695 @fatcat560 @fyodorovandrei @ghengeveld @glenjamin @goodactive @hakshu25 @imgbotapp @inokawa @johnendson @jonniebigodes @jorge-ji @joshwooding @jpzwarte @jreinhold @justingish @jwilliams-met @kasperpeulen @kylegach @larsdouweschuitema @larsrickert @laurens94 @leeovictor @lifeiscontent @ndelangen @nkabrown @noranda @r4ai @rui-silva-beqom @scottdotjs @seanparmelee @shilman @shuta13 @simenb @sni-j @spanishpear @takurinton @tmeasday @tobbe @valentinpalkovic @vanessayuenn @xyy94813 @yannbf @yuemori @yukikitagata