close
Guide
Storybook
Rsbuild
Guide
Storybook
Rsbuild

Web Components

Storybook for Web Components & Rsbuild is tailored for Lit and custom-element projects, giving you fast component previews without leaving your Rsbuild workflow.

Requirements
  • lit ≥ 2 (or ≥ 3)
  • @rsbuild/core ≥ 1.0.1
  • storybook ≥ 9.0.0

Getting started

Run through these steps inside an Rsbuild project that renders Web Components.

Installation

Install the Web Components framework package.

npm
yarn
pnpm
bun
npm install storybook-web-components-rsbuild -D

Configure .storybook/main.ts

import { StorybookConfig } from 'storybook-web-components-rsbuild'

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

export default config

You're good to go! See the web components sandbox for a complete reference and browse the Storybook docs for deeper guidance.

Options

Consult types.ts for every configuration option exposed by the framework.