npmpackage.info

playroom

Design with JSX, powered by your own component library.

0.39.1

4,504

MIT

TypeScript

2.01 MB

9,303,166 4.6

Installations

npm install playroom

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=18.12.0

Node Version

18.19.1

NPM Version

10.2.4 Score

64.1

Supply Chain

69.3

Quality

Maintenance

100

Vulnerability

93.9

License

Pull Requests

Open

13

Total

252

Closed

29

Merged

210

Issues

Open

32

Total

137

Closed

105

Releases

104

v0.39.1

Updated on Nov 06, 2024

v0.39.0

Updated on Oct 10, 2024

v0.38.1

Updated on Sep 02, 2024

v0.38.0

Updated on Jun 11, 2024

v0.37.1

Updated on Apr 04, 2024

v0.37.0

Updated on Mar 07, 2024

View All 104 releases

Contributors

View All 49 Contributors

Languages

TypeScript

JavaScript

Shell

TypeScript (90.2%)

JavaScript (9.78%)

Shell (0.02%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

seek-oss

Download Statistics

Total Downloads

9,303,166

Last Day

5,176

Last Week

77,339

Last Month

273,324

Last Year

2,403,839

GitHub Statistics

MIT License

4,504 Stars

224 Commits

187 Forks

45 Watchers

23 Branches

49 Contributors

Updated on Feb 18, 2025

Maintainers

Package Meta Information

Latest Version

0.39.1

Package Id

playroom@0.39.1

Unpacked Size

2.01 MB

Size

1.75 MB

File Count

127

NPM Version

10.2.4

Node Version

18.19.1

Published on

Nov 06, 2024

Total Downloads

Cumulative downloads

Total Downloads

9,303,166

Last Day

22.4%

5,176

Compared to previous day

Last Week

16.1%

77,339

Compared to previous week

Last Month

4.2%

273,324

Compared to previous month

Last Year

-10%

2,403,839

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

react react-dom

Dev Dependencies

@actions/core @changesets/cli @octokit/rest @testing-library/cypress @types/jest @types/react-helmet @types/react-transition-group concurrently cypress eslint eslint-config-seek husky jest lint-staged react react-dom serve start-server-and-test surge

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

Braid Design System (Themed)

Bumbag

Overdrive

Cubes (Themed)

Mesh Design System (Themed)

Mística Design System (Themed)

Shopify Polaris

Agriculture Design System

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

Getting Started

1$ npm install --save-dev playroom

Add the following scripts to your package.json:

1{
2  "scripts": {
3    "playroom:start": "playroom start",
4    "playroom:build": "playroom build"
5  }
6}

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

1module.exports = {
2  components: './src/components',
3  outputPath: './dist/playroom',
4
5  // Optional:
6  title: 'My Awesome Library',
7  themes: './src/themes',
8  snippets: './playroom/snippets.js',
9  frameComponent: './playroom/FrameComponent.js',
10  scope: './playroom/useScope.js',
11  widths: [320, 768, 1024],
12  port: 9000,
13  openBrowser: true,
14  paramType: 'search', // default is 'hash'
15  exampleCode: `
16    <Button>
17      Hello World!
18    </Button>
19  `,
20  baseUrl: '/playroom/',
21  webpackConfig: () => ({
22    // Custom webpack config goes here...
23  }),
24  iframeSandbox: 'allow-scripts',
25  defaultVisibleWidths: [
26    // subset of widths to display on first load
27  ],
28  defaultVisibleThemes: [
29    // subset of themes to display on first load
30  ],
31};

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:

1export { default as Text } from '../Text'; // Re-exporting a default export
2export { Button } from '../Button'; // Re-exporting a named export
3// etc...

The iframeSandbox option can be used to set the sandbox attribute on Playroom's iframe. A minimum of allow-scripts is required for Playroom to work.

Now that your project is configured, you can start a local development server:

1$ npm run playroom:start

To build your assets for production:

1$ 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:

1export default [
2  {
3    group: 'Button',
4    name: 'Strong',
5    code: `
6      <Button weight="strong">
7        Button
8      </Button>
9    `,
10  },
11  // etc...
12];

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:

1import React from 'react';
2import { ThemeProvider } from '../path/to/your/theming-system';
3
4export default function FrameComponent({ theme, children }) {
5  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
6}

Custom Scope

You can provide extra variables within the scope of your JSX via the scope option, which is a path to a file that exports a useScope Hook that returns a scope object. For example, if you wanted to expose a context-based theme variable to consumers of your Playroom:

1import { useTheme } from '../path/to/your/theming-system';
2
3export default function useScope() {
4  return {
5    theme: useTheme(),
6  };

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:

1export { themeA } from './themeA';
2export { themeB } from './themeB';
3// 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.

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

If you need to customise the parser options, you can provide a reactDocgenTypescriptConfig option in playroom.config.js.

For example:

1module.exports = {
2  // ...
3  reactDocgenTypescriptConfig: {
4    propFilter: (prop, component) => {
5      // ...
6    },
7  },
8};

ESM Support

Playroom supports loading ESM configuration files. By default, Playroom will look for a playroom config file with either a .js, .mjs or .cjs file extension.

Storybook Integration

If you are interested in integrating Playroom into Storybook, check out storybook-addon-playroom.

Browser Support

Playroom is built to work on the latest stable versions of all major browsers. Some features may not work as expected in older browsers.

License

MIT.

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-site.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/preview-site.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/preview-site.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/preview-site.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-site.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/preview-site.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/snapshot.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/snapshot.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/snapshot.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/snapshot.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/snapshot.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/snapshot.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/snapshot.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/snapshot.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/validate.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/validate.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/validate.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/validate.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/validate.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/playroom/validate.yml/master?enable=pin
Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.6

/10

Last Scanned on 2025-02-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to playroom

@design-systems/playroom

4.15.4

The playroom command for @design-systems-cli

@musical-patterns/playroom

1.0.426

The web-based UI for playing (with) the patterns. Just call `setupPlayroom` with whichever patterns you want.

@musical-patterns/pattern-playroom-test

1.0.257

just enough for the interface to be tested

@compositive/artifact-playroom

0.1.0-alpha.4

Compositive CLI plugin to integrate with Playroom.