Playroom

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

View on Github

Storybook Playroom Addon

npm package version Build status Dependencies 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
// .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,
      },
    })
  },
}