New
@storybook-test: more streamlined and powerful testingVisual test with Chromatic
Star81,060
Back to blog

Storybook 7.5

Next.js improvements, enhanced Angular support, and 2.2x faster startup for React TypeScript projects

loading
Michael Shilman
@mshilman

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

The Storybook and Vite logos, 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.

CSF – Auto-migrate with codemod

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

Join the Storybook mailing list

Get the latest news, updates and releases

6,378 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

How Netlify rebranded their app in just 6 weeks

A masterclass in rebranding with Storybook and Chromatic
loading
Joe Vaughan
Join the community
6,378 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI