#Vanilla JS / TS

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

#Requirements

#Getting started

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

#Installation

Install the HTML framework package and @rsbuild/core. Even though storybook-html-rsbuild declares @rsbuild/core as a peer, list it as a direct dev dependency so version pins and lockfile audits remain unambiguous.

npm install @rsbuild/core storybook-html-rsbuild -D

yarn add @rsbuild/core storybook-html-rsbuild -D

pnpm add @rsbuild/core storybook-html-rsbuild -D

bun add @rsbuild/core storybook-html-rsbuild -D

deno add npm:@rsbuild/core npm:storybook-html-rsbuild -D

#Configure .storybook/main.ts

import { StorybookConfig } from 'storybook-html-rsbuild'
import { mergeRsbuildConfig } from '@rsbuild/core'

const config: StorybookConfig = {
  framework: 'storybook-html-rsbuild',
  stories: ['../src/**/*.stories.@(js|mjs|ts)'],
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return mergeRsbuildConfig(config, {
      // your custom 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.