Playground
A design tool where every layer is real HTML and CSS, and coding agents edit the same canvas you do. It also runs the workshop: slides with live questions and countdowns.
At a glance
- The document is HTML
- Agent edits are visible and undoable
- Answers wait for the timer
The question
Design files are drawings that someone later rebuilds as code, and coding agents can't see them at all. What if the design already was the code, and an agent could open the file, look at it and change it while I watch?
What I built
An infinite canvas with direct manipulation, where every element is a real DOM node with real flexbox and real fonts. Screens sit in titled sections with a review status, sticky notes sit beside them, and flows can be drawn between the actual screens.
Next to it, an MCP server that lets Claude Code, Codex, Cursor and others read and write the open document. And a Present mode, so the same file can run a review: questions people answer from their phones, polls, and timers that hold the answers back until time is up.
Inside
How it looks in use.
- Role
- Sole designer, developer and owner
- Built with
- React, Hono, SQLite, an MCP server, my own server
- Runs
- In the browser, self-hosted
- Status
- In beta testing
Up close
The details that carry it.
Decisions that mattered
- The document is HTMLNo export step and no translation: what you draw is what the browser renders, and any layer can be copied out as code.
- Agent edits are visible and undoableChanges from an agent appear within a frame, are highlighted and attributed to it, and one click undoes them all.
- Answers wait for the timerOn a slide with a countdown, results stay hidden until zero, so the first answer on screen doesn't steer everyone else's.
What I learned
Giving an agent hands is easy; the work is in what the human sees. Highlighting, attribution and undo are what make it feel like a colleague in the file rather than something happening behind your back.
Something similar in mind?