For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /guide/integrations/rstack.md.
close
  • English

      • Rstack

      This addon loads an app or library definition from your Rstack configuration and reuses its Storybook-safe Rsbuild settings in the preview build.

      See the Rstack React app example and the Rstack React component example for complete setups.

      Getting started

      Installation

      npm
      yarn
      pnpm
      bun
      deno
      npm install @rsbuild/core rstack storybook-addon-rstack -D

      Use this alongside the framework package from your project's framework guide, such as storybook-react-rsbuild.

      Setup .storybook/main.ts

      .storybook/main.ts
      import type { 
      import StorybookConfig
      StorybookConfig       } from 'storybook-react-rsbuild'      

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

export default 
      const config: StorybookConfig
      config

      By default, the addon loads rstack.config.*, prefers define.app() when both app and lib definitions exist, and otherwise falls back to define.lib(). Only the selected definition is executed.

      Options

      Configure the addon when the defaults do not match your project:

      .storybook/main.ts
      import type { 
      import StorybookConfig
      StorybookConfig       } from 'storybook-react-rsbuild'      

const 
      const config: StorybookConfig
      config      : 
      import StorybookConfig
      StorybookConfig       = {      
  
      framework: string
      framework      : 'storybook-react-rsbuild',      
  
      stories: string[]
      stories      : ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],      
  
      addons: {
    name: string;
    options: {
        rstack: {
            configFilePath: string;
            stack: {
                type: string;
                libIndex: number;
            };
        };
    };
}[]
      addons      : [      
    {
      
      name: string
      name      : 'storybook-addon-rstack',      
      
      options: {
    rstack: {
        configFilePath: string;
        stack: {
            type: string;
            libIndex: number;
        };
    };
}
      options      : {      
        
      rstack: {
    configFilePath: string;
    stack: {
        type: string;
        libIndex: number;
    };
}
      rstack      : {      
          
      configFilePath: string
      configFilePath      : './rstack.config.ts',      
          
      stack: {
    type: string;
    libIndex: number;
}
      stack      : { 
      type: string
      type      : 'lib', 
      libIndex: number
      libIndex      : 0 },      
        },
      },
    },
  ],
}

export default 
      const config: StorybookConfig
      config
      • configFilePath: Optional string. Absolute path, or relative to the current working directory. Names the Rstack config file, which is loaded through Rstack's loadRstackConfig().
      • stack: Which definition to inherit. Omit it to prefer define.app() and fall back to define.lib().
        • { type: 'app', environment? }: inherit define.app(). environment must name an existing environment; see the builder's environment option.
        • { type: 'lib', libIndex? }: inherit define.lib(). libIndex is a number or false (default 0); false inherits only top-level library config.

      Setting stack requires that definition to exist; a missing definition is an error.

      If the selected library config omits its lib array, index 0 is an implicit empty entry. An explicit empty array has no valid entry.

      Inherited configuration boundary

      Inherited configuration follows the same Rsbuild configuration boundary.