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