{"id":15207227,"url":"https://github.com/formidablelabs/component-playground","last_synced_at":"2025-10-02T23:35:54.188Z","repository":{"id":31199291,"uuid":"34760072","full_name":"FormidableLabs/component-playground","owner":"FormidableLabs","description":"A component for rendering React components with editable source and live preview","archived":true,"fork":false,"pushed_at":"2022-02-11T05:56:46.000Z","size":15577,"stargazers_count":1192,"open_issues_count":40,"forks_count":108,"subscribers_count":80,"default_branch":"master","last_synced_at":"2025-01-08T21:43:45.523Z","etag":null,"topics":["component-playground","javascript","jsx","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FormidableLabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-28T22:50:29.000Z","updated_at":"2024-12-18T12:01:01.000Z","dependencies_parsed_at":"2022-09-18T00:42:02.786Z","dependency_job_id":null,"html_url":"https://github.com/FormidableLabs/component-playground","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fcomponent-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fcomponent-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fcomponent-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fcomponent-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FormidableLabs","download_url":"https://codeload.github.com/FormidableLabs/component-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235051627,"owners_count":18928190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-playground","javascript","jsx","react"],"created_at":"2024-09-28T06:23:54.081Z","updated_at":"2025-10-02T23:35:48.875Z","avatar_url":"https://github.com/FormidableLabs.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.org/FormidableLabs/component-playground.svg?branch=master)](https://travis-ci.org/FormidableLabs/component-playground)\n![](https://badge-size.herokuapp.com/FormidableLabs/component-playground/master/dist/component-playground.min.js?compression=gzip)\n[![Maintenance Status][maintenance-image]](#maintenance-status)\n\n# component-playground\nA component for rendering React Components and ES6 code with editable source and live preview\n\n![Component Playground](http://i.imgur.com/se3avpr.png)\n\n### Installation\n\n```sh\nnpm install component-playground\n```\n\n### Set up\n\nIn the head of your html document, either add the css files from the demo or from a CDN like:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css\"/\u003e\n\u003clink rel=\"stylesheet\" href=\"//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/monokai.min.css\"/\u003e\n```\n\nIn your JSX, require the component and use it like this:\n\n```javascript\n'use strict';\n\nvar React = require('react/addons');\nvar ReactDOM = require('react-dom');\nvar Playground = require('component-playground');\nvar Button = require('./components/button');\n\nvar componentExample = require(\"raw!./examples/component.example\");\n\nvar Index = React.createClass({\n  render() {\n    return (\n      \u003cdiv className=\"component-documentation\"\u003e\n        \u003cPlayground codeText={componentExample} scope={{React: React, Button: Button}}/\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n\nReactDOM.render(\u003cIndex/\u003e, document.getElementById('root'));\n```\n\n### Props\n\n#### `codeText`\n_React.PropTypes.string.isRequired_\n\n`codeText` takes a string of JSX markup as its value. While you can just pass it a string, I find it is easier to make a separate file and use Webpack's raw loader to load in the raw source. In the example above I use the .example extension, and an examples folder to organize my samples.\n\nAn example file would look like:\n\n```js\n\u003cButton style={{background: '#3498db'}}\u003eHi\u003c/Button\u003e\n```\n\n#### scope\n_React.PropTypes.object.isRequired_\n\nWhen evaluating the JSX, it needs to be provided a scope object. At the very least, React needs to be provided to the scope, if any custom tags aren't being used. See below:\n\n```js\n\u003cPlayground codeText={componentExample} scope={{React: React}}/\u003e\n```\n\nAny module/component that is used inside the playground needs to be added to the scope object. See `/demo` for an example of how this works.\n\n### theme\n_React.PropTypes.string_\n\nString specifying which CodeMirror theme to initialize with. Defaults to 'monokai'.\n\n### collapsableCode\n_React.PropTypes.bool_\n\nAllows the user to collapse the code block.\n\n```js\n\u003cPlayground collapsableCode={true} codeText={componentExample} scope={{React: React}}/\u003e\n```\n\n### initiallyExpanded\n_React.PropTypes.bool_\n\nMakes collapsable code block initially expanded.\n\n```js\n\u003cPlayground\n  collapsableCode={true}\n  initiallyExpanded={true}\n  codeText={componentExample}\n  scope={{React: React}}/\u003e\n```\n\n### docClass\n_React.PropTypes.node_\n\nA component class that will be used to auto-generate docs based on that component's `propTypes`. See `propDescriptionMap` below for how to annotate the generate prop docs.\n\n```js\n\u003cPlayground docClass={MyComponent} codeText={componentExample} scope={{React: React}}/\u003e\n```\n\n### propDescriptionMap\n_React.PropTypes.string_\n\nAnnotation map for the docClass. The key is the prop to annotate, the value is the description of that prop.\n\n```js\n\u003cPlayground\n  docClass={MyComponent}\n  propDescriptionMap={{\n    collapsableCode: \"Allows the user to collapse the code block\"\n  }}\n  codeText={componentExample}\n  scope={{React: React}}/\u003e\n```\n\n### es6Console\n_React.PropTypes.bool_\n\nTurns preview into a simple console for testing out ES6 code. Use `console.log()` in the playground to generate output.\n\n```js\n\u003cPlayground\n  es6Console={true}\n  codeText={es6Example} /\u003e\n```\n\n### noRender\n_React.PropTypes.bool_\n\nDefaults to true. If set to false, allows you bypass the `component-playground`'s component wrapper and render method.\nYou can use this option to write higher order components directly in your example code and use your\nown Render method.\nNOTE: This option **requires** that the `React.render` method be in your code\n\n```js\nvar ComponentExample = React.createClass({\n  render: function() {\n    return (\n        \u003cp\u003eHi\u003c/p\u003e\n    )\n  }\n});\n\nReact.render(\u003cComponentExample/\u003e, mountNode);\n```\n\n### Comparison to [react-live](https://github.com/FormidableLabs/react-live)\n\nThere are multiple options when it comes to live, editable React component environments. Formidable actually has **two** first class projects to help you out: [`component-playground`](https://github.com/FormidableLabs/component-playground) and [`react-live`](https://github.com/FormidableLabs/react-live). Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you.\n\nHere's a high-level decision tree:\n\n- If you want **fast and easy** setup and integration, then `component-playground` may be the ticket!\n- If you want **a smaller bundle**, **SSR**, and **more flexibility**, then `react-live` is for you!\n\nHere are the various factors at play:\n\n- **Build**: `component-playground` uses `babel-standalone`, `react-live` uses `bublé`. (_Note_: `react-live` might make transpiler customizable in the future).\n- **Bundle size**: `component-playground` has a larger bundle, but uses a more familiar editor setup. `react-live` is smaller, but more customized editor around `prism`.\n- **Ease vs. flexibility**: `react-live` is more modular/customizable, while `component-playground` is easier/faster to set up.\n- **SSR**: `component-playground` is not server-side renderable, `react-live` is.\n- **Extra features**: `component-playground` supports raw evaluation and pretty-printed output out-of-the-box, while `react-live` does not.\n- **Error handling**: `component-playground` might have more predictable error handling than `react-live` in some cases (due to `react-dom`, although this might change with React 16).\n\n## Maintenance Status\n\n **Archived:** This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!\n\n[maintenance-image]: https://img.shields.io/badge/maintenance-archived-red.svg\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Fcomponent-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformidablelabs%2Fcomponent-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Fcomponent-playground/lists"}