Storybook for SolidJS

Storybook framework adapter for SolidJS, using Vite.

Adds SolidJS support to Storybook.

✨ Features

SolidJS support out of the box
Vite-powered builder
TypeScript-first setup
ArgTypes generation from TypeScript
Compatible with Storybook addons
Integrated testing (Vitest, Playwright)

🚀 Getting Started

Run in your project:

npx create-storybook --type=solid

Then start Storybook:

bun run storybook

Open the URL shown in the terminal.

⚙️ Configuration

You can customize Vite and Storybook as usual.

Add stories in src/**/*.stories.tsx or src/**/*.stories.js
Use Storybook addons for additional functionality

TypeScript docgen

TypeScript props for docs and controls are generated with @joshwooding/vite-plugin-react-docgen-typescript.

Configure it with framework.options.docgen in .storybook/main.ts.

false — disable docgen true (default) — enable docgen with the default configuration object — override default configuration

import type { StorybookConfig } from 'storybook-solidjs-vite';

const config: StorybookConfig = {
  framework: {
    name: 'storybook-solidjs-vite',
    options: {
      docgen: {
        savePropValueAsString: true,
        shouldExtractLiteralValuesFromEnum: true,
        propFilter: (prop: any) =>
          prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
      },
    },
  },
};

export default config;

🎨 Decorators

Storybook re-executes decorator and story code on updates (e.g. args, globals). SolidJS uses fine-grained reactivity and does not require re-running component functions.

This mismatch can cause duplicate DOM elements when decorators return JSX.

createJSXDecorator

Use for decorators that return JSX. Ensures they run only once.

import { createJSXDecorator } from 'storybook-solidjs-vite';

export const decorator = createJSXDecorator((Story) => {
  return (
    <main>
      <Story />
    </main>
  );
});

createDecorator

Use for decorators that do not return JSX.

import { createDecorator } from 'storybook-solidjs-vite';

export const decorator = createDecorator((Story) => {
  return Story();
});

Manual flag

import { IS_SOLID_JSX_FLAG } from 'storybook-solidjs-vite';

export const decorator = (Story) => {
  return <div><Story /></div>;
};

decorator[IS_SOLID_JSX_FLAG] = true;

🔄 Migration from v9

Check out Migration Guide for the instructions and breaking changes.

🤝 Contributing

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

📖 License

MIT

👤 Maintainer

Maintained with ❤️ by @kachurun

Made by

shilman
kachurun
jer3m01