@kachurun/storybook-solid-vite NPM

Storybook for SolidJS

Community supported Storybook framework adapter for SolidJS, using Vite as the bundler.

📋 Table of Contents

✨ Features

Fast Vite-powered — Lightning-fast Storybook experience using Vite.
SolidJS Native — Out-of-the-box support for Solid components and JSX.
Latest Storybook Support — Built for and tested with the newest Storybook version.
TypeScript-First — Full TypeScript support for your components and stories.
Addon Ecosystem — Works with popular Storybook addons (Docs, Controls, Actions, Links, etc.).
ArgTypes from TypeScript — Prop tables and controls generated directly from your TypeScript types.
Integrated Testing — Built-in support for component and story testing with Vitest and Playwright.
Hot Reload — Instant updates as you edit components, powered by Vite.
MDX & Docs — Write rich documentation alongside your stories using MDX.
Accessibility (a11y) — Built-in accessibility checks for your components.

🚀 Getting Started

The fastest way to start using Storybook with SolidJS:

npx create-solid-storybook <folder-name>

Replace <folder-name> with your desired project directory name. This will generate a SolidJS project pre-configured with Storybook 9 and all essential addons.

Then run:

cd <folder-name>
npm run storybook

Open the provided URL in your browser to view your Storybook instance.

📦 Manual Installation

You can set everything up manually. To do this: 1. Copy the following files from storybook-solid-template to your project:

.storybook/**
vitest.config.ts

Install the required dependencies:

npm install storybook @kachurun/storybook-solid-vite @chromatic-com/storybook @storybook/addon-onboarding @storybook/addon-docs @storybook/addon-a11y @storybook/addon-links @storybook/addon-vitest @vitest/coverage-v8 playwright vitest @vitest/browser

Add the necessary scripts to your package.json:

"scripts": {
  "build": "storybook build",
  "storybook": "storybook dev -p 6006"
}

Create your stories in stories/ (or use examples from the template's stories folder)
Start Storybook:

npm run storybook

⚙️ Configuration

You can customize Vite and Storybook as usual. For advanced configuration, see the Storybook Vite docs.
Add your stories in src/**/*.stories.tsx or src/**/*.stories.js.
Use Storybook Addons for extra features.