Join us live: How we cut bloat in Storybook

SolidJS integration with Storybook

View on Github

Storybook for SolidJS

Storybook SolidJS Vite

npm version npm downloads MIT License PRs Welcome

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
  1. Install the required dependencies:
npm install storybook storybook-solidjs-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
  1. Add the necessary scripts to your package.json:
"scripts": {
  "build": "storybook build",
  "storybook": "storybook dev -p 6006"
}
  1. Create your stories in stories/ (or use examples from the template's stories folder)

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