Storybook for SolidJS

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

---

📋 Table of Contents

• Features
• Installation
• Quick Start
• Configuration
• Contributing
• License
• Maintainer

---

✨ 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

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

3. Add the necessary scripts to your package.json:

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

4. Create your stories in stories/ (or use examples from the template's stories folder)

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

---

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to open an issue or submit a PR.

---

👤 Maintainer

Maintained with ❤️ by @kachurun

---

📖 License

MIT