{"id":13684956,"url":"https://github.com/dfinity/motoko-playground","last_synced_at":"2025-09-02T16:56:52.465Z","repository":{"id":38018612,"uuid":"294874238","full_name":"dfinity/motoko-playground","owner":"dfinity","description":"Motoko playground","archived":false,"fork":false,"pushed_at":"2025-07-18T09:54:46.000Z","size":23161,"stargazers_count":69,"open_issues_count":16,"forks_count":24,"subscribers_count":35,"default_branch":"main","last_synced_at":"2025-07-18T13:45:12.765Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://play.motoko.org","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/dfinity.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-09-12T05:05:13.000Z","updated_at":"2025-07-18T09:54:49.000Z","dependencies_parsed_at":"2023-10-16T09:57:43.247Z","dependency_job_id":"5486f443-2178-4114-88c2-ee6e299f7b04","html_url":"https://github.com/dfinity/motoko-playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dfinity/motoko-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfinity%2Fmotoko-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfinity%2Fmotoko-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfinity%2Fmotoko-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfinity%2Fmotoko-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dfinity","download_url":"https://codeload.github.com/dfinity/motoko-playground/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfinity%2Fmotoko-playground/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273317765,"owners_count":25084037,"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","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-08-02T14:00:41.174Z","updated_at":"2025-09-02T16:56:52.431Z","avatar_url":"https://github.com/dfinity.png","language":"TypeScript","funding_links":[],"categories":["IDEs","Development tools"],"sub_categories":["IDEs"],"readme":"# Motoko Playground\n\nA playground for the Internet Computer's native Motoko language.\n\nThe Motoko playground allows users to build and deploy Motoko canisters directly in the browser,\nwithout downloading SDK, setting up a local dev environment, and without a wallet.\n\nThe Motoko playground consists of\n\n- its frontend, a web application served by the asset canister, which consists of the following components,\n  - A Motoko compiler produced by `js-of-ocaml`.\n  - A Monaco editor that supports Motoko syntax validation.\n  - A Vessel package manager that loads libraries from the vessel package set.\n  - A deploy module that integrates canister upgrade, actor class and Candid UI.\n  - A code import module that allows to import any Motoko code from Github.\n- its backend, a canister on the IC that controlls all canisters deployed by the users.\n  - Each deployed canister has an initial cycle of 0.5T and is available for 20 minutes.\n  - To avoid wasting cycles, the deployed canister is not allowed to transfer cycles. The cycle transfer instructions will be removed by the backend at the Wasm level.\n  - To ensure resource fairness, we require a proof of work when the user requests for a canister id.\n\nWe plan on adding many more features to make playground a full-featured web IDE for the Internet Computer. See our [issues](https://github.com/dfinity/motoko-playground/issues) for more details. Community contributions are highly welcomed!\n\n## Running Locally\n\n### Prerequisites:\n\n- [Install Internet Computer SDK](https://sdk.dfinity.org/docs/quickstart/local-quickstart.html)\n- [Install npm](https://nodejs.org/en/download/)\n- [Install mops-cli](https://github.com/chenyan2002/mops-cli/releases)\n- [Install Rust](https://www.rust-lang.org/tools/install)\n- Add wasm32 target to Rust\n  ```\n  rustup target add wasm32-unknown-unknown\n  ```\n\n### To run the Motoko Playground locally, proceed as follows after cloning the respository:\n\n```sh\nnpm install # Install `npm` dependencies\nnpm start # Run the local development server\n```\n\n### Deploy the Motoko Playground to your local replica using the following command:\n\n```sh\ndfx deploy\n```\n\nIf you want to deploy frontend, remember to upload `assetstorage.wasm.gz` to the backend canister and update the module hash in `FrontendDeployModal`.\n\n### npm audit warnings\n\nVulnerabilities from dev dependencies are false positives, we only aim to fix warnings from `npm audit --production`.\n\n### Update Vessel package list\n\n- Clone the package-set repo: https://github.com/dfinity/vessel-package-set\n- Make sure [`dhall` and `dhall-to-json` are installed](https://docs.dhall-lang.org/tutorials/Getting-started_Generate-JSON-or-YAML.html#os-x) with `apt` or `brew`\n- `dhall-to-json --file vessel-package-set/src/packages.dhall \u003e motoko-playground/src/config/package-set.json`\n\n## Editor Integrations\n\nThe Motoko Playground supports\nlimited [cross-origin communication](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). If you are\nbuilding a custom smart contract editor or similar application, you can use the following code snippet to open a project in Motoko Playground:\n\n```js\nconst PLAYGROUND_ORIGIN = 'https://play.motoko.org'\nconst APP_ID = 'MyEditor'\n\n// Workplace files for a project\nconst userFiles = {\n  'Main.mo': 'actor { public func hello() : async Text { \"Hello World\" } }'\n}\n\n// GitHub package dependencies for a project\nconst userPackages = [{\n  name: 'quicksort',\n  repo: 'https://github.com/dfinity/examples.git',\n  version: 'master',\n  dir: 'motoko/quicksort/src'\n}]\n\n// Open the Motoko Playground in a new window\nconst playground = window.open(`${PLAYGROUND_ORIGIN}?post=${APP_ID}`, 'playground')\n\n// Call repeatedly until loaded (interval ID used for acknowledgement)\nconst ack = setInterval(() =\u003e {\n  const request = {\n    type: 'workplace',\n    acknowledge: ack,\n    packages: userPackages,\n    actions: [{\n      type: 'loadProject',\n      payload: {\n        files: userFiles\n      }\n    }],\n    deploy: true\n  }\n  // Concatenate APP_ID and request JSON\n  const data = APP_ID + JSON.stringify(request)\n  console.log('Request data:', data)\n  playground.postMessage(data, PLAYGROUND_ORIGIN)\n}, 1000)\n\n// Listen for acknowledgement\nconst responseListener = ({source, origin, data}) =\u003e {\n  if(\n          typeof data === 'string' \u0026\u0026\n          data.startsWith(APP_ID) \u0026\u0026\n          source === playground \u0026\u0026\n          origin === PLAYGROUND_ORIGIN\n  ) {\n    console.log('Response data:', data)\n    // Parse JSON part of message (prefixed by APP_ID)\n    const response = JSON.parse(data.substring(APP_ID.length))\n    if(response.acknowledge === ack) {\n      clearInterval(ack)\n      window.removeEventListener('message', responseListener)\n    }\n  }\n}\nwindow.addEventListener('message', responseListener)\n```\n\nNote: this works for `localhost`out of the box. If you would like to use this feature in production, please submit a PR\nadding your application's public URL to [`src/integrations/allowedOrigins.js`](src/integrations/allowedOrigins.js).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdfinity%2Fmotoko-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdfinity%2Fmotoko-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdfinity%2Fmotoko-playground/lists"}