tldraw

Promptfree, for everyone, and the only version there is

Copy the prompt for Claude CodeCopy the prompt for CodexCopy the prompt for Cursor

Copy

Build me the whiteboard I need instead of licensing tldraw — and read the first paragraph, because this is one of the few here where the honest answer is usually to pay.

Read this first. A canvas engine is years of work: selection, snapping, grouping, undo across multiplayer edits, hit testing, panning at sixty frames a second with ten thousand shapes, text editing inside a transformed element, touch and pen input. tldraw is free to use, and the fee is a licence to ship it inside a commercial product without the watermark. If you need a canvas in a product you sell, buy the licence — it is one of the best value-for-effort trades in this catalogue. Build only if the requirement is genuinely narrow, and then keep it narrow.

WHAT A NARROW VERSION LOOKS LIKE
- Decide in one sentence what it must do. 'Place labelled boxes and connect them' is buildable in a week. 'A whiteboard' is not
- The narrow versions that are actually worth building: a diagram editor with fixed shape types, an annotation layer over an image or a document, a floor plan with a grid, a node graph for a specific domain
- Everything below assumes one of those, not a general canvas

STACK
- Node 20+ with Fastify for persistence and collaboration
- SQLite through better-sqlite3, WAL mode
- SVG for rendering if the shape count is in the hundreds, canvas if it is in the thousands. Do not start with WebGL
- Caddy in front

THE DATA MODEL
- documents: id, name, owner_id, thumbnail_path, updated_at, updated_by
- shapes: id, document_id, kind, x, y, width, height, rotation, z, props_json, parent_id, updated_at — one row per shape, so a change is one write
- bindings: id, document_id, from_shape_id, to_shape_id, from_anchor, to_anchor — arrows that stay attached when their endpoints move
- versions: id, document_id, snapshot_json, label, author_id, at
- presence in memory: document_id, user_id, cursor, selection — never stored
- Z-order as fractional indices, not integers. Integer ordering means renumbering on every move, and floats run out of precision after enough edits

THE HARD PARTS, SO YOU KNOW WHAT YOU ARE SIGNING UP FOR
- Hit testing: which shape is under the pointer, including rotated and grouped ones, at interactive speed
- Selection: click, shift-click, marquee, click-through to a shape inside a group, and a resize handle set that behaves correctly when rotated
- Snapping: to other shapes' edges and centres, to a grid, with guides drawn — and it must feel good, which is a matter of thresholds tuned by hand rather than a formula
- Undo and redo as a command stack, where every operation is invertible. Retrofitting undo is far harder than building it in from the first commit, so build it first
- Text inside a shape: editing, wrapping, auto-sizing, and staying legible when the shape is rotated or scaled
- Touch and pen: two-finger pan and zoom, palm rejection, pressure. A canvas that only works with a mouse excludes exactly the people who most want one
- Performance: virtualise by viewport, batch renders to animation frames, and never re-render everything on a pointer move

COLLABORATION
- Use an existing conflict-free replicated data type library. Writing one is a research project and getting it subtly wrong loses people's work
- Shape-level granularity: two people moving different shapes must never conflict, and two people moving the same one resolves to a single position rather than a jitter
- Presence with cursors and selection, and a follow mode
- The server is a relay plus a periodic persister, writing the document every few seconds and when the last person leaves

WHAT NOT TO BUILD
- Freehand drawing with pressure-sensitive smoothing. It looks simple and it is genuinely difficult
- Infinite canvas with infinite zoom, unless you need it. Bounded is much easier and usually enough
- A general shape system with plugins. Fixed kinds are half the code and all of the reliability

EXPORT
- SVG and PNG at chosen scale, and PDF
- The document as JSON, in a format you have documented, so it is never trapped
- A read-only share link with a token, revocable

OPERATIONS
- .env: DATABASE_PATH, STORAGE_PATH, BASE_URL, SESSION_SECRET
- Migrations on boot, each once
- The collaboration relay in its own process
- Nightly backup off the machine, restore script
- Health endpoint

WHAT MATTERS MOST
Undo and hit testing, and the discipline to stay narrow. Build the command stack before the second shape type exists, and revisit the licence question honestly after a week — if you find yourself building a general canvas, buy the one that already works and spend the time on your actual product.

Give me the repository, the canvas with three fixed shape kinds, the undo stack, migrations, .env.example, and a README that opens with the scope decision.