#Getting started

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 init

Storybook 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

#Usage

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

See integrating with 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.

See integrating with Rslib.

#With Rspack

Connect Storybook Rsbuild to an existing Rspack setup.

See integrating with Rspack.