Need help with storybook-addon-playroom?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

rbardini
130 Stars 7 Forks MIT License 17 Commits 4 Opened issues

Description

Design with Playroom inside Storybook, using each story source as a starting point

Services available

!
?

Need anything else?

Contributors list

# 135,989
CSS
Shell
Vue.js
e2e
16 commits
# 49,593
PHP
WordPre...
Compose...
HTML
1 commit

Storybook Playroom Addon

npm package version Build status Dependencies status devDependencies status

Design with Playroom inside Storybook, using each story source as a starting point.

Live demo

Demo

Installation

npm install --save-dev storybook-addon-playroom

within

.storybook/main.js
:

module.exports = {
  addons: ['storybook-addon-playroom'],
};

See

example
for a minimal working setup.

Configuration

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
| |
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: 'Hello 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,
    },
  },
};

Generating Playroom snippets from stories

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 output file (default: "snippets.json") -c, --config-file 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
.

Babel configuration

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.