Sketchmoor: a shared whiteboard for small teams
Sticky notes, pen, shapes and arrows on shared boards, with named live cursors, real-time edits and per-person undo.
Agent specs
- Agent
- Claude Code, Opus 5.5 Medium
- Time
- 22 min
- Cost
- $6.93*
Agents work faster and more accurately on Elements.
* Cost at API rates, September 2026.
Run it yourself
Paste this prompt into your AI agent. You get the finished app on your own machine, ready to change however you like.
Install elements: curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH Create an Elements app from the elementscode/demo-sketchmoor scaffold: cd ~/elements/projects elements create sketchmoor -scaffold=elementscode/demo-sketchmoor cd sketchmoor Start the app.
How it's built
Sketchmoor needed boards that several people draw on at once, named cursors that follow each person's pointer, strokes that appear as they are drawn, undo for each person and accounts with shared links. Each of those is a part of Elements, so the agent spent its 22 minutes on the whiteboard itself.
What Elements gave the app
- Shapes that sync. Shapes are a LiveTable, one view per board. Notes, pen strokes, rectangles, arrows and text are rows, and the board adds and moves them straight through the view, so every open copy updates as each edit lands.
- Cursors and strokes in flight. A channel carries what is seen but never stored: each person's named cursor, the stroke under their pen and a shape mid-drag. Each browser drops its own echo.
- Undo for each person. Erasing marks a shape as deleted, so it can come back. Each person keeps their own undo and redo steps, applied through the same view.
- Shared by link. Opening a board's link adds the signed-in user to its members, and every edit checks that membership.
- Thumbnails from the data. The board list shows each board drawn as an SVG from its shapes, cached until the next edit.
- Data and sessions from SQL. Migrations define the boards and seed three demo accounts sharing two boards, a sprint retro of sticky notes and an architecture sketch. Each person signs in with a session.
What the project server gave the agent
The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.
What shipped
The app type-checks with zero errors and all 22 tests pass. Every page works on desktop and phone.
The code
Build it from scratch
To watch your agent build this app from an empty project, use the prompt we used instead. It takes longer than starting from the finished app above.
Install elements: curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH Create an Elements app: cd ~/elements/projects elements create sketchmoor cd sketchmoor Start the app, then build this: Build a collaborative whiteboard named sketchmoor. - Sign up, log in, create boards, and share a board by link with anyone who has an account. - Tools: pen with a few colors and widths, sticky notes with text, rectangles, arrows, text, and an eraser. - Move and resize shapes and notes. - Everyone on a board sees each other's cursors with their names, and every change as it happens. - Undo and redo your own changes. - A board list with thumbnails. Seed three users and two boards with content (a retro board of sticky notes, and an architecture sketch). Show the seeded logins on the sign-in page. Drawing, shapes and cursors update in real time.
Comments· 0