Trying out some integrations with React hooks, Typescript, Monaco Editor, and https://github.com/nksaraf/react-box (which integrates styled-components, styled-system, framer-motion and formik). The result is a collection of powerful primitives like a Box which allows styling and animation via props. With hooks (state, effect, and everything), we can get a svelte-like development process in a single editor window. The ability to input your own hooks (along with components, themes), allows us to create very powerful sandboxes for people to try our components along with custom functionality. Here are some of the things possible. You can go to the code links to play around with the code, the code is embedded in the URL.
React hooks https://playroom.now.sh/#?code=N4Igxg9gJgpiBc4IDsDOAXABAbUgV2XRgCcAaTVGdAYQgKOIF1MBeTAJRgEMx0A6PJQDK6LkQAUABgCUAbgA6ySGiwBLJcRgBbGIVr0SrTOOmsAfBSr7CJcfhvFzmew0wBqTAEY5ixQB4AITx0dBRnPGJUCGIWeRAABwh1BjjMFAAVLniWYHUwTR09OgcAXzNFTExM+IB6agAbVTAAa0xQzC0IADcYTC4AC24oPn8aoJCUcuRAiAAPTAAzFHQhVQAvGByAJgAWMoBNOj7NPqwMGHjMYBcSEr4-MbmpkBKgA
Animation and stlying props with @nksaraf/react-box https://playroom.now.sh/#?code=N4Igxg9gJgpiBc4IDsDOAXABAbQwQ3RgBpNUZ0BldAmAXUwF5MAlGPMdAOgFcyqaAFAB0QeEQEoA3EOQyAPACEIADxmZMANzwAnAJZ5k6VA2DBMeeJjMAbGADN0lgAyYAviQBGlm-ceYAjE4urm6uaphg3NqoENoMIgAOELqGMNoi4Umouui6KPEg2jDWBLoaMBnI6igAKngJJgLijAB8pOT8hAL4hK2Y3dS9DEwiYiCYAPyYIh4imJajEuJhVebIugC2NCY9MCst4QASxdYQmADqsdZQAITyAPRKygfIIK5AA
Data fetching with useEffect https://playroom.now.sh/#?code=N4Igxg9gJgpiBc4IDsDOAXABAbQA4QGsYBbFAGk1RnQAVCSUBdTAXkwCUYBDMdAOgCuVAMrou6GAAoAOiHQAnGDDAEIsgJQBuackhos2AJbEuAcxgUqteqWQBJE+eZtOPfkJijxU2Ru3JXXkEqAFEAMzDldElJdVYAPkxgHUxMPQxMRVQBABssNkj0MAALSQADYvR0XFR4AHo6-CIuXEM+SDqWwzqANwAmRpsUOoASYCaGZABfMvUU1Mw+dGKYZEkocS4EzA2xPgArVBRYueQFxeXV9c3tqzoiWwczKV2uPlRceUMJVD4w+RQ6AA+rAwlxcuh1Kdzu1xCVJDB5AD5LdqPdJk9zDIQBotDophQ8ENkIw8cgdAAeOzIXACdDzHpcHICGAscbEqbzFAAYWKXGQ5jZjOZMFR1gex2FLPaAiRq3QABUuPJzPwpTB1JzkHV4pTMaLUPIwGzjM8ppgdToQFMgA
Forms using Formik https://playroom.now.sh/#?code=N4Igxg9gJgpiBc4IDsDOAXABMTA3AhgDYCuMqANJgBb7JSEwDCNyA5jJgL6YC8mxqGADEIAJwC2ASwDWACmAAdZJkyTkk9JKIA1IqVTxsSlSuT5xMQwpABldDAAOVGMmvGu5dyhvEARlPRDWQBKXgA+bE4lTmCAbiUlAB4w90SASWQHYiwCEhgeYFz9ADozC24UZlp2ApZ6JhZ2bjL86xbrTAB6FOVMRIAhCAAPTDBiUVQxHmsHCDV7UQ7IQinrXzzigFYABm3rHpNMAAkYQhXsIrJS8xhOAEJUzsGhnsTupRBOIA
Custom components and hooks (older 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
Braid Design System (Themed)
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',
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:
module.exports = {
Text: require('./Text/Text'),
Button: require('./Button/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:
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:
module.exports = {
themeA: require('./themeA'),
themeB: require('./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.