storybook

Storybook 9.0 is here

This is a huge release focused on testing and bundle size.

• Component testing

  • 👆 Interactions

  • ♿️ Accessibility

  • 👁️ Visual changes

  • 🛡️ Coverage

• 🪶 48% lighter bundle

• 🏷️ Tags-based organization

• 🌐 Story globals

• 🏗️ Major upgrades: Svelte, Next, React Native, Angular

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

List of all updates

• Addon A11y: Add linkPath to Axe results and use it in copy link action

• Addon A11y: Fix setup as part of storybook create

• Addon A11y: Fix usage of axe-core in pnpm projects

• Addon A11y: Fix various issues and inconsistencies

• Addon A11y: Improve selector automigration detection

• Addon A11y: Only run checks in story mode

• Addon A11y: Provide full report in a11y manual runs

• Addon A11y: Use short titles and friendly summary messages in A11y report

• Addon Controls: Fix loading state UI in addon panel

• Addon Docs: Fix layout: centered in conjunction with inline: false

• Addon Docs: Fix docs-content overflow with TOC

• Addon Docs: Fix iframe content width in centered layout

• Addon Docs: Improve TableOfContents HTML structure and a11y

• Addon Docs: Reset error boundary when story changes to recover from erros

• Addon Docs: Simplify color parsing and color cycling logic

• Addon Docs: Update telejson

• Addon Pseudo States: Move package into monorepo

• Addon Test: Improve unhandled error messages

• Addon Test: Rename @storybook/experimental-addon-test to @storybook/addon-vitest

• Addon Vitest: Ensure vitest exclusions are relative to the project root, not cwd

• Addon Vitest: Fix broken docs links

• Addon Vitest: Fix watch mode for new files

• Addon Vitest: Ignore mdx files as part of tests

• Addon Vitest: Improve handling multiple browser mode projects

• Addon Vitest: Support vitest.projects.ts file as workspace file during postinstall

• Addon Vitest: Transform @storybook/nextjs imports to @storybook/nextjs-vite during init

• Addon Vitest: Use its own cache directory

• Addon-a11y: Replace element parameter with context

• Addon-A11y: Various improvements

• Addon-Essentials: Remove addon-docs

• Addon-Test: Automatically load before all

• Addon-test: Exclude storybook-static from coverage reports

• Addon-test: Fix watching non-story files, run all tests on preview change

• Addon-Test: Migrate to new test provider API, drop Vitest 2 support

• Addon-Vitest: Always clean coverage before (re)running

• Addon-vitest: Fix coverage being disabled with Run All button

• Addon-vitest: Fix coverage when restarting Vitest due to config change

• Addon-vitest: Fix wrong test count in telemetry

• Addon-vitest: Remove internal log for staticDir

• Addon-vitest: Support paths with spaces

• Addons: Add shim Storybook addons for previously removed addons

• Addons: Move @storybook/addon-interactions into core

• Addons: Remove @storybook/addon-storysource

• Addons: Update the Viewport and Background Addon

• AddonVitest: Use framework package, not renderer

• All packages: Remove unused dependencies

• Angular: Add @angular-devkit/build-angular to default installed pacakages in angular

• Angular: Filter non-inputs from controls

• Angular: Remove invalid defaults for start-storybook

• ArgTypes: Always extract argTypes, even without addon-docs

• Autoblock: Add autoblocker for addon-test

• Autoblock: Fix link

• AutoBlocker: Add major version upgrade blocker

• Automigrate: Disable missingStorybookDependencies for 9.0

• Automigrate: Prefer framework import

• Automigration: Add new Storybook addons to consolidated packages mapping

• Automigration: Adjust addon-docs install condition

• Automigration: Always scan file system to substitute essential addons

• Automigration: Correctly apply the wrap-require automigration in ESM modules

• Automigration: Enhance import transformation to handle partial package matches

• Automigration: Ensure correct addition of missing dependencies

• Automigration: Fix an issue when main.js addons have dynamic values

• Automigration: Fix consolidated-imports with sub-paths

• Automigration: Fix wrap require wrapper

• Automigration: Improve renderer to framework automigration

• Automigration: Migrate users to codePanel

• Automigration: Misc addon-essentials migration fixes

• Automigration: Pass over flags when calling automigrations

• Automigration: Remove @storybook/addon-essentials proper

• Automigration: Remove docs.autodocs field

• Automigration: Respect config-dir option

• Automigration: Update mapping for '@storybook/experimental-nextjs-vite'

• Automigrations: Add logging

• Automigrations: Fix installation of addon-docs

• Automigrations: Re-add renderer-to-framework and fix issue in monorepositories

• Backgrounds/Viewport: Fix resetting

• Blocks: IconGallery improvement

• Cleanup: Remove obsolete dependency

• CLI: Add storybook-static to .gitignore on init

• CLI: Add detection for the storybook package being behind any other core packages

• CLI: Add index command / API

• CLI: Add React Native .rnstorybook CLI automigration

• CLI: Detect correct storybook version on upgrade

• CLI: Do not install renderer package on init

• CLI: Enhance compatibility check: deprecated detection

• CLI: Fix framework for preview imports

• CLI: Fix get versions utility for NPM

• CLI: Improve CLI upgrade process for @latest and @next

• CLI: Improve package upgrade logic

• CLI: Install prereleases of @chromatic-com/storybook

• CLI: Make sure that the add commands logs all output to the console

• removed

  CLI: Remove @latest from yarn create commands

• CLI: Supress npm notice update log messages

• CLI: Tweak init prompt

• CLI: Update nx docs in Storybook detection error

• CLI: Wrap object addon names in wrap-require migration

• CodePanel: Show originalSource code

• Controls: Embed addon-controls into the core

• Controls: Remove empty state video link

• Core / Addon A11y: Emit STORY_HOT_UPDATED and rerun A11y tests on HMR

• Core: Add error boundary to tabs to prevent addon errors breaking Storybook

• Core: Add highlight as public API

• Core: Add preview navigator and --preview-only CLI flag

• Core: Automatically expand testing module on unhandled error

• Core: Avoid pre-bundling of preview-api in manager entries

• Core: Bring back loading globals from global types in portable stories

• Core: Builder-manager disable metafile

• Core: Change require.resolve path for storybook/package.json

• Core: Cleanup dependencies

• Core: Create features for addons moved into core

• Core: Do not show 'Render story' step in interactions

• Core: Draw highlights on top of canvas and add various new features

• Core: Fix core annotations applied twice

• Core: Fix favicon issue on dev server

• Core: Fix highlight clickEvent serialization and export public types

• Core: Fix highlight conflicts

• Core: Fix highlighting zero-pixel elements and focus on single element

• Core: Fix sidebar accessibility order for screen readers

• Core: Improve unhandled error detection

• Core: Increase compile targets for node & browsers

• Core: Make sure to only mutate writable arrays

• Core: Move @storybook/addon-actions into storybook

• Core: Move @storybook/instrumenter into core

• Core: New Status Store

• Core: New Test Provider Store

• Core: Prebundle jsdoc-type-pratt-parser again

• Core: Re-Export renderers from frameworks

• Core: Remove util, browser-assert, process deps

• Core: Remove uuid package from core

• Core: Remove deprecated parts of test provider API

• Core: Remove duplicate notification dot on sidebar buttons on mobile

• Core: Remove maximum-scale=1 from viewport meta tag

• Core: Rename local tests to interactions

• Core: Set a minimum height/width for the targetable area of highlights

• Core: Show "Render story" event explicitly in Component Tests event trace

• Core: Support groups and info icon in highlight popover menu

• Core: Support React Native environment without static class blocks

• Core: Testing Module UI improvements

• Core: Wait for animations before completing render cycle

• CSF-Tools: Add support for existing node imports and improve import handling

• Csf-Tools: Enhance setFieldNode logic to handle variable declarations

• CSF: Fix handling of renamed story exports

• Dependencies: Update docgen

• Dependencies: Upgrade @types/estree package to version v1.0.6

• Dependencies: Upgrade telejson

• Dependencies: Upgrades

• Dependencies: Upgrades for security

• Dependencies: Upgrades for security

• Dependencies: Upgrades for security

• Eslint-plugin: Handle JSON5 format

• ESLint: Fix flat config setup

• Essentials: Move remaining addons into core

• Highlights: Dont run highlights when the feature is disabled

• Hooks: Stabilize experimental afterEach hook

• removed

  HTML Framework: Remove support for HTML Webpack 5

• Indexer: Do not create autodocs entries unless addon-docs installed

• Init: Install framework stories instead of renderer stories

• Instrumenter: Fix preview-api import for react-native

• Interactions: Rename component test panel

• Maintenance: Drop tooling support

• Maintenance: Merge @storybook/core with storybook

• Maintenance: Migrate eslint-storybook-plugin into the monorepo

• Maintenance: Remove aliasses in builder configurations & scripts

• removed

  Maintenance: Remove deprecated APIs

• removed

  Maintenance: Remove deprecated packages

• Maintenance: Remove obsolete automigrations

• Maintenance: Specify that Addon Test now requires Vitest 3.0

• Manager: Add reactivity to useParameter

• Manager: Fix Uncaught ReferenceError: global is not defined

• Migration: Add auto-automigration for merged packages

• Migration: Improve glob question text

• Next.js-Vite: Stabilize @storybook/experimental-nextjs-vite

• removed

  Next.js: Remove deprecated compatibility files

• Next.js: Upgrade image-size to 2.0

• Nextjs Vite: Add runtime check for malformed postcss config

• Nextjs-Vite: Update vite-plugin-storybook-nextjs version and add optimizeDeps

• Node.js: Align Node.js version support

• removed

  Preact: Remove support for Preact Webpack 5

• Presets: Use .js files when .cjs files are passed for entries that should be ESM

• Pseudo States: Ignore escaped pseudo-class names

• React Native Web: Add RNW to vitest supported frameworks

• React Native: Fix support for 9.0

• React-Native: Fix __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ access

• React-Native: Fix userEvent.setup() errors in jest

• React-Native: Fix userEvent.setup() errors outside browser context

• React-Native: Update config directory to .rnstorybook

• React: Don't use Act wrapper in Storybook when rendering in docs

• React: Ensure render functions and decorators are react components

• React: Export returntype of ReactMeta#story

• React: Remove react import in template files

• Remove: Addon mdx-gfm (@storybook/addon-mdx-gfm)

• Revert "Svelte: Adjust Svelte typings to include Svelte 5 function components"

• Save from Controls: Replace rendererPackage with frameworkPackage

• Source Loader: Remove package

• Source: Support async parameters.docs.source.transform

• Svelte-vite: Improve SvelteKit detection error

• Svelte: Adjust Svelte typings to include Svelte 5 function components

• removed

  Svelte: Drop Support for Svelte < 5

• Svelte: Fix missing ts-dedent dependency

• Svelte: Install latest version of @storybook/addon-svelte-csf

• Svelte: Pin svelte2tsx to solve argType regression

• Svelte: Remove dependency on sveltedoc-parser

• Svelte: Remove unused svelte-preprocess dependency

• SvelteKit: Forward form events when mocking enhance

• Telemetry: Add Svelte CSF usage

• Telemetry: Use version from our package.json for storybookVersion

• Test Addon: Stabilize and remove experimental status

• Toolbars: Embed addon-toolbars into the core

• Typescript: Drop Typescript < 4.9 support

• UI: Add options to hide sidebar and toolbar per story

• UI: Clear filters on run all and clear all statuses

• UI: Don't include error state in sidebar context menu

• UI: Fix status missing from sidebar

• UI: Visual tweaks to badges and improved layout for a11y panel

• Update react-router-dom to lowest React19 type-compatible version

• Viewport: Embed addon-viewport in the core

• Viewport: Fix globals type

• Vite-Builder: Handle undefined previewConfig

• Vite: Add 'storybook/viewport' to INCLUDE_CANDIDATES in optimizeDeps.ts

• Vite: Improve handling of preview annotations

• Vite: Normalize preview annotation paths

• Vite: Support Vite 6 and Docs

• Vitest: Remove beforeAll in vitest.setup.ts in automigration

• removed

  Vue3: Remove support for Webpack 5

• Web Components: Remove Webpack 5 support

• Yarn: Update Yarn package command execution to use 'exec'

Total contributions: 240
Unique contributors: 29