#Rspack

Rsbuild is built on Rspack, so any configuration you apply in Rsbuild can work with raw Rspack projects too. This guide shows how to connect Storybook Rsbuild to an existing Rspack setup.

Explore the Rspack React sandbox for a complete reference implementation.

#Setup

#1. Install dependencies

Starting from a React example, install storybook-react-rsbuild (see the React framework guide) and add the Rsbuild packages required for Rspack support.

npm install @rsbuild/core @rsbuild/plugin-react -D

Ensure the following packages are present:

• storybook
• @rsbuild/core
• @rsbuild/plugin-react
• storybook-react-rsbuild

#2. Create rsbuild.config.ts

Storybook Rsbuild reads the project's Rsbuild config in the same way that @storybook/builder-webpack5 allows custom webpack configs. Configure the basics for your Rspack app here.

import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'

export default defineConfig({
  plugins: [pluginReact()],
})

#3. Configure .storybook/main.ts

Match the setup from the React framework guide so Storybook uses the Rsbuild builder.

import { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
}

export default config

At this point npx storybook dev should launch using the default @rsbuild/core and @rsbuild/plugin-react configuration. If your stories require additional Rspack features, continue with the next step.

#4. Reuse custom Rspack options (optional)

Projects often maintain both rspack.config.ts (for the application build) and rsbuild.config.ts (for Storybook). Import the former into the latter and merge any rules or plugins through tools.rspack. Refer to tools.rspack for every customization hook.

The example below reuses a less-loader rule defined in rspack.config.cjs:

import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import rspackConfig from './rspack.config.cjs'

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: (config) => {
      const lessLoader = rspackConfig.module.rules[2]
      config.module!.rules!.push(lessLoader)
      return config
    },
  },
})