Skip to content

SolidJS integration for Storybook, maintained by the community

License

Notifications You must be signed in to change notification settings

storybookjs/solidjs

Repository files navigation

Storybook SolidJS

This is a framework to allow using Storybook with SolidJS.

Feature State
JS and TS integration with Storybook cli
Fine grained updates in storybook controls
Compatible with @storybook/addon-interactions
Compatible with @storybook/test
Automatic story actions
Full props table with description in docs view mode
Code snippets generation in docs view mode
SolidJS docs in the official Storybook website

Notes about pending features ⏳

  • Automatic story actions: Feature under research. For now actions can be implemented manually by using the @storybook/addon-actions API.

  • Full props table with description in docs view mode: Feature under research. For now, props are rendered partially in the docs view table with a blank description.

  • Code snippets generation in docs view mode: Feature under research. Because solid components lack a virtual dom, a common jsx-parser doesn't work for generating a code snippet from the rendered story. For now, it outputs the original story source code. To output a more complex code implementation, you can use the render key inside a csf story definition.

  • SolidJS docs in the official Storybook website: It's still pending to add documentation about Storybook stories definitions using SolidJS.

Setup

In an existing Solid project, run npx storybook@next init (Storybook 8+ is required)

See the Storybook Docs for the best documentation on getting started with Storybook.

License

MIT License