Playroom
Design with Playroom inside Storybook, using each story source as a starting point
npm install storybook-addon-playroom
3.7k
Downloads per week

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.

Demo

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

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