close
Guide
Storybook
Rsbuild
Guide
Storybook
Rsbuild

Builder options

Storybook Rsbuild exposes several builder-level flags that let you align the Storybook build with your application's Rsbuild setup.

rsbuildConfigPath

  • Type: string
  • Default: undefined

Storybook automatically looks for the project's Rsbuild config (for example rsbuild.config.js) in the current working directory. If your config lives elsewhere, point to it explicitly:

// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        rsbuildConfigPath: '.storybook/customRsbuildConfig.js',
      },
    },
  },
}

export default config

lazyCompilation

  • Type: boolean
  • Default: false

Turn on Rspack's experimental lazy compilation to defer building modules until they're requested.

// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        lazyCompilation: true,
      },
    },
  },
}

export default config

fsCache

  • Type: NonNullable<RsbuildConfig['performance']>['buildCache']
  • Default: false
NOTE

Requires @rsbuild/core >= 1.2.5.

Enable Rspack's experimental persistent cache so Storybook can reuse previous build results.

// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        fsCache: true,
      },
    },
  },
}

export default config

environment

  • Type: string
  • Default: undefined

Rsbuild supports multiple named environments. If your project defines more than one, tell Storybook which environment configuration to use.

// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        environment: 'web-storybook',
      },
    },
  },
}

export default config

addonDocs

  • Type: object
  • Default: undefined

Storybook Rsbuild bundles @storybook/addon-docs. Use addonDocs to forward preset options to the addon.

// .storybook/main.mjs
import remarkGfm from 'remark-gfm'

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        addonDocs: {
          mdxPluginOptions: {
            mdxCompileOptions: {
              remarkPlugins: [remarkGfm],
            },
          },
        },
      },
    },
  },
}

export default config

Customize the merged Rsbuild config

rsbuildFinal receives the combined configuration from your project and the builder. Modify it as needed and return the updated object.

// use `mergeRsbuildConfig` to recursively merge Rsbuild options
import { mergeRsbuildConfig } from '@rsbuild/core'

const config = {
  async rsbuildFinal(config, { configType }) {
    return mergeRsbuildConfig(config, {
      resolve: {
        alias: { foo: 'bar' },
      },
    })
  },
}

export default config

configType is set to either 'DEVELOPMENT' or 'PRODUCTION' so you can branch if necessary.

Use webpack-based addons

Because Rspack is compatible with webpack 5, Storybook Rsbuild can also run webpack-based addons. Configure them through the webpackAddons field, which mirrors Storybook's addons option. For example, enabling @storybook/addon-coverage:

const config: StorybookConfig = {
  // --snip--
  webpackAddons: [
    {
      name: '@storybook/addon-coverage',
      options: {
        istanbul: {
          include: ['src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
          exclude: [],
        },
      },
    },
  ],
  // --snip--
}