close
Guide
Storybook
Rsbuild
Guide
Storybook
Rsbuild

Rslib

This addon loads a reusable Rsbuild config from your Rslib configuration file so storybook-builder-rsbuild mirrors the same setup used by your library build.

It also lets you develop the mf (Module Federation) format inside Storybook.

See the React component library example for a full reference implementation.

Getting started

Installation

npm
yarn
pnpm
bun
npm install storybook-addon-rslib -D

Setup .storybook/main.ts

export default {
  addons: ['storybook-addon-rslib'],
}

Or configure the addon manually:

export default {
  addons: [
    {
      name: 'storybook-addon-rslib',
      options: {
        // Check options section.
      },
    },
  ],
}

Module Federation

Review the Rslib Module Federation documentation to prepare the mf output before loading it in Storybook.

Options

export interface AddonOptions {
  rslib?: {
    /**
     * `cwd` passed to loadConfig of Rslib
     * @default undefined
     */
    cwd?: string
    /**
     *  `path` passed to loadConfig of Rslib
     * @default undefined
     */
    configPath?: string
    /**
     * The lib config index in `lib` field to use, will be merged with the other fields in the config.
     * Set to a number to use the lib config at that index.
     * Set to `false` to disable using the lib config.
     * @default 0
     */
    libIndex?: number | false
    /**
     * Modify the Rslib lib config before transforming it to Rsbuild config which will be merged
     * with Storybook. You can modify the configuration in the config parameters in place.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibConfig?: (config: LibConfig) => void
    /**
     * Modify the Rsbuild config transformed from lib config before merging with Storybook
     * config. You can modify the configuration in the config parameters in place.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibRsbuildConfig?: (config: RsbuildConfig) => void
  }
}