Repository files navigation

This addon enhances your Storybook experience by allowing you to interactively play with your components. It's perfect for developers looking to experiment in real time, debug issues, or build complex compositions.

To install the addon, run one of the following commands in your project directory:

yarn add -D storybook-addon-playground# ornpm install -D storybook-addon-playground

Add the addon to your Storybook configuration in.storybook/main.js or.storybook/main.ts:

constconfig={addons:[// rest of your addons ..."storybook-addon-playground",],};

The addon configuration is done through Storybook'spreview parameters.

On your.storybook/preview.ts file, you should add something similar to the following:

importMyComponentsLibraryfrom"my-components-library";importMyIconsLibraryfrom"my-icons-library";importreactDocgenOutputfrom"./react-docgen-output.json";import{generateAutocompletions}from"storybook-addon-playground";constpreview={parameters:{playground:{storyId:"playground",components:{ ...MyComponentsLibrary, ...MyIconsLibrary},autocompletions:generateAutocompletions(reactDocgenOutput),editorTheme:"light",introCode:{jsx:`<div>Welcome to my Playground!</div>`,css:""},},},};

Set up the playground environment in your Storybook stories:

import{withPlayground}from"storybook-addon-playground";exportdefault{title:"Playground",decorators:[withPlayground],};exportconstPlayground={};

To use the Playground, navigate to the Storybook UI and select a story that has the playground decorator. In your addons panel, see an interactive code editor alongside your component, where you can modify the code and immediately see your changes reflected.

Contributions are welcome! Feel free to open an issue or submit a pull request.

Install dependencies and start

yarnyarn start

Go tolocalhost:6006

Icons are generated usingsvgr.

In order to add new icons to the addon, drop the icons somewhere in the repo and run the following command:

yarn build:icons path/to/your/icons

Rollup is used to build the addon for publishing.

Vite serves the build to a local Storybook for testing and dev purposes.