🧩 Design with Playroom inside Storybook, using each story source as a starting point.
Note: Playroom must be set up and running before using this addon, see instructions.
npm install --save-dev storybook-addon-playroom
// .storybook/main.js
export default {
addons: ['storybook-addon-playroom'],
}
The addon can be configured via the playroom
parameter. The following options are available:
Option | Type | Description | Default |
---|---|---|---|
url |
string |
the Playroom URL | http://localhost:9000 |
code |
string |
code to be used instead of story source | |
disable |
boolean |
whether to disable the addon | false |
includeDecorators |
boolean |
whether to include global decorators in stories code | false |
reactElementToJSXStringOptions |
object |
react-element-to-jsx-string options | { sortProps: false } |
To configure for all stories, set the playroom
parameter in .storybook/preview.js
:
export const parameters = {
playroom: {
url: 'http://localhost:9000',
},
}
You can also configure on per-story or per-component basis using parameter inheritance:
// Button.stories.js
// Use predefined code instead of story source in all Button stories
export default {
title: 'Button',
parameters: {
playroom: {
code: '<Button>Hello Button</Button>',
},
},
}
// Disable addon in Button/Large story only
export const Large = Template.bind({})
Large.parameters = {
playroom: {
disable: true,
},
}
Note: Disabling the addon does not hide the Playroom tab from preview. For that, you must use Storybook's own
previewTabs
parameter:
Story.parameters = {
previewTabs: {
'storybook/playroom/panel': {
hidden: true,
},
},
}
Note: This is an experimental feature.
Playroom addon comes with a sb-playroom
CLI tool that can auto-generate Playroom snippets from Storybook stories via the gen-snippets
command:
$ sb-playroom gen-snippets --help
Usage: sb-playroom gen-snippets [options] [config-dir]
generate Playroom snippets from stories (experimental)
Options:
-o, --out-file <path> output file (default: "snippets.json")
-c, --config-file <path> Babel config file
-h, --help display help for command
By default, gen-snippets
will fetch the Storybook configuration from the .storybook
directory and output the snippets to a snippets.json
file. Different input and output paths can be passed as arguments.
You can then reference the output file in playroom.config.js
.
Because Playroom addon programmatically runs Storybook to collect story sources, Babel is used to compile stories on the fly. If the loaded Babel configuration does not work with your Storybook, a Babel config file can be defined with the -c, --config-file
option.