solidjs-community
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 storybookOpen the provided URL in your browser to view your Storybook instance.
📦 Manual Installation
You can set everything up manually. To do this:
Copy the following files from storybook-solid-template to your project:
.storybook/**vitest.config.tsInstall 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- 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'sstoriesfolder)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.tsxorsrc/**/*.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