Storybook Playroom Addon

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

Live 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:

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.