close

    Vanilla JS / TS

    Use Storybook for vanilla JavaScript or TypeScript projects to preview UI components while keeping your Rsbuild pipeline intact.

    Requirements

    PackageVersion
    @rsbuild/core≥ 1.0.1
    storybook≥ 10.0.0

    Getting started

    These steps assume you already have an Rsbuild project without a specific framework.

    Installation

    Install the HTML framework package to enable vanilla stories.

    npm
    yarn
    pnpm
    bun
    deno
    npm install storybook-html-rsbuild -D

    Configure .storybook/main.ts

    import { StorybookConfig } from 'storybook-html-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-html-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config
  },
}

export default config

    You're all set! Review the vanilla TypeScript sandbox to see the setup in action, and continue exploring the Storybook docs.

    Next Steps

    • Writing Stories: Learn how to write stories for vanilla JavaScript/TypeScript.
    • Testing: Learn how to test your UI components.

    Options

    Please refer to the Configuration Guide for framework-specific options and defaults.