Storybook 7.5

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

Storybook is built by over 1,000 community contributors and the core Storybook team at Chromatic. Our huge thanks to everyone who contributed to this release! Including:

@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

Storybook 7.5 is here! It brings a ton of improvements that enhance the Storybook experience.

⚡️ Vite 5.0 + Lit 3.0 support
💨 2.2x faster React TypeScript start times
👻 'storiesOf' deprecated
🅰️ Many Angular improvements
🀄️ Rename @nextjs font importshttps://t.co/aNbgrbIwHs pic.twitter.com/6Lmml325KZ

— Storybook (@storybookjs) October 19, 2023