P5 Code Sandbox
Experiment to have a code sandbox powered by Monaco editor for testing p5.js code. Based on this blog post "Create a JavaScript Code Sandbox" by Matija. The idea is to be able to build a documentation page for sketches produced during seminars, like in my seminar gestalten-in-code but have all the sketches editable in the sandbox.
See a demo over at p5.inpyjamas.dev
Features
Current feature set is limited but it can:
- Save changes to local storage
- Control via component prop if changes should be saved to local storage
- Control via URL SearchParameters if the local storage should be disabled
- Format using Prettier
- All the great features Monaco has.
See @ff6347 p5js code sandbox project for planned features
Development
npm ci
npm run dev
π Project Structure
Inside of your Astro project, you'll see the following folders and files:
/
βββ public/
β βββ favicon.svg
βββ src/
β βββ components/
β β βββ sandbox.css // the components css
β β βββ Sandbox.tsx // the component to load in pages
β βββ hooks/
β β βββ local-storage.ts // the local storage customHook
β βββ hooks/
β β βββ iframe-source.ts // the html for the iframe
β βββ layouts/
β β βββ Layout.astro
β βββ pages/
β βββ index.astro
βββ package.json
Astro Docs
Astro looks for .astro
or .md
files in the src/pages/
directory. Each page is exposed as a route based on its file name.
There's nothing special about src/components/
, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the public/
directory.
π§ Commands
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add , astro check |
npm run astro -- --help |
Get help using the Astro CLI |
π Want to learn more?
Feel free to check our documentation or jump into our Discord server.
Contributors β¨
Thanks goes to these wonderful people (emoji key):
Fabian MorΓ³n Zirfas π» π¨ π€ π |
This project follows the all-contributors specification. Contributions of any kind welcome!