DEV Community

Cover image for Introducing Storybook 7.5

Posted on • Originally published at

Introducing Storybook 7.5

Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at, 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

Storybook and Vite, connected like jigsaw puzzle pieces

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.

Component Story Format

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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>`,
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode


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
Enter fullscreen mode Exit fullscreen mode

Get involved

There are many ways to get involved with the Storybook community!

Top comments (1)

martijnsaly profile image
Martijn ᗢ

If you are interested in contributing to Storybook, check out Storybook on GitHub

I would if I could, but their repo is still locked. Can't create issue, PR or discussion topic. Has been like that for probably about a year or so. Pretty lame, iyam.