Storybook Playroom Addon

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

View demo →

Getting started

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'],
}

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
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,
    },
  },
}

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 <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.

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.