Getting started
The main branch ships the Storybook v10 Rsbuild builder together with each framework integration. Use the table below to match your Storybook version, and review the official migration guide before moving to v10.
| Storybook | Storybook Rsbuild |
|---|---|
| v10 | ^3.0.0 |
| v9 | ^2.0.0 |
| v8 | ^1.0.0 |
Storybook Rsbuild allows you to use Rsbuild as the build engine for Storybook, providing faster startup and build times.
Quick Start
The fastest way to get started is using the Storybook CLI.
New Project
If you are setting up a new project, we recommend creating an Rsbuild project first, then adding Storybook.
# 1. Create a new Rsbuild project
npm create rsbuild@latest
# 2. Initialize Storybook (in the project root)
npx storybook@latest initStorybook will detect Rsbuild and automatically configure storybook-builder-rsbuild for you. It will also add example stories to your project. To understand the generated files, check the Storybook Project Structure.
Existing Project
If you are migrating an existing Storybook project to Rsbuild, install the relevant framework package and update your .storybook/main.ts.
See the Frameworks section for detailed migration guides.
Packages
| Package | What it provides |
|---|---|
| storybook-builder-rsbuild | The Rsbuild-powered Storybook builder |
| storybook-react-rsbuild | React framework integration configured for Rsbuild |
| storybook-vue3-rsbuild | Vue 3 framework integration configured for Rsbuild |
| storybook-html-rsbuild | Vanilla JavaScript/TypeScript integration |
| storybook-web-components-rsbuild | Lit and Web Components integration |
| storybook-addon-rslib | Addon that reuses Rslib configuration inside Storybook |
| storybook-addon-modernjs | Addon that reuses Modern.js configuration inside Storybook |
Usage
@rsbuild/core >= 1.0.1— Storybook Rsbuild depends on the stable Rsbuild 1.0 runtime. See the 1.0 release announcement for background.storybook >= 10.0.0— The packages are validated against Storybook 10. Upgrade guidance is available in the Storybook release notes.
When using the v8-compatible packages, you do not install storybook-builder-rsbuild directly. Framework packages such as storybook-react-rsbuild and storybook-vue3-rsbuild include it for you.
Use the following framework guides to plug Storybook Rsbuild into your project.
Use with frameworks
React
Vue
See integrating with Vue.
Vanilla JS/TS
See integrating with vanilla JavaScript / TypeScript.
Web components
See integrating with web components (Lit).
Integration
With Modern.js
Use your existing Modern.js configuration inside Storybook.
See integrating with Modern.js.
With Rslib
Reuse your existing Rslib configuration inside Storybook.
With Rspack
Connect Storybook Rsbuild to an existing Rspack setup.