tldraw

tldraw is the SDK behind tldraw.com, packaged as a drop-in React component (<Tldraw />) plus a full editor API for building infinite canvas applications. It ships a complete whiteboarding tool set out of the box — pen and shape tools, arrows with snapping, rich text, image/video embeds, and image export — while exposing the same primitives (shapes, tools, bindings, UI components, side effects, and event hooks) that power the shipped product, so teams can replace or extend any part of it.

Beyond the core drawing surface, the ecosystem includes @tldraw/sync for self-hostable real-time multiplayer collaboration (the same stack behind tldraw.com, built on Cloudflare Durable Objects), plus starter kits (create-tldraw) for common app shapes like AI chat canvases, workflow/node-based builders, and canvas-driven AI agents. It’s used in production by companies including Google, Shopify, Autodesk, and Replit to embed canvas experiences directly into their own products.

What You Get

• A drop-in <Tldraw /> React component with a complete whiteboarding UI — drawing, shapes, arrows, text, and image/video embeds — ready to mount with a few lines of code
• A low-level Editor API for driving the canvas at runtime: creating and mutating shapes, controlling the camera, and reacting to changes via side effects and event hooks
• An extensibility layer for custom shapes, tools, bindings, and UI components, so the default tool set can be replaced or extended rather than forked
• Self-hostable real-time multiplayer via the companion @tldraw/sync package, using the same architecture that backs tldraw.com
• Starter kits (via create-tldraw) scaffolding common app patterns — AI chat canvases, workflow builders, image pipelines, and branching chat UIs
• Canvas primitives designed for AI integrations, for building LLM-driven agents that read, interpret, and modify canvas content

Common Use Cases

• Embedding a whiteboard or diagramming surface directly into a SaaS product (as done by Shopify, ClickUp, and Padlet)
• Building collaborative, multiplayer canvas tools for design, brainstorming, or annotation
• Building AI-native interfaces where an agent can read and modify a shared visual canvas
• Building visual/no-code workflow builders and node-based editors on top of the shape and binding primitives
• Prototyping new canvas-based app concepts quickly using the official starter kits

Under The Hood

Architecture tldraw is organized as a layered monorepo: @tldraw/state provides a signals-based reactive core, @tldraw/store layers a normalized reactive record store on top of it, @tldraw/editor builds the Editor class, shape/tool/binding abstractions, and rendering pipeline on that store, and the top-level tldraw package (packages/tldraw/src) composes the editor with a default shape/tool set and a full UI (src/lib/ui), exposed through the single <Tldraw /> component in Tldraw.tsx. Real-time collaboration is factored out into separate @tldraw/sync/@tldraw/sync-core packages that connect to the same store via a websocket protocol, keeping multiplayer optional rather than baked into the core editor.

Tech Stack The SDK is TypeScript-first (React 18/19 as peer dependencies), built with Yarn workspaces and a custom lazyrepo/tsx-based build pipeline (internal/scripts/build-package.ts). The tldraw package itself pulls in Tiptap/ProseMirror (@tiptap/*) for rich text inside shapes, radix-ui for accessible UI primitives, idb for local persistence, and lz-string for compact serialization, while depending on the sibling @tldraw/editor, @tldraw/state, @tldraw/store, and @tldraw/tlschema workspace packages for its core engine and schema validation.

Code Quality The repo has an extensive automated test surface: hundreds of colocated .test.ts/.test.tsx files across the tldraw and editor packages, run through Vitest with per-package configs aggregated by a root vitest.config.ts, plus separate Playwright suites for end-to-end, cross-browser, and performance testing (.github/workflows/playwright-*.yml). Linting is enforced via a heavily customized oxlint configuration with project-specific plugins, and CI runs a dedicated checks.yml workflow alongside license reporting and i18n string sync jobs — indicating a mature, actively maintained release process even though the project is not open to outside contributions.

What Makes It Unique Unlike most canvas or diagramming libraries that ship a single fixed tool set, tldraw exposes the same shape/tool/binding/UI primitives it uses internally, letting adopters swap out or extend any layer without forking the renderer. Combining that extensibility with a self-hostable real-time sync layer and dedicated AI-canvas primitives — for agents that read and modify canvas state — is a combination not commonly found together in comparable open-source canvas SDKs.