{"id":13496535,"url":"https://github.com/agneym/playground","last_synced_at":"2025-05-14T08:07:14.466Z","repository":{"id":37686671,"uuid":"221048630","full_name":"agneym/playground","owner":"agneym","description":"A simple playground for HTML, CSS and JavaScript supporting module imports.","archived":false,"fork":false,"pushed_at":"2024-12-10T11:05:20.000Z","size":1624,"stargazers_count":1080,"open_issues_count":9,"forks_count":161,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-11T19:06:04.218Z","etag":null,"topics":["microbundle","playground","react","styled-components","typescript"],"latest_commit_sha":null,"homepage":"https://www.agney.dev/blog/introducing-playground","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/agneym.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-11T18:54:38.000Z","updated_at":"2025-05-07T21:31:00.000Z","dependencies_parsed_at":"2023-02-06T17:01:00.118Z","dependency_job_id":"1315b9b2-9de2-42a7-8567-8427251af77b","html_url":"https://github.com/agneym/playground","commit_stats":{"total_commits":217,"total_committers":9,"mean_commits":24.11111111111111,"dds":0.3824884792626728,"last_synced_commit":"c22c4643013d33dab721736a0e3fbe48e72db127"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fplayground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fplayground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fplayground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fplayground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agneym","download_url":"https://codeload.github.com/agneym/playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101618,"owners_count":22014909,"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":["microbundle","playground","react","styled-components","typescript"],"created_at":"2024-07-31T19:01:50.983Z","updated_at":"2025-05-14T08:07:09.413Z","avatar_url":"https://github.com/agneym.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"./assets/icon.png\"\u003e\u003c/p\u003e\n\u003ch2 align=\"center\"\u003ePlayground\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n\u003cstrong\u003eA simple playground for HTML, CSS and JavaScript supporting module imports.\u003c/strong\u003e\n\u003cbr\u003e\n\u003ca href=\"https://www.npmjs.com/package/@agney/playground\"\u003e\n  \u003cimg src=\"https://badge.fury.io/js/%40agney%2Fplayground.svg\" /\u003e\n\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg\" /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://github.com/agneym/playground/actions\"\u003e\n  \u003cimg src=\"https://github.com/agneym/playground/workflows/Node%20CI/badge.svg\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://prettier.io\"\u003e\n  \u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"http://makeapullrequest.com\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\" /\u003e\n\u003c/a\u003e\n\u003cbr\u003e\n\n**Playground** is a HTML, CSS and JS demonstration component that runs entirely in the browser and does not require loading any third party sites.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/1884712/111428687-108fe380-86b5-11eb-94d1-a861e5c25d36.png\" alt=\"screenshot\" /\u003e\n\u003c/div\u003e\n\n## Usage\n\nInstall from `npm` with:\n\n```\nnpm install @agney/playground\n# OR\nyarn add @agney/playground\n```\n\n```jsx\nimport Playground from \"@agney/playground\";\n/* Why is there a tabs import? https://github.com/agneym/playground#why-is-there-a-reacttabs-import*/\nimport \"@reach/tabs/styles.css\";\n\nconst App = () =\u003e {\n  const snippet = {\n    markup: `\u003cdiv id=app /\u003e`,\n    css: ``,\n    javascript: `import { h, Component, render } from 'preact';\nimport htm from 'htm';\n\nconst html = htm.bind(h);\n\nconst app = html\\`\u003cdiv\u003eHello World from Playground!\u003c/div\u003e\\`\n\nrender(app, document.getElementById('app'));`,\n  };\n  return (\n    \u003cPlayground\n      id=\"example\"\n      initialSnippet={snippet}\n      defaultEditorTab=\"javascript\"\n      transformJs\n    /\u003e\n  );\n};\n```\n\n## Demo\n\nhttps://www.agney.dev/blog/introducing-playground\n\n## Features\n\n1. Load preview for predefined code.\n1. Autoreloading preview.\n1. Allows bare ES package imports. This means you can add imports for any library that supports ES Module resolution and playground will automatically load it into your code.\n1. See console output in the component itself.\n1. Control the tab loaded by default for your use-case.\n\n## Applications\n\n1. Add to static blogs to present your HTML, CSS or JavaScript code.\n1. Allow users to change the code and see the output in real time.\n\n## API\n\n|      Props       |                                                   description                                                   |                                           default                                           | required |\n| :--------------: | :-------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :------: |\n|        id        |                                       a unique identifier for the iFrame                                        |                                                                                             |   true   |\n|  initialSnippet  |                                          Initial code to be displayed                                           |                                                                                             |   true   |\n| defaultEditorTab |                Initial editor tab to be displyed. Possible values: \"markup\", \"css\", \"javascript\"                |                                          \"markup\"                                           |  false   |\n| defaultResultTab |                Initial tab on result panel to be displayed. Possible values: \"console\", \"result\"                |                                          \"result\"                                           |  false   |\n|   transformJs    |             Transform the JavaScript using Babel. This is required if you want bare module imports              |                                            false                                            |  false   |\n|     presets      | Array of presets you want Babel to transform. This works only if transformJs is true. Eg. `[\"react\", \"es2015\"]` |                                                                                             |  false   |\n|      theme       |                             Pass in the theme variables to customise the appearance                             | [Our Theme](https://github.com/agneym/playground/blob/master/playground/src/utils/theme.ts) |  false   |\n\n### Format for initial snippet\n\n```js\n{\n  markup: `\u003ch1\u003eTitle\u003c/h1\u003e`,\n  css: `h1 { color: red }`,\n  javascript: `console.log(\"this\")`\n}\n```\n\n### Why is there a @reach/tabs import?\n\nPlayground uses [`@reach/tabs`](https://reach.tech/tabs/) as a dependency. We could bundle the stylesheet or inject it inline on runtime. But both those options add unnecessary code if you are already using it.\n\n_This might cause breaking changes if you have a different version of `@reach/tabs` but then I'm just expecting it to be stable along the road._\n\n### How does module imports work?\n\nIf an NPM package exposes an endpoint for \"module\", then you can direcly import this package by it's name.\n\n```js\nimport { format } from \"date-fns\";\n\nformat(new Date(2014, 1, 11), \"yyyy-MM-dd\");\n```\n\nUnfortunately, not all packages currently support this feature. You can search through an entire list of packages through [Skypack](https://www.skypack.dev/).\n\nYou can use community created packages to replicate the functionality. For eg. React would be:\n\n```js\nimport React, { createElement } from \"https://cdn.skypack.dev/react\";\nimport ReactDOM from \"https://cdn.skypack.dev/react-dom\";\n\nReactDOM.render(\n  createElement(\"div\", {}, \"Hello World\"),\n  document.getElementById(\"app\")\n);\n```\n\n### How do I demo React code with JSX?\n\n```jsx\nimport Playground from \"@agney/playground\";\n\nconst App = () =\u003e {\n  const snippet = {\n    markup: `\u003cdiv id=app /\u003e`,\n    css: ``,\n    javascript: `import React, { createElement } from \"https://cdn.skypack.dev/react\";\nimport ReactDOM from \"https://cdn.skypack.dev/react-dom\";\n\nReactDOM.render(\n  \u003ch1\u003eHello World\u003c/h1\u003e,\n  document.getElementById(\"app\")\n);`,\n  };\n  return (\n    \u003cPlayground\n      initialSnippet={snippet}\n      defaultEditorTab=\"javascript\"\n      transformJs\n      presets={[\"react\"]}\n    /\u003e\n  );\n};\n```\n\n## What about the bundle size?\n\nThe component is fairly small at about ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@agney/playground). You can find the total size and time on [Bundle Phobia](https://bundlephobia.com/result?p=@agney/playground).\n\nWhen transforming JavaScript it uses [Babel Standalone](https://babeljs.io/docs/en/babel-standalone) which adds a considerable size. Playground loads Babel from a CDN so that it can be loaded from browser cache on change.\n\nIt uses [Chrome's Native Lazy Loading](https://web.dev/native-lazy-loading/) so that the iframes for results are loaded lazily and your pages remain fast.\n\n## Contributing\n\nThis project makes use of [Yarn Workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) for development.\n\n1. Run `yarn` for installing dependencies.\n\n2. Run `yarn start` to start development on package.\n\n3. To start example, run `yarn start-example`.\n\nPull Requests are Welcome. Please create an issue to discuss before making a feature or large change. Thank You :smile:\n\n## Credits\n\n\u003cdiv\u003eIcons made by \u003ca href=\"https://www.flaticon.com/authors/freepik\" title=\"Freepik\"\u003eFreepik\u003c/a\u003e from \u003ca href=\"https://www.flaticon.com/\" title=\"Flaticon\"\u003ewww.flaticon.com\u003c/a\u003e\u003c/div\u003e\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagneym%2Fplayground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagneym%2Fplayground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagneym%2Fplayground/lists"}