{"id":13452048,"url":"https://github.com/seek-oss/playroom","last_synced_at":"2026-02-15T23:16:45.404Z","repository":{"id":33214007,"uuid":"155168071","full_name":"seek-oss/playroom","owner":"seek-oss","description":"Design with JSX, powered by your own component library.","archived":false,"fork":false,"pushed_at":"2026-02-13T03:37:52.000Z","size":6286,"stargazers_count":4557,"open_issues_count":41,"forks_count":188,"subscribers_count":43,"default_branch":"master","last_synced_at":"2026-02-13T10:06:17.126Z","etag":null,"topics":["design","design-systems","front-end","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/seek-oss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-10-29T07:14:53.000Z","updated_at":"2026-02-12T15:03:35.000Z","dependencies_parsed_at":"2023-01-14T23:56:23.901Z","dependency_job_id":"e2d40028-841a-408a-9de7-b6803d73b067","html_url":"https://github.com/seek-oss/playroom","commit_stats":{"total_commits":221,"total_committers":45,"mean_commits":4.911111111111111,"dds":0.7963800904977376,"last_synced_commit":"6095dc427d10e29a18607dd5353509c6f3a807be"},"previous_names":[],"tags_count":123,"template":false,"template_full_name":null,"purl":"pkg:github/seek-oss/playroom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fplayroom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fplayroom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fplayroom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fplayroom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seek-oss","download_url":"https://codeload.github.com/seek-oss/playroom/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fplayroom/sbom","scorecard":{"id":346934,"data":{"date":"2025-08-11","repo":{"name":"github.com/seek-oss/playroom","commit":"e1e7895fe850ee8ad4528ac31b8d4e8c4e9fb5f3"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.8,"checks":[{"name":"Code-Review","score":10,"reason":"all changesets reviewed","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/preview-site.yml:1","Warn: no topLevel permission defined: .github/workflows/release.yml:1","Warn: no topLevel permission defined: .github/workflows/snapshot.yml:1","Warn: no topLevel permission defined: .github/workflows/validate.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":0,"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"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"16 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-xffm-g5w8-qvg7","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T07:16:41.095Z","repository_id":33214007,"created_at":"2025-08-18T07:16:41.095Z","updated_at":"2025-08-18T07:16:41.095Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29492044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T19:29:10.908Z","status":"ssl_error","status_checked_at":"2026-02-15T19:29:10.419Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["design","design-systems","front-end","react"],"created_at":"2024-07-31T07:01:11.240Z","updated_at":"2026-02-15T23:16:45.398Z","avatar_url":"https://github.com/seek-oss.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Other","Tools","Performance testing and monitoring","JavaScript","🌐 Web Development - Frontend"],"sub_categories":["Front-End","Server-rendered React"],"readme":"[![npm](https://img.shields.io/npm/v/playroom.svg?style=for-the-badge)](https://www.npmjs.com/package/playroom) [![Build Status](https://img.shields.io/github/actions/workflow/status/seek-oss/playroom/validate.yml?branch=master\u0026style=for-the-badge)](https://github.com/seek-oss/playroom/actions?query=workflow%3AValidate+branch%3Amaster)\n\n\u003cimg src=\"images/logo.png\" alt=\"Playroom\" title=\"Playroom\" height=\"80\" /\u003e\n\n\u003cbr/\u003e\n\nSimultaneously design across a variety of themes and screen sizes, powered by JSX and your own component library.\n\nPlayroom 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.\n\n- Iterate on your designs in the final medium.\n- Create quick mock-ups and interactive prototypes with real code.\n- Exercise and evaluate the flexibility of your design system.\n- Share your work with others by simply copying the URL.\n\n## Demos\n\n[Braid Design System](https://seek-oss.github.io/braid-design-system/playroom/#?code=N4Igxg9gJgpiBcIA8BBANjATgFwATYgDsYBeAHRAEtCAzCCgPiQBUYAPbBgdRjUgFsY%2BCLgAKaAIYBPTBAj8AhEgD0rDk2XosnEABoQ2ABYxBAZwQBtEBIAOEsCAC6%2BgO6UoR8-AsB2AGwAHI4AvkA) (Themed)\n\n[Cubes](https://cubes.trampoline.cx/) (Themed)\n\n[Mesh Design System](https://www.meshdesignsystem.com/playroom/) (Themed)\n\n[Mística Design System](https://mistica-web.vercel.app/playroom) (Themed)\n\n[Shopify Polaris](https://polaris.shopify.com/sandbox?code=N4Igxg9gJgpiBcIA8BhAhgJygHQHYAJ8BnGSXKTATwDEIIAXGDAQTHoEsJciBeYAbWBlGuevHwByACLsiAW1lEJAXwC6yvIQAOGdnKq0GTVhy58hXEWMkBRAB5aIGevgBKMR85UbcAPk34qJhQAHQAEjBosBj4aGyc3HyC%2BMIwouISACoMaAA2%2BADKeTBK%2BGrK%2BBz0uTA82CBFNUT1-gSEgQAKEI4AbkwB7bHxfXwAZnkkPoOEcRw9aPROfAPTSABCAK70iwRQsmC5EEQbGDD4Wrlo7H4r0-gAauwwAO6Fxc1td0gA9JvbXK07lNplwUIcSHwABQASnwPF8%2BGAymBhEBqxMCQAMrIXOxGHJeAILKI0tYJABxDBHIhvJoqAA0iNS6UkADkYC5GiUVOp8N80YQfl1ekw0T90FhwpFomKJaECqRTDdPoFMjA7PQUJYrrhRbd8ABNCAbFJoAgbEjEd74U6eeg0xbEGBna6jJz6JWxABGxpclGNMTAFsWciYREAmAT6pzRGletAkKD4LgpXSMXRoYgbMAAC1iNKI1ogfRiHFDjK9lBS2bNutyjKc%2BAr%2BqI9DQo1GIRWPzVGq1oh1era4uCIQV8QBASCkrHnqqNTqIGyrfyXJpa1OaAA1lAIM9cC0u%2B4iAGwDBsS39adjydT6y0KHzERrgBzDaXDAZAs1CSMi4nPKfu83j6niMAEkk%2BqEMAkHtF%2BJQZAA8lgYY-jBMxyMaLISAAqgUUgACQAAwhIRhGoSqdwnLkGS2k49rfNGKH0jByjMRR7TQexgxwUQGTuPQJzcORdyDPemFkgAtLhBEAEwAKzEaRwkiYQVE0R4dFEN8pwCRgQlsSprH6uol5pNEACS%2BJQqBciwvCiIwWQLaIjxjJiRsoiMlRFQ8PgNkANwwTpgn4JCaGBEeJ5njiISWWB4WqRguR8N5CVDKeRBPl67C5HilCYmgXowMlwAAAaPC8tIlPgboxPhwA8copUoip%2BACq1SAFK2YCbu1rWBF1cSbrF%2BI1TluS%2BA17zKD8g09SNYF9R1c3DXFciTe5ogzd8K0LetaWzd1vXhT8kU3tFLZ7UthDQoF7HIvq-KTt8cqjoqCSyiOM4JJUeLzvUUiRMMCwwImtHOM0ICZl6UAbKD7VIOe9BLYjMVrb4HRoP6WxED8SNXfqqOXejS55FVa6Vig1a4LWeNo-iCPfEjYovV970TkOr3fcmc61PUrJGAeKpID2mratcg53Jk2ZnDxNoaRDsSnLE8w5YVNRJrguSVuwoz4NjMQtk4Lo0jzMuFNm3S65Q%2BoXGaSYxNm7DPjLGCdsL3yi32rYSxgLNc%2BzyrDlgvggPSID0DLoZEAg-AgIcYDFPAaQgKo4fPOwUCRzH8D8OoQA)\n\n[Agriculture Design System](https://design-system.agriculture.gov.au/playroom/#?code=N4Igxg9gJgpiBcIA8AhCAPABFAhgJwGsA%2BAHQDtNMkAJGHWPTAIxzAIHM8IBXMqAXhIgm0AJ4BBADYAXIZkkR2EfsCQAZRREwB6IgF9MACzpQAlmXaCQAUXQAHCHmmYAyjDwA3U2Bhzd5SiQAWRxzADkcDwDKTFNpGABbAGcVAG1geRwmGEl4TCFqCATfEAAaIzwYADM8oW05PQBdPWjKJJhIPnxRAEl45LSMySyc2pAXU3YKcyFymD5rSUT56TykcQ8caXwezp0iTCaWin3yJG00dFIyJAAFHHYYAGEIMni3zBwUoQTQsiFroFblx2oCYkhDABGIj3R5GEzmdjnKFgwJ2VExDSVBKxOxJbg4qAQBSMJJxT7FaTlTrtMDxaTcRj0Ux2UxJMCIzA5OIAOkwtxySzeMCSAEduDBPrITjFPngwNwuUtTFV5lByps8KZuEkuWRTDiyK85srVXxMPqmIY%2BQBFbhs8WS1iZDn6nBK3mtGIAeXlpkwmu1urIWwgjswdnmW1MTB1XOcvymbOwybs%2BAZWpWmASr3iSXKIfZMAzXsoWrMCskcYSOr5PWFj1JPiWWrFEql8km3GGmH6DkYORgKrVfIAaiLpDHuwTSwHidxpGmqdhiY4uYq8AvNziaTBxVtypIY%2B4tAArHXSLTDV2md2XpyOcqmKCzwNx%2B-3z7CzBk5w4SkWmykh8uI8x0BQWzYPaKb-nyTx4F8nyduw3bujgs44N%2BOBHvuOLXuYt58gAqs4RIkpguHlJwkTPu6MCKlA0Himy5Q5ksSSTr4MoxPhboriSfIAGI6j4LrVqY5R2IY%2BDFgh2bEhOpiSh%2Ba70eUVQEbGSSzrxt6dtkXA8l65zosZpncZQLg6pGfBsu0mCqtw7C3s4eCGK8Cq6omIZKkOZpQJ8OHcLBmBBI4TD%2BvRbI5gFMDoLOnSbJIR66l4HjuHJg7DnwfJhN2ww4ulkgOZpcZHgZEB8iEHRRrqSxaO0CSlAlry0vSjI-uS-7Fri%2BKFTk1JFDFWj9tIk6frhuX5f%2B%2BknrOZDTdSjL4rqd6MqyurFuU00JJAeCRowCgiE4yaUrWmBSKYuGBVdwUJLOSTQNhIrZs9%2BL0DgfK3NJ7TJXGv4Uj15UnpgC4WtNEaONsmCOCGlR1v8Fkes4Sx0jqT6sN2yY9R486LpBMCPMufZrrDMlciCCPxHgjE4sWs6-OxwW4A53WrWAX7xL1BIRlqCTJuYrPcByWl8lZSQ2WYST2Y9uDsQzxZxsxqXdnYC5bJKiXYSlVXhf6nQoZKqMMptROvdL7oaZaOo6cLJtfYKKwiuGfZxox-pFZ8dtrjte0HUZ3EmWC5zAhAoJnNosLPLmKzXKgGDYPgxDREggkQBA1PMKwHBcLwAhCCIUASDIALGSGHhyreAC0wzZJIVhVOn1Ol0j6jmAQahstKsqyu5WoAF65ths6UEeZAECkwCpCPMQZIYlQ1PkIAAMSzJkddjIUxQNM1SOynPC9jKvZTr6MS8ACruMkX4BZ0ZiTq1O8z5QB-VEfa%2B12fQjAqYmxgKIkMjz-yfnvWeFQ35L2PoeEYuQl7iEwJUbWACFAWE7OPXscQlggJ7jEZos5-CB20OXYO2g04Z3cHHC4GBrggD0EAA)\n\nSend us a PR if you'd like to be in this list!\n\n## Getting Started\n\n```bash\n$ npm install --save-dev playroom\n```\n\nAdd the following scripts to your `package.json`:\n\n```json\n{\n  \"scripts\": {\n    \"playroom:start\": \"playroom start\",\n    \"playroom:build\": \"playroom build\"\n  }\n}\n```\n\nAdd a `playroom.config.js` file to the root of your project:\n\n```js\nmodule.exports = {\n  components: './src/components',\n  outputPath: './dist/playroom',\n\n  // Optional:\n  title: 'My Awesome Library',\n  themes: './src/themes',\n  widths: [320, 768, 1024],\n  snippets: './playroom/snippets.js',\n  frameComponent: './playroom/FrameComponent.js',\n  exampleCode: `\n    \u003cButton\u003e\n      Hello World!\n    \u003c/Button\u003e\n  `,\n  cwd: './playroom',\n  scope: './playroom/useScope.js',\n  port: 9000,\n  openBrowser: true,\n  paramType: 'search', // default is 'hash'\n  baseUrl: '/playroom/',\n  webpackConfig: () =\u003e ({\n    // Custom webpack config goes here...\n  }),\n  iframeSandbox: 'allow-scripts',\n  defaultVisibleWidths: [\n    // subset of widths to display on first load\n  ],\n  defaultVisibleThemes: [\n    // subset of themes to display on first load\n  ],\n};\n```\n\n_Note: `port` and `openBrowser` options will be set to `9000` and `true` (respectively) by default whenever they are omitted from the config above._\n\nYour `components` file is expected to export a single object or a series of named exports. For example:\n\n```js\nexport { default as Text } from '../Text'; // Re-exporting a default export\nexport { Button } from '../Button'; // Re-exporting a named export\n// etc...\n```\n\nThe `iframeSandbox` option can be used to set the [`sandbox` attribute](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) on Playroom's iframe. A minimum of `allow-scripts` is required for Playroom to work.\n\nNow that your project is configured, you can start a local development server:\n\n```bash\n$ npm run playroom:start\n```\n\nTo build your assets for production:\n\n```bash\n$ npm run playroom:build\n```\n\n## Snippets\n\nPlayroom 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:\n\n```js\nexport default [\n  {\n    group: 'Components',\n    name: 'Button',\n    description: 'Strong weight',\n    code: `\n      \u003cButton weight=\"strong\"\u003e\n        Button\n      \u003c/Button\u003e\n    `,\n  },\n  // etc...\n];\n```\n\nThe `group` property is optional, but if provided, snippets will be grouped together in the UI under the specified group name.\nThe `description` property is also optional and can be used to help differentiate similar snippets.\n\n## Custom Frame Component\n\nIf 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:\n\n```js\nimport React from 'react';\nimport { ThemeProvider } from '../path/to/your/theming-system';\n\nexport default function FrameComponent({ theme, children }) {\n  return \u003cThemeProvider theme={theme}\u003e{children}\u003c/ThemeProvider\u003e;\n}\n```\n\n## Custom Scope\n\nYou 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:\n\n```js\n// scope.js\n\nimport { useTheme } from '../path/to/your/theming-system';\n\nexport default function useScope() {\n  return {\n    theme: useTheme(),\n  };\n}\n```\n\n## Embedded CSS Formatting\n\nCSS authored inside `style` tags with a `jsx` attribute will be formatted as CSS. This takes advantage of [prettier's embedded language formatting capabilities].\n\nFor example:\n\n```jsx\n\u003cstyle jsx\u003e\n  {`\n    .foo {\n      color: red;\n    }\n  `}\n\u003c/style\u003e\n```\n\n[prettier's embedded language formatting capabilities]: https://prettier.io/docs/options#embedded-language-formatting\n\n## Theme Support\n\nIf your component library has multiple themes, you can customise Playroom to render every theme simultaneously via the `themes` configuration option.\n\nSimilar to your `components` file, your `themes` file is expected to export a single object or a series of named exports. For example:\n\n```js\nexport { themeA } from './themeA';\nexport { themeB } from './themeB';\n// etc...\n```\n\n## TypeScript Support\n\nIf a `tsconfig.json` file is present in your project, static prop types are parsed using [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) to provide better autocompletion in the Playroom editor.\n\n\u003e [!NOTE]\n\u003e By default, all `.ts` and `.tsx` files in the current working directory are included, excluding `node_modules`.\n\nIf you need to customise this behaviour, you set the `typeScriptFiles` property in your `playroom.config.js`.\nThis property accepts an array of [`tinyglobby`]-compatible globs.\n\n```js\nmodule.exports = {\n  // ...\n  typeScriptFiles: ['src/components/**/*.{ts,tsx}', '!**/node_modules'],\n};\n```\n\nIf you need to customise the [parser options](https://github.com/styleguidist/react-docgen-typescript#options), you can set the `reactDocgenTypescriptConfig` property in your `playroom.config.js`.\n\nFor example:\n\n```js\nmodule.exports = {\n  // ...\n  reactDocgenTypescriptConfig: {\n    propFilter: (prop, component) =\u003e {\n      // ...\n    },\n  },\n};\n```\n\n[`tinyglobby`]: https://github.com/SuperchupuDev/tinyglobby\n\n## ESM Support\n\nPlayroom supports loading [ESM](https://nodejs.org/api/esm.html#introduction) configuration files. By default, Playroom will look for a playroom config file with either a `.js`, `.mjs` or `.cjs` file extension.\n\n## Storybook Integration\n\nIf you are interested in integrating Playroom into Storybook, check out [storybook-addon-playroom](https://github.com/rbardini/storybook-addon-playroom).\n\n## Browser Support\n\nPlayroom is built to work on the latest stable versions of all major browsers. Some features may not work as expected in older browsers.\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseek-oss%2Fplayroom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseek-oss%2Fplayroom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseek-oss%2Fplayroom/lists"}