{"id":21602472,"url":"https://github.com/ff6347/p5-code-sandbox","last_synced_at":"2026-03-06T03:31:39.311Z","repository":{"id":205425796,"uuid":"714212411","full_name":"ff6347/p5-code-sandbox","owner":"ff6347","description":"Experimental p5.js code sandbox powered by Monaco editor for testing sketches with live feedback","archived":false,"fork":false,"pushed_at":"2026-03-04T20:57:26.000Z","size":7648,"stargazers_count":4,"open_issues_count":21,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-05T02:39:55.545Z","etag":null,"topics":["monaco-editor","p5js"],"latest_commit_sha":null,"homepage":"https://p5.inpyjamas.dev/","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/ff6347.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":null,"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":"2023-11-04T08:36:53.000Z","updated_at":"2026-02-23T05:20:06.000Z","dependencies_parsed_at":"2023-11-18T21:27:03.095Z","dependency_job_id":"202a1250-dba9-4be8-b0cb-1d992ec16c81","html_url":"https://github.com/ff6347/p5-code-sandbox","commit_stats":{"total_commits":104,"total_committers":4,"mean_commits":26.0,"dds":0.4903846153846154,"last_synced_commit":"02dca63ca09445c62c097a1749ea507fc118e2d2"},"previous_names":["ff6347/p5-code-sandbox"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/ff6347/p5-code-sandbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff6347%2Fp5-code-sandbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff6347%2Fp5-code-sandbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff6347%2Fp5-code-sandbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff6347%2Fp5-code-sandbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ff6347","download_url":"https://codeload.github.com/ff6347/p5-code-sandbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff6347%2Fp5-code-sandbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30160850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T22:39:40.138Z","status":"online","status_checked_at":"2026-03-06T02:00:08.268Z","response_time":250,"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":["monaco-editor","p5js"],"created_at":"2024-11-24T19:13:31.597Z","updated_at":"2026-03-06T03:31:39.280Z","avatar_url":"https://github.com/ff6347.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# P5 Code Sandbox\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n![](docs/assets/p5-code-sandbox.png)\n\nExperiment to have a code sandbox powered by Monaco editor for testing p5.js code. Based on [this blog](https://joyofcode.xyz/create-a-coding-sandbox) post \"Create a JavaScript Code Sandbox\" by Matija.\nThe idea is to be able to build a documentation page for sketches produced during seminars, like in my seminar [gestalten-in-code](https://interface.fh-potsdam.de/gestalten-in-code/) but have all the sketches editable in the sandbox.\n\n**See a demo over at [p5.inpyjamas.dev](https://p5.inpyjamas.dev/)**\n\n## Features\n\nCurrent feature set is limited but it can:\n\n- Save changes to local storage\n- Control via component prop if changes should be saved to local storage\n- Control via URL SearchParameters if the local storage should be disabled\n- Format using Prettier\n- All the great features Monaco has.\n\nSee [@ff6347 p5js code sandbox project for planned features](https://github.com/users/ff6347/projects/2/views/1)\n\n## Development\n\n```bash\nnpm ci\nnpm run dev\n```\n\n## 🚀 Project Structure\n\nInside of your Astro project, you'll see the following folders and files:\n\n```text\n/\n├── public/\n│   └── favicon.svg\n├── src/\n│   ├── components/\n│   │   └── sandbox.css // the components css\n│   │   └── Sandbox.tsx // the component to load in pages\n│   ├── hooks/\n│   │   └── local-storage.ts // the local storage customHook\n│   ├── hooks/\n│   │   └── iframe-source.ts // the html for the iframe\n│   ├── layouts/\n│   │   └── Layout.astro\n│   └── pages/\n│       └── index.astro\n└── package.json\n```\n\n## Astro Docs\n\nAstro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.\n\nThere's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.\n\nAny static assets, like images, can be placed in the `public/` directory.\n\n## 🧞 Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command                   | Action                                           |\n| :------------------------ | :----------------------------------------------- |\n| `npm install`             | Installs dependencies                            |\n| `npm run dev`             | Starts local dev server at `localhost:4321`      |\n| `npm run build`           | Build your production site to `./dist/`          |\n| `npm run preview`         | Preview your build locally, before deploying     |\n| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |\n| `npm run astro -- --help` | Get help using the Astro CLI                     |\n\n## 👀 Want to learn more?\n\nFeel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://fabianmoronzirfas.me\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/315106?v=4?s=100\" width=\"100px;\" alt=\"Fabian Morón Zirfas\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFabian Morón Zirfas\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ff6347/p5-code-sandbox/commits?author=ff6347\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-ff6347\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"#ideas-ff6347\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#infra-ff6347\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fff6347%2Fp5-code-sandbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fff6347%2Fp5-code-sandbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fff6347%2Fp5-code-sandbox/lists"}