tldraw Is Not Just a Whiteboard: 14 Things You Can Build

Most people meet tldraw as a polished online whiteboard. That is the least interesting way to think about it.

The public tldraw SDK is a programmable React-based infinite canvas. Its shapes can be live application components. Its editor can be driven through code. Its tools, bindings, storage, synchronization, files, and interface can all be extended. That makes it a foundation for an entire class of spatial software.

If your product benefits from arranging interactive things in space, connecting them, collaborating on them, or letting an AI manipulate them visually, tldraw deserves a serious look.

1. Build serious whiteboards and diagram editors

The obvious starting point is still a strong one. tldraw gives you the interaction model expected from a modern canvas: pan, zoom, selection, grouping, snapping, alignment, resize, rotation, rich text, arrows, frames, pages, undo and redo, keyboard controls, drag and drop, and clipboard behavior.

• Products: collaborative whiteboards, flowchart tools, mind maps, architecture diagrams, project-planning boards, network maps, database designers, storyboards, and process editors

• Why it matters: you start from a mature editor instead of rebuilding years of difficult pointer, camera, selection, and geometry behavior

2. Turn React components into canvas shapes

This is the conceptual unlock. A custom tldraw shape can be a live React component rather than a painted rectangle. It can contain application state, controls, media, charts, status, or data from your backend while still participating in selection, movement, resizing, grouping, history, export, and collaboration.

• Custom shape ideas: database tables, code cards, workflow nodes, live dashboards, image viewers, maps, videos, forms, game pieces, server monitors, model endpoints, and mini application windows

• Deep control: custom geometry, resize behavior, handles, selection indicators, text extraction, accessibility descriptions, migrations, and exported appearance

At that point, the infinite canvas stops being a drawing surface and becomes a spatial application shell.

3. Invent entirely new tools

tldraw tools are state-machine interactions. You can create domain-specific ways of adding and manipulating content instead of forcing every workflow through the default pointer and drawing tools.

• Interaction patterns: click-to-place, drag-to-create, multi-step connectors, measurement, floor-plan walls, timeline authoring, port wiring, guided annotation, lasso analysis, and game controls

• Input: pointer, touch, keyboard, focus, edge scrolling, click detection, and camera behavior can participate in the experience

4. Model real relationships with bindings

Objects that only look connected will break the moment users move them. Bindings preserve semantic relationships between shapes.

• Examples: arrows attached to boxes, workflow edges attached to ports, UML relationships, anchored labels, parent-child systems, map annotations, constraints, dependencies, and electrical connections

Bindings let a canvas represent a real graph, not just a picture of one.

5. Build visual workflow and automation products

The official Workflow starter kit demonstrates drag-and-drop nodes, connections, routing, and a replaceable execution engine. It is a strong foundation for products in the territory of n8n, ComfyUI, Langflow, or Node-RED, especially when the domain needs a purpose-built interface.

• Use cases: AI agent pipelines, ETL systems, no-code automation, data transformations, deployment workflows, creative pipelines, and domain-specific visual programming

• Execution: the canvas can be the editor while your own engine validates and runs the graph

6. Give an AI eyes and hands on the canvas

A canvas can become structured visual context for an AI. Instead of producing a flat image, an agent can inspect objects and issue controlled actions that create, update, connect, move, group, or explain them.

• Experiences: prompt-to-diagram, prose-to-architecture, sketch recognition, automatic layout, diagram critique, visual planning, selection-based transformations, and canvas-aware assistants

• Official foundations: Agent, Chat, Branching Chat, Workflow, and Image Pipeline starter kits cover several of these patterns

Provider-backed behavior still depends on the model, credentials, quotas, and deployment environment. The SDK provides the visual foundation; it does not guarantee model quality.

7. Add real-time multiplayer

With tldraw sync, the same canvas can become a persistent multi-user room. Users can edit together while seeing cursors, presence, identities, camera-following behavior, and custom collaboration state.

• Products: shared whiteboards, remote classrooms, design reviews, incident rooms, planning boards, multiplayer tabletop surfaces, and living documentation

• Production concerns: room isolation, authentication, asset storage, explicit origins, persistence, permissions, and treating sync metadata as untrusted input

The production path is self-hosted. You do not need private tldraw.com internals to build it.

8. Treat the canvas as durable application data

The editor sits on a reactive store containing shapes, bindings, pages, assets, and other records. Applications can observe state, validate it, attach side effects, maintain history, and persist it locally or remotely.

• Persistence: IndexedDB-backed local persistence, cross-tab synchronization, backend storage, snapshots, room storage, and custom records

• Evolution: schema migrations let custom shapes and metadata survive product changes

• Navigation: deep links can target pages, shapes, or canvas positions

9. Use .tldr as a real document format

Applications can parse and serialize official .tldr documents using the active application schema. This supports import, export, backups, document libraries, and round trips through a fresh editor.

The important detail is to use tldraw’s official serializers and parser rather than hand-writing JSON. A document containing custom shapes is only portable to another host that registers the same schema and shape utilities.

10. Turn Mermaid into editable native objects

The @tldraw/mermaid package converts Mermaid syntax into native tldraw shapes and connections instead of flattening it into a static SVG.

• What that enables: diagram-as-code editors, architecture documentation, sequence flows, paste-Mermaid-to-canvas, repository visualization, and AI-generated diagrams that humans can continue editing

Mermaid can be an interchange format while tldraw remains the interactive editing environment.

11. Export, present, and embed

Canvas content can become SVG or raster images for thumbnails, reports, previews, documentation, print workflows, and social graphics. Custom shapes can define how they appear in exports.

• Presentation modes: read-only viewers, controlled camera experiences, slide decks, fixed-camera presentations, and embedded interactive diagrams

• Product integration: the canvas can sit inside a larger React application with your own sidebars, inspectors, commands, dialogs, and data model

12. Build annotation and education tools

Spatial markup is useful wherever text alone is not enough.

• Examples: image annotation, screenshot feedback, PDF-page markup, exam grading, visual tutoring, design review, medical-image annotation, lesson planning, and remote classrooms

Custom shapes can expose semantic text and accessibility descriptions, making visual content more searchable and useful to assistive technology.

13. Replace the entire interface

You can keep the familiar canvas behavior while replacing the surrounding product UI. Menus, toolbars, context menus, overlays, actions, shortcuts, panels, and preferences can be customized or removed.

• Modes: minimal editor, read-only viewer, permission-aware workspace, branded SaaS product, focused annotation tool, or full domain-specific application

• Platform details: themes, internationalization, user preferences, reduced motion, focus, keyboard access, and custom UI primitives are part of the public feature surface

14. Make things that do not resemble whiteboards at all

The official examples are the best proof of how far the model can stretch. They include a D3 map, PDF editor pattern, image annotator, exam marking, slideshows, fog of war, tower defense, a gravity simulation, shader backgrounds, a snowstorm, a timeline scrubber, and hundreds of Mermaid diagrams.

tldraw is DOM-based, so it is not a replacement for a high-frame-rate game engine. It is exceptionally good, however, at spatial interfaces, simulations, tabletop systems, visual tools, and products where interactive objects matter more than raw rendering throughput.

The opportunities I would build for local AI

• Agent trace debugger: visualize tool calls, handoffs, token use, latency, failures, and retries as a living graph

• Local AI architecture lab: drag models, GPUs, vector stores, routers, tools, and agents onto the canvas, then simulate requests through them

• Visual inference router: connect local and cloud models through conditional routing nodes and inspect execution live

• Benchmark arena: compare model outputs, metrics, prompts, and artifacts spatially instead of burying them in tables

• Training-data pipeline: connect ingestion, filtering, deduplication, scoring, review, and export stages

• DGX Spark control room: represent active models, ports, memory pressure, queues, and workloads as live shapes

• AI system-design board: let an agent read the architecture and identify missing dependencies, bottlenecks, or security boundaries

Where the Hermes tldraw skill fits

I built a Hermes skill to give agents version-aware guidance for the public tldraw SDK. It covers project inspection, Editor and store APIs, custom shapes, tools, bindings, .tldr files, migrations, export, Mermaid, sync, browser automation, starter evaluation, security, and deployment boundaries.

Install it with: hermes skills install r0b0tlab/tldraw-skill/skills/tldraw

Repository: https://github.com/r0b0tlab/tldraw-skill

The practical boundary

tldraw is strongest for React web applications whose core interaction is arranging and connecting interactive objects in space. Use documented public SDK APIs rather than private tldraw.com internals, inspect the version installed in your project, and test the complete browser experience rather than trusting types alone.

The SDK is source-available under the tldraw license, not MIT. Production projects need to review current license-key and attribution requirements. Official starter code may have its own license, but that does not relicense the SDK dependency.

The takeaway

The infinite canvas is becoming a new application surface. It is where diagrams become executable, AI gets visual context, multiplayer becomes spatial, and application objects can be arranged as naturally as ideas on a wall.

tldraw is not merely a place to draw software diagrams. It is a toolkit for turning diagrams into software.