> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Rslib

This addon loads the reusable parts of the Rsbuild config from your Rslib configuration file while keeping library-only settings out of the Storybook preview build.

It also lets you develop the `mf` [(Module Federation)](https://rslib.rs/guide/basic/output-format#mf) format inside Storybook.

See the [React component library example](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rslib-react-component) for a full reference implementation.

## Getting started

### Installation


```sh [npm]
npm install @rsbuild/core storybook-addon-rslib -D
```

```sh [yarn]
yarn add @rsbuild/core storybook-addon-rslib -D
```

```sh [pnpm]
pnpm add @rsbuild/core storybook-addon-rslib -D
```

```sh [bun]
bun add @rsbuild/core storybook-addon-rslib -D
```

```sh [deno]
deno add npm:@rsbuild/core npm:storybook-addon-rslib -D
```

Install `@rsbuild/core` directly so the version that the addon and your framework package use is pinned in your own lockfile. Use this alongside the framework package from your project's [framework guide](/guide/framework.md) (e.g. `storybook-react-rsbuild`).

### Setup `.storybook/main.ts`

```ts twoslash title=".storybook/main.ts"
// @noErrors
import type { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['storybook-addon-rslib'],
}

export default config
```

Before the selected Rslib config is merged into Storybook, it passes through the same inherited-config boundary documented in [Builder Options](/guide/configuration.md#builder-options). Plugins remain inherited; use the Storybook CLI's `process.env.STORYBOOK` flag to conditionally omit an app-only side-effect plugin. Use `modifyLibRsbuildConfig` to restore a stripped field explicitly for Storybook, or use Storybook's `rsbuildFinal` for final configuration. Both hooks run after inherited fields are stripped.

Or configure the addon manually:

```ts twoslash title=".storybook/main.ts"
// @noErrors
import type { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    {
      name: 'storybook-addon-rslib',
      options: {
        // Check options section.
      },
    },
  ],
}

export default config
```

## Module Federation

Review the [Rslib Module Federation documentation](https://rslib.rs/guide/advanced/module-federation) to prepare the `mf` output before loading it in Storybook.

## Options

```ts
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 after inherited fields are stripped
     * and before merging with Storybook config. You can modify the configuration in the config
     * parameters in place, including explicitly restoring stripped fields.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibRsbuildConfig?: (config: RsbuildConfig) => void
  }
}
```