Docs
Storybook Docs

Storybook for Preact & 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. It includes:

  • 🏎️ Pre-bundled for performance
  • πŸͺ„ Zero config
  • πŸ’« and more!

Requirements

  • Preact 8.x || 10.x
  • Vite β‰₯ 4.0
  • Storybook β‰₯ 8.0

Getting started

In a project without Storybook

Follow the prompts after running this command in your Preact project's root directory:

npm create storybook@latest

More on getting started with Storybook.

In a project with Storybook

This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:

npx storybook@latest upgrade

Automatic migration

When running the upgrade command above, you should get a prompt asking you to migrate to @storybook/preact-vite, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.

Manual migration

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 { 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.