Skip to content
Please note that GitHub no longer supports Internet Explorer.

We recommend upgrading to the latest Microsoft Edge, Google Chrome, or Firefox.

Learn more
Design with JSX, powered by your own component library.
TypeScript JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin fix(build): Handle build errors (#20) Nov 23, 2018
cypress feat: Add support for inserting and previewing snippets (#117) Feb 4, 2020
examples feat: Add support for inserting and previewing snippets (#117) Feb 4, 2020
images docs(readme): Add demo gif to readme (#10) Nov 14, 2018
lib feat: Add support for inserting and previewing snippets (#117) Feb 4, 2020
src feat: Add support for inserting and previewing snippets (#117) Feb 4, 2020
utils feat: Add support for inserting and previewing snippets (#117) Feb 4, 2020
.babelrc feat: Only render visible frames, avoid extra history entries (#106) Dec 18, 2019
.editorconfig Initial commit Oct 25, 2018
.eslintignore fix: Scope local storage to package name and branch name (#54) Mar 29, 2019
.eslintrc fix: Debounce code updates to improve typing performance (#102) Dec 16, 2019
.gitignore test(cypress): Add initial Cypress smoke test (#28) Nov 29, 2018
.npmrc Initial commit Oct 25, 2018
.nvmrc Initial commit Oct 25, 2018
.prettierignore feat: Isolate iframe code from parent window (#57) Apr 8, 2019
.prettierrc Initial commit Oct 25, 2018
.travis.yml fix(deps): Migrate to react-codemirror2 (#75) Jul 23, 2019
LICENSE Initial commit Oct 25, 2018
README.md feat: Add support for inserting and previewing snippets (#117) Feb 4, 2020
cypress.json fix(deps): Migrate to react-codemirror2 (#75) Jul 23, 2019
package.json feat: Add support for inserting and previewing snippets (#117) Feb 4, 2020
tsconfig.json fix(deps): Upgrade deps & support ts internally (#100) Dec 11, 2019
yarn.lock feat: Add support for inserting and previewing snippets (#117) Feb 4, 2020

README.md

Playroom

Build Status npm semantic-release Commitizen friendly


Playroom Demo

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.

Demos

SEEK Style Guide

Braid Design System (Themed)

Fannypack

Send us a PR if you'd like to be in this list!

Getting Started

$ npm install --save-dev playroom

Add the following scripts to your package.json:

{
  "scripts": {
    "playroom:start": "playroom start",
    "playroom:build": "playroom build"
  }
}

Add a playroom.config.js file to the root of your project:

module.exports = {
  components: './src/components',
  outputPath: './dist/playroom',

  // Optional:
  title: 'My Awesome Library',
  themes: './src/themes',
  snippets: './playroom/snippets.js',
  frameComponent: './playroom/FrameComponent.js',
  widths: [320, 375, 768, 1024],
  port: 9000,
  openBrowser: true,
  exampleCode: `
    <Button>
      Hello World!
    </Button>
  `,
  webpackConfig: () => ({
    // Custom webpack config goes here...
  })
};

Note: port and openBrowser options will be set to 9000 and true (respectively) by default whenever they are omitted from the config above.

Your components file is expected to export a single object or a series of named exports. For example:

export { default as Text } from '../Text'; // Re-exporting a default export
export { Button } from '../Button'; // Re-exporting a named export
// 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

Snippets

Playroom allows you to quickly insert predefined snippets of code, providing live previews across themes and viewports as you navigate the list. These snippets can be configured via a snippets file that looks like this:

export default [
  {
    group: 'Button',
    name: 'Strong',
    code: `
      <Button weight="strong">
        Button
      </Button>
    `
  },
  ...
];

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:

import React from 'react';
import ThemeProvider from '../path/to/your/ThemeProvider';

export default ({ theme, children }) => (
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
);

Theme Support

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:

export { themeA } from './themeA';
export { themeB } from './themeB';
// etc...

TypeScript Support

If a 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 .ts and .tsx files in the current working directory are included, excluding node_modules.

If you need to customise this behaviour, you can provide a typeScriptFiles option in playroom.config.js, which is an array of globs.

module.exports = {
  ...,
  typeScriptFiles: [
    'src/components/**/*.{ts,tsx}',
    '!**/node_modules'
  ]
};

License

MIT.

You can’t perform that action at this time.