tldraw
Free tierFree and instant collaborative whiteboarding for everyone
Free tier available·All audiences·Powered by OpenAI·API available·Open source
Key strengths
Real-time multiplayer collaboration with zero setupOpen-source and embeddable as an SDK/libraryInfinite canvas with rich drawing and diagramming toolsAI-powered features for generating diagrams and UI mockupsLightweight, instant, and browser-based — no install required
Free tier + paid plans
London, United Kingdom
Founded 2021
Self-hostable
No ratings yet
Developer Setup & API Usage
Installation
npm install tldraw
Basic Embedding (React)
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function App() {
return <Tldraw />
}
Key Packages
| Package | Purpose |
|---|---|
tldraw | Core React component + editor |
@tldraw/sync | Real-time collaboration / CRDT sync |
@tldraw/store | Observable state store |
Custom Shapes & Tools
Extend the editor by passing shapeUtils and tools props. Each custom shape defines a type, a component (React), and an indicator. Override default behaviors via the Editor API (editor.createShapes(), editor.updateShapes(), etc.).
Persistence & Sync
Use @tldraw/sync with a Node.js/Bun WebSocket server for real-time multi-user sync. For simple persistence, subscribe to editor.store changes and serialize to JSON with editor.store.getSnapshot().
AI Integration
The makeReal pattern sends a canvas snapshot (as an SVG/PNG data URL) to an LLM (e.g., GPT-4o) and renders the HTML response in an iframe shape on the canvas — fully customizable.