Simultaneously design across a variety of themes and screen sizes, powered by JSX and your own component library.
Playroom allows you to create a zero-install code-oriented design environment, built into a standalone bundle that can be deployed alongside your existing design system documentation.
- Iterate on your designs in the final medium.
- Create quick mock-ups and interactive prototypes with real code.
- Exercise and evaluate the flexibility of your design system.
- Share your work with others by simply copying the URL.
Braid Design System (Themed)
Send us a PR if you'd like to be in this list!
$ npm install --save-dev playroom
Add the following scripts to your
playroom.config.js file to the root of your project:
moduleexports =components: './src/components'outputPath: './dist/playroom'// Optional:title: 'My Awesome Library'themes: './src/themes'frameComponent: './playroom/FrameComponent.js'widths: 320 375 768 1024port: 9000openBrowser: trueexampleCode: `<Button>Hello World!</Button>`// Custom webpack config goes here...;
openBrowser options will be set to
true (respectively) by default whenever they are omitted from the config above.
components file is expected to export a single object or a series of named exports. For example:
moduleexports =Text:Button:// etc...;
Now that your project is configured, you can start a local development server:
$ npm run playroom:start
To build your assets for production:
$ npm run playroom:build
Custom Frame Component
If your components need to be nested within custom provider components, you can provide a custom React component file via the
frameComponent option, which is a path to a file that exports a component. For example, if your component library has multiple themes:
If your component library has multiple themes, you can customise Playroom to render every theme simultaneously via the
themes configuration option.
Similar to your
components file, your
themes file is expected to export a single object or a series of named exports. For example:
moduleexports =themeA:themeB:// etc...;
tsconfig.json file is present in your project, static prop types are parsed using react-docgen-typescript to provide better autocompletion in the Playroom editor.
By default, all
.tsx files in the current working directory are included, excluding
If you need to customise this behaviour, you can provide a
typeScriptFiles option in
playroom.config.js, which is an array of globs.