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:

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

export default {
  title: 'Button',
  component: Button,
  parameters: {
    playroom: {
      // Use predefined code instead of story source on all Button stories
      code: '<Button>Hello Button</Button>',
    },
  },
}

export const Large = {
  args: {
    size: 'large',
  },
  parameters: {
    playroom: {
      // Disable addon in Button/Large story only
      disable: true,
    },
  },
}

Note: Disabling the addon does not hide the Playroom tab. For that, you must use Storybook's own previewTabs parameter:

// Button.stories.js

export const Large = {
  parameters: {
    playroom: {
      disable: true,
    },
    previewTabs: {
      // Hide Playroom tab
      'storybook/playroom/tab': {
        hidden: true,
      },
    },
  },
}

FAQ

Why does my generated Playroom code contain nonsensical component names?

If you see mangled component names like <O /> instead of <Card />, you may need to customize Storybook's Vite setup and disable minification:

// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
  async viteFinal(config) {
    return mergeConfig(config, {
      build: {
        // Disable minification
        minify: false,
      },
    })
  },
}