tldraw/tldraw — A production-grade, infinitely extensible React SDK for building collaborative whiteboards, diagrams, and AI-augmented canvas apps

tldraw isn’t just another drawing library—it’s a full-featured, battle-tested canvas engine designed from the ground up for React developers who need to ship complex, real-time visual collaboration tools—fast. With 48,059 GitHub stars, adoption by Google, Shopify, Autodesk, ClickUp, Replit, and over 25 other enterprise and developer-first products, tldraw has quietly become the de facto standard for teams building beyond basic SVG doodling: think whiteboarding in AI chat interfaces, node-based visual programming environments, real-time design collaboration, or embedded canvas widgets inside SaaS dashboards.

The pain it solves is acute and widespread: building a performant, zoomable, pannable, infinite canvas with shape snapping, multi-touch support, undo/redo, export, multiplayer sync, and custom tooling is notoriously difficult. Most teams either spend 6–12+ months reinventing low-level rendering logic (e.g., hit testing on transformed geometries), wrestling with WebSockets + CRDTs for conflict-free collaboration, or compromise on UX (e.g., no pressure-sensitive drawing, broken mobile gestures, or janky pan/zoom). tldraw obliterates that tradeoff. It ships with zero dependencies on external renderers (uses native DOM + <canvas> + <svg> compositing), supports all input modalities (mouse, touch, stylus, keyboard), and runs flawlessly on desktop, tablet, and mobile—without requiring separate code paths.

Key features reflect its “engine-first” philosophy:
✅ True infinite canvas — seamless panning/zooming at arbitrary scale, backed by spatial indexing and view frustum culling.
✅ Multiplayer out of the box — via @tldraw/sync, a lightweight, self-hostable sync layer built on Cloudflare Durable Objects (used in production at tldraw.com). No vendor lock-in; bring your own backend.
✅ Runtime Editor API — programmatically create shapes, select elements, trigger tools, or listen to events like shape:created or camera:changed. This powers AI agents that read and edit canvases—see Luma, Runway, and Replit’s Canvas integrations.
✅ Full extensibility surface — define custom shapes (with custom rendering, geometry, and serialization), tools (e.g., a “mind map connector” or “code block embedder”), bindings (e.g., auto-linking between notes), UI components (replace the toolbar or context menu), and side effects (e.g., auto-save to Supabase).
✅ AI-native primitives — first-class support for image uploads, text-to-shape generation, canvas-aware LLM prompting, and embedding live web content (YouTube, Figma, GitHub repos) as interactive shapes.

Typical usage starts with one import—and scales linearly with complexity. Here’s the minimal runnable example:

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
 
export default function Whiteboard() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Tldraw />
    </div>
  )
}

That’s it. You get a fully functional whiteboard—including keyboard shortcuts, right-click menus, shape libraries, and export—in under 5 lines. But the real power emerges when you go deeper: swap in a custom shape (e.g., a draggable “API endpoint” node), add a useEditor() hook to auto-sync selections to your app state, or wrap <Tldraw /> with SyncProvider to enable real-time collaboration using your own WebSocket server.

tldraw is for React teams shipping products where visual expression matters: product designers building internal ideation tools, AI startups adding sketch-to-code workflows, edtech platforms enabling collaborative problem solving, or dev tools embedding canvas-based debugging or architecture mapping. It’s not for hobbyists seeking quick sketch pads—but for engineers who need production-grade canvas infrastructure without building it themselves. And with MIT-licensed starter kits (Multiplayer, Agent, Workflow, Chat, etc.), even prototyping goes from weeks to minutes. If your next feature involves drawing, connecting, annotating, or reasoning about visual structure—tldraw isn’t just an option. It’s the fastest path to shipping.