storybook

Fresh out of the oven! Storybook 8.3 brings you:

• ⚡️ First-class Vitest integration to run stories as component tests

• 🔼 Next.js-Vite framework for Vitest compatibility and better DX

• 🗜️ Further reduced bundle size for a smaller install footprint

• 🌐 Experimental Story globals to standardize stories for themes, viewports, and locales

• 💯 Hundreds more improvements

List of all updates

• Addon Test: Improve messages and post install script handling

• Addon Viewport: Add default options via parameters

• Addon Test: Add experimental vitest integration

• Addon Test: Fix error message logic in set up file

• Addon Test: Fix indentation of 'vitePluginNext' in generated Vitest config file

• Addon Test: Fix postinstall file types

• Addon Test: Fix tests potentially not existing in non-isolate mode

• Addon Test: Set default viewport if applicable

• Addon Test: Set screenshotFailures to false by default

• Addon Docs: Remove babel dependency

• Addon Interactions: Fix status in panel tab

• Angular: Fix Angular template error for props with a circular reference

• Angular: Fix template props not able to use dot notation

• Backgrounds/Viewports: Make defaults overridable in StoryGlobals-mode

• Blocks: Fix scroll to non-ascii anchors

• Builder-Vite: Add null character prefix to virtual file IDs

• Builder-Vite: Fix 'condition node never be used' warning

• CLI: Add conditional logging for manager and preview start

• CLI: Fix dedent import in package managers

• CLI: Fix the initialization of Storybook in workspaces

• CLI: Handle Yarn PnP wrapper scenario when adding an addon

• CLI: Make PackageJson optional for starting a dev server

• CLI: Update spawn options in proxy.ts to support Windows

• Components: Remove external overrides

• ConfigFile: Fix as const satisfies modifiers

• Controls: Add disableSave parameter

• Core: Add Rsbuild frameworks to known frameworks

• Core: De-duplicate babel use in core

• Core: Fix header for MountMustBeDestructuredError message

• Core: Fix manager-builder tsconfig to emit react-jsx

• Core: Introduce setProjectAnnotations API to more renderers and frameworks

• Core: Make sure CJS build always has lowest prio

• Core: Move util to regular dependency

• Core: Split Storybook CLI

• Core: Upgrade docs-mdx for smaller install

• CPC: Add ESM export to docs-tools & node-logger packages

• CPC: Fix missing dependency in @storybook/addon-interactions

• CPC: Fix type generation

• CPC: Revert renames of panels, addon_ids

• CSF: Allow overridding globals at the story level

• Dependencies: Upgrade commander

• Add header for MountMustBeDestructuredError message

• Prevent iframe from capturing mouse events in composed Storybooks

• Maintenance: Add node:-prefix to node core-modules

• Maintenance: Rename addon-vitest to addon-test

• Next.js-Vite: Fix vite plugin exports

• Next.js-Vite: Streamline Next.js dir option

• Next.js-Vite: Update next and vite-plugin-storybook-nextjs dependencies

• Next.js: Add @storybook/nextjs-vite package

• Next.js: Fix wrong Next.js framework reference

• Next.js: Make RSC portable-stories compatible

• Next.js: Update dependencies

• Nextjs-Vite: Re-export vite-plugin-storybook-nextjs

• Portable Stories: Improve Handling of React Updates and Errors

• React: Avoid 'Dynamic require of react is not possible' issue

• React: Bundle in lodash

• Svelte: Fix events not being logged in Actions when a story has decorators

• SvelteKit: Introduce portable stories support

• SvelteKit/Vue3: Refactor plugin export paths

• Telemetry: Add globals stats

• Telemetry: Add portable stories

• Types: Adjust beforeAll to be non-nullable in NormalizedProjectAnnotations

• Types: Update type signatures of objects and functions

• UI: Fix collapse/expand all functionality

• UI: Fix conditional hooks usage in sidebar

• UI: Fix sidebar not wrapping

• Vite: Fix HMR

• Vite: Fix missing source map warning

• Vitest: Fix add command

• Vitest: Fix default viewport

• Vitest: Implement add command for vitest addon

• Vue: Add missing prop controls when using vue-component-meta docgen plugin

• Vue: Improve generated code snippets

• Vue3: Add vite plugin for portable stories

Hold onto your hats! Storybook 8.2 has dropped, packed with a treasure trove of new features and bug fixes:

• 🪝 New test hook beforeAll

• 🕹️ Enhanced play function

• 📦 Portable stories that let you use your stories in other testing tools

• 🎁 Consolidated dependency to bring you better performance in a smaller package

• ✨ Brand new onboarding experience to get you up to speed quicker

• 💯 Hundreds more improvements

List of all updates

• Addon Controls: Fix saving on Windows

• Addon Interactions: Use unique keys when rendering array nodes in panel

• Addon Onboarding: Add icons for dev/test/doc to the splash screen

• Addon Onboarding: New design and flow based on Save from Controls

• Addon Onboarding: Trigger onboarding during init for Vue and Angular projects

• Addon-A11y: Fix property default assignment

• Angular: Allow format configuration of custom source preview

• Angular: Allow outputPath object syntax

• Angular: Cleanup types

• Angular: Fix enableProdMode setting

• Angular: Fix wrong detection of standalone components

• Angular: Introduce preserveSymlink builder option

• Angular: Update outputPath default value in angular-cli-webpack.js

• Babel: Ensure story files not transpiled earlier than ES2017

• Blocks: Fix reference to storybook core

• Blocks: Prebundle tocbot

• CLI: Add --no-dev option to init

• CLI: Add optional --dev and --no-dev options to storybook init CLI

• CLI: Add support for Nuxt to project init

• CLI: Fix CLI always asking all automigrations

• CLI: Improve error message when fetching CLI version

• CLI: Include @storybook/addon-svelte-csf when initializing new projects

• CLI: Prebundle get-npm-tarball-url and @ndelangen/get-tarball

• Config: Apply JavaScript-only story glob extensions for JavaScript projects

• Controls: Fix date picker control validation and assignment

• Controls: Fix grouped Radio controls to have the same name

• Controls: Throttling makes Color control lagging

• Core: Add context as a property of the context (self-referencing)

• Core: Add support for beforeAll hook

• Core: Fix startup hang caused by watchStorySpecifiers

• Core: Make sure StorybookError message shows up in browser console and interactions panel

• Core: Migrate from pkg-dir to fd-package-json

• Core: Refactor phases to run in order loading -> rendering -> playing

• Core: Remove more .stories.mdx handling

• Core: Remove util dependency

• CPC: Add CJS for core/components

• CPC: Core Package Consolidation

• CSF: Automatically extract componentPath

• CSF: Rename preview.js globals to initialGlobals

• Dependencies: Allow esbuild version 0.21.x

• Dependency: Bump Express.js

• Dependency: Remove node-fetch

• Docs-tools: Replace doctrine with jsdoc-type-pratt-parser

• Index: Fix MDX to override project-level autodocs

• Indexer: Improve locating stories with specials chars in path

• Next: Set default targets for next babel config

• Next.js: Set env.bugfixes in SWC so destructuring is never transpiled

• React: Export ButtonProps and HeaderProps in CLI templates

• SWC: Set default targets for swc that align with our esbuild targets

• Telemetry: Stop prompting about crash reports in CI

• Types: Fix type implementation for CompatibleString

• Vite: Fix asset warning by externalizing sb-common-assets font

• Vue3: Enable new hydration mismatch compile time flag

• Webpack5/Vite: Fix sourcemaps

Storybook 8.1 is here with a tone of new features and bug fixes:

• 🏷️ Static tag-based filtering

• 🦺 Type-safe, standards-based module mocking

• 🐣 New beforeEach test hook

• 🧳 Portable Stories API for Playwright Component Testing

• 🐕‍🦺 Support the new signal-based input & output functions in Angular

• 2️⃣ Two new ways to create stories: generating them from story controls or from your components directly!

List of all updates

• Addon-actions: Fix falsy args printing as object - 22163

• Addon-docs: Fix MDX compilation with @vitejs/plugin-react-swc and plugins

• Addon-docs: Fix providerImportSource extension

• Addon-docs: Fix react-dom/server imports breaking stories and docs

• Addon-docs: Support Stencil based display names in source snippets

• Addon-docs: Fix [Object object] displayName in some JSX components

• Angular: Add type support for Angular's input signals

• Angular: Add type support for Angular's output signals

• API: Add API access to sidebar renderLabel

• Args: Add possibility to mark controls as read-only

• Automigrations: Fix name of VTA addon

• Automigrations: Add migration note about new react-docgen default

• Automigrations: Fix missing support for mts vite config

• Automigrations: Improve react-docgen automigration prompt

• Blocks: Add of prop to Subtitle

• Blocks: Add of prop to Title

• CLI: Add --config-dir flag to add command

• CLI: Add --config-dir flag to migrate command

• CLI: Add main.js docs.autodocs automigration

• CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x

• CLI: Automigrate improve upgrade storybook related packages

• CLI: Automigrations copy edits

• CLI: Fix eslint configuration for string extends

• CLI: Improve Yarn berry error parsing

• CLI: Improve vite-config-file.ts

• CLI: Instruct the correct auto-migration command

• CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1

• CLI: Throw an error when running upgrade command in incorrect cwd

• Codemods: Escape filename given as argument

• Controls: Add Channels API to search for files in the project root

• Controls: Added server channel to create a new story

• Controls: Add UI to create new story files

• Controls: Fix crashing when docgen extraction partially fails

• Controls: Fix disable condition in ArgControl component

• Controls: Fix number controls do not reset

• Core: Add duration and onClick support to Notification API and improve Notification UI

• Core: Drop unneeded UPDATE_STORY_ARGS which was for SSv6

• Core: Ensure that simultaneous onStoriesChanged don't clobber each other

• Core: Fix filters not being applied in WebKit

• Core: Fix preloading too early

• Core: Implement file formatter

• Core: Optimize clearNotification

• Core: Save from controls

• CSF: Allow default export without title or component attributes

• CSF: Fix typings for control and other properties of argTypes

• CSF: Make sure loaders/decorators can be used as array

• Dependencies: Bump es-module-lexer

• Dependencies: Update globby dependency

• Dependencies: Update postcss-loader in Next.js framework

• Doc Tools: Signature Type Error Handling

• Indexer: Escape special characters in storyImport regex

• Maintenance: Fix performance regressions

• MDX: Do not transform http:// links

• Next.js: Fix Compatibility with <v14.0.4

• Next.js: Fix next/font usage on Windows machines

• Next.js: Move sharp into optional deps

• Next.js: Support v14.2 useParams functionality

• Next.js: Implement next redirect and the RedirectBoundary

• Next.js: Support path aliases when no base url is set

• Node: Safe use of document for preview

• Onboarding: Improve UI

• Portable stories: Introduce experimental Playwright CT API and Support for more renderers

• Portable stories: Make setProjectAnnotations accept multiple types of imports

• Portable Stories: Remove link to missing docs

• Portable Stories: Warn when rendering stories without cleaning up first

• React-Docgen: Make sure to be able to handle empty unions

• React: Support v19 betas in peer dependencies

• React: Support v19 in react-dom-shim

• Tags: Add project tags, negation, dev/autodocs/test system tags

• Tags: Fix missing default tags if no preview.js

• Theming: Update emotion dependencies

• Typescript: Add types for experimental-playwright entries without type:bundler

• UI: Add key property to list children in Highlight component

• UI: Fix not re-rendering tabs on state change

• UI: Fix panel layout resizing do not apply when done too fast

• UI: Fix search result color contrast

• UI: Fix sidebar search hanging when selecting a story in touch mode

• UI: Fix theming of elements inside bars

• UI: Improve empty state of addon panel

• UI: Replace the icon prop in the Manager API

• Viewport: Fix missing style

• Vite: Merge assetsInclude property with Storybook default values

• Vue: Disable controls for events, slots, and expose

• security

  Webpack: Bump webpack-dev-middleware to patch high security issue

• Webpack: Fix sourcemap generation in webpack react-docgen-loader

• Webpack: Hide runtime errors

Storybook 8.0 is here

It brings major improvements to Storybook's feature set for testing and documentation, with strengthened framework support across React, Vue, Angular, web-components, Svelte, and more.

• 🩻 Built-in visual testing

• ⚛️ React Server Component support

• 🎛️ Improved controls for React and Vue projects

• ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support

• 🧪 2-4x faster Storybooks for testing

• ✨ Refreshed desktop UI

• 📲 Rebuilt mobile UX

• 🙅‍♀️ No more React requirement in non-React projects

Please checkout our Migration Guide to upgrade from earlier versions of Storybook. To see a comprehensive list of changes that went into 8.0, you can refer to the 8.0 prerelease changelogs.