Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at Monday.com, The Guardian, Intuit, and many more for developing, documenting, and testing UIs.
Today, we're thrilled to introduce Storybook's latest version: Storybook 7.5! It brings a range of new features that enhance the Storybook experience.
Let's dive in!
- ⚡️ Vite 5 and Lit 3.0 support
- 💨 2.2x faster start times for React TypeScript projects
- 👻 storiesOf and storyStoreV6 officially deprecated
- ✨ Many Angular improvements: argsToTemplate, new CLI debugging options, support for standalone directives, etc.
- 🀄 Support rename font import for Next.js
- 🔨 Fix Webpack5 build errors not being propagated
Vite 5 support
One of the major highlights of Storybook 7.0 was the official introduction of zero-config support for Vite. Vite has quickly grown into one of the ecosystem's favorite builders due to its highly competitive speeds.
In Storybook 7.5, we're laying the groundwork for integration with Vite's next version: Vite 5.0! Storybook 7.5 includes Vite 5 as a peer dependency and dynamically imports all Vite functions to force the use of ES modules (as Vite 5 deprecates CJS methods).
2.2x faster startup times for React TypeScript projects
Storybook 7.5 upgrades react-docgen to version 6. This change is a precursor to making react-docgen the default for auto-generating controls in Storybook 8.
The upgrade dramatically improves Storybook's handling of TypeScript types and heavily decreases startup times for larger React Storybooks. For example: react-docgen 6 reduced startup times for the Mealdrop project (which we use for many of our tests) from 8.9s to 4.0s!
storiesOf and storyStoreV6 officially deprecated
storiesOf was our original API for creating Storybook stories. In 2019 (Storybook 5.2), it was replaced by Component Story Format (CSF) – a simpler, portable, and more performant successor.
Since introducing CSF, new versions of Storybook have continued supporting storiesOf . This gave CSF time to mature and provided Storybook users with time to make the migration.
It’s now four years later. CSF is on its third iteration and it’s used by virtually all Storybook projects. So, we’re taking this as a moment to officially deprecate our support for storiesOf and storyStoreV6.
If you're still using storiesOf, you can get started with the migration by using these two scripts:
# 1. Convert storiesOf to CSF npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx # 2. Convert CSF 2 to CSF 3 npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx Learn more about the deprecation and how to continue dynamically generating stories in CSF.
Improved Next.js support
We've made several improvements to how Storybook works with Next.js.
Firstly, Next.js users are are now able to alias import statements from next/font/ into Storybook.
// Place this import in any relevant file – even in your stories import { Inter as FontSans } from 'next/font/google' export const fontSans = FontSans({ subsets: ['latin'], variable: '--font-sans' }) We've also fixed an issue where next/font wasn't working properly on Windows machines.
Finally, we've set up monitoring for Next.js canary releases. This automatically checks whether Storybook runs with the latest Next.js canary, and means we can spot bugs and make fixes more quickly!
Angular improvements with argsToTemplate
Storybook 7.5 introduces the argsToTemplate feature for Angular, designed to simplify the generation of Angular component templates. This function streamlines the handling of property and event bindings in Storybook stories.
A significant benefit of argsToTemplate is that it addresses the challenge of how Angular treats undefined values in property bindings, which often led to misunderstandings. With this utility, there’s now enhanced support for Storybook controls, ensuring they align better with Angular’s standard behaviors.
Try argsToTemplate
In your story, integrate argsToTemplate within the template string, as seen below:
import { argsToTemplate } from '@storybook/angular'; export const Default: Story = { render: (args) => ({ props: args, template: `<app-template ${argsToTemplate(args)}></app-template>`, }), }; Your arguments will correctly be mapped to property and event bindings!
Additional Angular highlights
- Added further builder options to the Angular Storybook builders: debugWebpack, webpackStatsJson and previewUrl (#24388)
- Standalone directives can now be used in Storybook (#24448)
- Added zone.js v0.14.x support (#24367)
Fix Webpack 5 build errors not being propagated
In Storybook 7, Webpack compilation errors wouldn't propagate to the terminal while Storybook was in dev mode. This was the case in Storybook 6.5. It stopped working because of changes made to the webpack-dev-middleware library.
Storybook 7.5 fixes that bug and that behavior has now returned. This means that you might now see more warnings that weren’t previously there. Fixing them may help make your Storybook more performant!
If you’d like to customize the level of logs that Storybook provides, you can configure the logLevel option in your storybook/main.ts file.
Lit 3.0 support
Finally, Storybook 7.5 also brings support for Lit 3.0!
Lit is one of the leading libraries for developing web components. The new Lit 3.0 is the Lit team's first major release since early 2021.
To carry on using Storybook as normal in your Lit 3 project, upgrade to Storybook 7.5 today!
Upgrade to Storybook 7.5
To upgrade your Storybook to 7.5, run:
# Upgrade your Storybook to 7.5 npx storybook@latest upgrade For guidance on upgrading from a version of Storybook that's earlier than Storybook 7, check out the Storybook 7 migration guide.
Alternatively, for a fresh install, bootstrap Storybook into an existing app with:
# Install a fresh Storybook npx storybook@latest init Credits
Huge thanks to everyone who contributed to Storybook 7.5! That includes:
@almoghaimo, @anneau, @arup1221, @atreay, @bkfarnsworth, @bryanjtc, @cdedreuille, @chocoscoding, @decherneyge, @greut, @ianvs, @integrayshaun, @irangarcia, @j3rem1e, @johnhunter, @jonniebigodes, @jonthenerd, @jreinhold, @json-betsec, @julien-deramond, @kasperpeulen, @kbazilio, @kylegach, @legnaleurc, @martinnabhan, @masaya48, @mastrzyz, @mrzillagold, @natehouk, @ndelangen, @nsheaps, @omahs, @oruman, @osnoser1, @pure-js, @rohanpoojary1107, @roottool, @seriouz, @shilman, @sidnioulz, @stropitek, @tmeasday, @valentinpalkovic, @vanessayuenn, @wesgro, @yannbf, @yoshi2no, @yossisaadi Get involved
There are many ways to get involved with the Storybook community!
- If you are interested in contributing to Storybook, check out Storybook on GitHub – create an issue, or submit a pull request.
- Chat with us in Discord, share your skills, and help other users learn Storybook
- Stay up to date with Storybook news on Twitter, on LinkedIn, or via our mailing list