{"id":43866324,"url":"https://github.com/amphitheatre-app/playground","last_synced_at":"2026-02-06T12:24:30.897Z","repository":{"id":212490681,"uuid":"725977649","full_name":"amphitheatre-app/playground","owner":"amphitheatre-app","description":"Embedded Code runner in web pages, supports multiple programming languages.","archived":false,"fork":false,"pushed_at":"2025-02-08T06:29:20.000Z","size":383,"stargazers_count":13,"open_issues_count":5,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-08T07:25:02.908Z","etag":null,"topics":["code-runner","editor","embedded","frontend","javascript","playground","typescript","webapp"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amphitheatre-app.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":"2023-12-01T09:18:05.000Z","updated_at":"2025-02-08T06:29:21.000Z","dependencies_parsed_at":"2023-12-22T04:31:11.338Z","dependency_job_id":"2b85bbaf-e414-4601-a1bc-42c7d6cefebf","html_url":"https://github.com/amphitheatre-app/playground","commit_stats":null,"previous_names":["amphitheatre-app/playground"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/amphitheatre-app/playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amphitheatre-app%2Fplayground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amphitheatre-app%2Fplayground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amphitheatre-app%2Fplayground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amphitheatre-app%2Fplayground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amphitheatre-app","download_url":"https://codeload.github.com/amphitheatre-app/playground/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amphitheatre-app%2Fplayground/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29160811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T07:18:23.844Z","status":"ssl_error","status_checked_at":"2026-02-06T07:13:32.659Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["code-runner","editor","embedded","frontend","javascript","playground","typescript","webapp"],"created_at":"2026-02-06T12:24:30.122Z","updated_at":"2026-02-06T12:24:30.886Z","avatar_url":"https://github.com/amphitheatre-app.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Amphitheatre Playground\n\n[![License](https://img.shields.io/github/license/amphitheatre-app/playground)](https://github.com/amphitheatre-app/playground/blob/master/LICENSE)\n[![GitHub\ncontributors](https://img.shields.io/github/contributors/amphitheatre-app/playground)](https://github.com/amphitheatre-app/playground/graphs/contributors)\n[![GitHub\nissues](https://img.shields.io/github/issues/amphitheatre-app/playground)](https://github.com/amphitheatre-app/playground/issues)\n\n[What's it do?](#whats-it-do) •\n[Architecture](#architecture) •\n[Usage](#usage) •\n[Development](#local-development) •\n[Contributing](#contributing) •\n[简体中文](README.zh-CN.md)\n\n\u003c/div\u003e\n\n## What's it do?\n\nEmbedded Code runner in web pages, supports multiple programming languages. You\ncan check demo and read more about features\n[here](https://play.amphitheatre.app).\n\nIt has a number of features, including:\n\n- A nice, unobtrusive editor with syntax highlighting.\n- Supports multiple programming languages, included its build tools.\n- The ability to quickly load preview for predefined code from a GitHub Project or Gist.\n- See console output in the component itself.\n\n## Architecture\n\nA React frontend communicates with an [Axum\nbackend](https://github.com/amphitheatre-app/playground-api). Docker containers\nare used to provide the various compilers and tools as well as to help isolate\nthem.\n\n![Playground Architecture](./docs/images/architecture.jpg)\n\n## Usage\n\nThe Playground may be included on your site in one of two ways:\n\n### As a React Component\n\nIf you are using React, then you can add the\n[playground-react](https://github.com/amphitheatre-app/playground-react)\ncomponent directly in your project, as simple as the following:\n\n```shell\nnpm install --save @amphitheatre/playground-react\n```\n\n```javascript\nimport Playground from '@amphitheatre/playground-react'\n\nexport default function App() {\n  return \u003cPlayground style={{ width: 800, height: 500 }} /\u003e\n}\n```\n\n### As an iframe\n\nIf you're not using React, please deploy the project and backend server\nprivately first, then include the Playground in an `iframe`.\n\n```html\n\u003ciframe\n  width=\"880\"\n  height=\"425\"\n  frameborder=\"0\"\n  src=\"//playground.your-domain.com/?gist=6b8b99c93be318f254606a92955294ec\"\n\u003e\u003c/iframe\u003e\n```\n\n#### Parameters\n\nThe Playground accepts the following props/parameters.\n\n| Title            | Description                                                  | Default                |\n| ---------------- | ------------------------------------------------------------ | ---------------------- |\n| **`title`**      | An optional title for the editor pane.                       | `''`                   |\n| **`files`**      | A map of `{ [filename]: code }`. This will take precedence over `code` if given. | `undefined`            |\n| **`entry`**      | The filename of the file that runs first. This is only relevant when showing multiple files with the `files` parameter. | `''`                   |\n| **`initialTab`** | The filename of the tab to show by default. This is only relevant when showing multiple files with the `files` parameter. Defaults to the value of `entry`. | `entry`                |\n| **`styles`**     | An map of inline style objects, applied to various elements to customize the style of the UI. Example: `{ header: { backgroundColor: 'red' } }` | `{}`                   |\n| **`fullscreen`** | Show a button to enable fullscreen editing (in most configurations of panes). Note that the iframe must have the `allowfullscreen` attribute for this to work. | `false`                |\n| **`panes`**      | An array of UI panes to display. To display a pane without options, use a string. Otherwise, use an object with a `type` property. The available panes are: `'stack'`, `'editor'`, `'player'`, `'console'`. Note that there *must be* a `player` pane for any code to run. For pane options, see below. | `['editor', 'player']` |\n\n## Local development\n\nTo run the playground locally, run:\n\n- `pnpm` to install dependencies\n- `pnpm build` to compile the app and place it in the `build/` directory\n- `pnpm start` to serve from the `build/` directory and open a page on your\n  browser.\n\nFor a fast edit-refresh cycle when developing run `pnpm dev`. This will\nstart an http server and automatically re-compile the TypeScript, HTML and CSS\nfiles whenever they change.\n\n## Local development with Docker-compose\n\n- Make sure you have [docker](https://docs.docker.com/get-docker/) installed.\n- Clone or fork this repository.\n- Start server `docker-compose up`, add `-d` to `docker-compose up` if you'd\n  like to run it in the background.\n\nThe first time will take some time to download the dependencies. they are\ndownloaded only once, and then cached.\n\n## Development with Amphitheatre\n\nJust like the other [Amphitheatre\nexamples](https://docs.amphitheatre.app/examples/), after [installing the server\nand CLI software](https://docs.amphitheatre.app/installation/), and [configuring\nthe certificates and\npreferences](https://docs.amphitheatre.app/getting-started/initialize/), Execute\nthe following command:\n\n```bash\namp run\n```\n\n## Contributing\n\nIf anything feels off, or if you feel that some functionality is missing, please\ncheck out the [contributing page](https://docs.amphitheatre.app/contributing/).\nThere you will find instructions for sharing your feedback, building the tool\nlocally, and submitting pull requests to the project.\n\n\n**This project is based on the Web3 Open Source General Playground product\ndeveloped by Amphitheatre, which aims to help developers learn Web3 development\nbetter, and is co-sponsored by [Amphitheatre](https://amphitheatre.app/) and\n[OpenBuild](https://openbuild.xyz).**\n\n**We will post some development tasks as task topics and label them as \"Tasks\",\ninterested partners can evaluate the development time in the corresponding\ntopics, we will pick the most suitable developer from them and assign the task\nto him, and we will give rewards after the task is completed and passes the PR.**\n\nFor more information, please refer to [How to\nContribute](https://github.com/amphitheatre-app/playground/blob/master/docs/how_to_contribute.md)\nand the [Contribution Reward\nAnnouncement](https://github.com/amphitheatre-app/playground/issues/4).\n\n## Contributors\n\n\u003c!-- readme: collaborators,contributors,zouyuxuan -start --\u003e\n\u003ctable\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/lispking\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/4446580?v=4\" width=\"100;\" alt=\"lispking\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eKing\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/jueduizone\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/16284115?v=4\" width=\"100;\" alt=\"jueduizone\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eIanXu\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/xiangnuans\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/24558814?v=4\" width=\"100;\" alt=\"xiangnuans\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003exiangnuans\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/GrayJyy\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/122503129?v=4\" width=\"100;\" alt=\"GrayJyy\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eGrayJiang\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/wangeguo\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/146697?v=4\" width=\"100;\" alt=\"wangeguo\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eEguo Wang\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/onlyheartt9\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/49861142?v=4\" width=\"100;\" alt=\"onlyheartt9\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eChallenger\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/KazooTTT\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/31075337?v=4\" width=\"100;\" alt=\"KazooTTT\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eKazooTTT\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/dethan3\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/33822639?v=4\" width=\"100;\" alt=\"dethan3\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eDEthan3\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/peewee92\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/20059253?v=4\" width=\"100;\" alt=\"peewee92\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eNull\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/zouyuxuan\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/33485252?v=4\" width=\"100;\" alt=\"zouyuxuan\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eNull\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003ctbody\u003e\n\u003c/table\u003e\n\u003c!-- readme: collaborators,contributors,zouyuxuan -end --\u003e\n\n## License\n\nCopyright (c) The Amphitheatre Authors. All rights reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\nthis file except in compliance with the License. You may obtain a copy of the\nLicense at\n\n      https://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed\nunder the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR\nCONDITIONS OF ANY KIND, either express or implied. See the License for the\nspecific language governing permissions and limitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famphitheatre-app%2Fplayground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famphitheatre-app%2Fplayground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famphitheatre-app%2Fplayground/lists"}