Playground MVP [start here]

[PaperPrototype]

Screen_Recording_2025-09-13_at_12.07.29_AM.mov

How the playground currently looks. I'll try to keep this up to date.

Playground component at src/lib/components/Playground/component.svelte

Tasks

• File Viewer File Viewer [intermediate / advanced]  #2 this will allow creating files like you would with vs code
• Code Editor Code Editor [intermediate] #1 this is mostly working already and you can see it being used in the Playground
• Dev Server Dev Server [beginner friendly] #4 this will allow multi-file import/ export between javascript modules
• Implement the full postMessage/onmessage API for keyboard/mouse input Message protocal for playground #9

How is it drawing the background?

const context2D = canvas.getContext('2d');

context2D.fillStyle = 'red';
context2D.fillRect(0, 0, canvas.width, canvas.height);

This code gives us a CanvasRenderingContext2D which lets us draw shapes to the screen!

You can also get a WebGLRenderingContext as well as a GPUCanvasContext.