#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

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.

:::note Version compatibility

• ≤ 2.1.x: Configure options through framework.options.builder.addonDocs (see snippet below).
• ≥ 2.2.0: Prefer configuring @storybook/addon-docs directly in the addons array (see second snippet). This mirrors Storybook's native API and matches the sandboxes.
• 3.0.0: The old addonDocs builder option will be removed. Migrate to the addons-array syntax to stay compatible. :::

// .storybook/main.mjs (Storybook Rsbuild ≤ 2.1.x)
import remarkGfm from 'remark-gfm'

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

export default config

// .storybook/main.ts (Storybook Rsbuild ≥ 2.2.0)
import remarkGfm from 'remark-gfm'

const config = {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [remarkGfm],
          },
        },
      },
    },
  ],
  framework: {
    name: 'storybook-react-rsbuild',
  },
}

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--
}