Storybook for Preact with Vite

Storybook for Preact & Vite is a framework that makes it easy to develop and test UI components in isolation for Preact applications built with Vite.

Install

To install Storybook in an existing Preact project, run this command in your project's root directory:

npm create storybook@latest

You can then get started writing stories, running tests and documenting your components. For more control over the installation process, refer to the installation guide.

Requirements

Preact 8.x || 10.x
Vite ≥ 5

Run Storybook

To run Storybook for a particular project, run the following:

npm run storybook

To build Storybook, run:

npm run build-storybook

You will find the output in the configured outputDir (default is storybook-static).

FAQ

How do I manually install the Preact framework?

First, install the framework:

npm install --save-dev @storybook/preact-vite

Then, update your .storybook/main.js|ts to change the framework property:

.storybook/main.ts

import type { StorybookConfig } from '@storybook/preact-vite';
 
const config: StorybookConfig = {
  // ...
  // framework: '@storybook/preact-webpack5', 👈 Remove this
  framework: '@storybook/preact-vite', // 👈 Add this
};
 
export default config;

API

Options

You can pass an options object for additional configuration if needed:

.storybook/main.ts

import type { StorybookConfig } from '@storybook/preact-vite';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/preact-vite',
    options: {
      // ...
    },
  },
};
 
export default config;

`builder`

Type: Record<string, any>

Configure options for the framework's builder. For this framework, available options can be found in the Vite builder docs.