Tldraw

At a Glance:

tldraw is an open-source infinite canvas SDK for React that provides a complete engine for building custom canvas applications with multiplayer collaboration, custom shapes and tools, and AI integration primitives.

Overview:

tldraw is an open-source infinite canvas SDK for React that serves as a foundation for building custom canvas-based applications. It provides a feature-complete canvas engine with drawing, diagramming, and multiplayer capabilities, along with APIs for creating custom shapes, tools, bindings, and UI components. Developers can use the default whiteboarding tool set or build entirely new interactions using the library's primitives. The project targets developers building canvas apps, visual programming interfaces, AI-powered drawing tools, and interactive whiteboarding experiences across desktop, tablet, and mobile browsers.

Key Decision Points:

• React-based SDK: Integrates as a React component library, requiring familiarity with React to build custom canvas applications

• Self-hostable multiplayer: Real-time collaboration is supported through @tldraw/sync and can be self-hosted using Cloudflare Durable Objects

• Runtime Editor API: Provides programmatic control over the canvas at runtime, enabling automation and dynamic content manipulation

• Extensibility model: Supports custom shapes, tools, bindings, UI components, side effects, and event hooks for tailored canvas experiences

• Starter kits available: MIT-licensed starter kits provide pre-built implementations for multiplayer, AI agents, workflow builders, chat interfaces, and more

Core Features:

• Multiplayer collaboration: Real-time collaborative editing powered by @tldraw/sync, with self-hostable infrastructure using Cloudflare Durable Objects

• Drawing and diagramming: Pressure-sensitive drawing, geometric shapes, rich text, arrows, shape snapping, edge scrolling, image and video support, and image export

• Runtime Editor API: Programmatic canvas manipulation through the Editor API for driving canvas state at runtime

• Custom shape and tool system: Extensible architecture for defining custom shapes, tools, bindings, UI components, side effects, and event hooks

• AI integration primitives: Canvas primitives designed for building applications with large language models

• DOM-based rendering: Web rendering supports embedded content from platforms like YouTube, Figma, and GitHub alongside canvas elements

Use Cases:

• Developers building custom whiteboarding or diagramming applications with real-time collaboration

• Developers creating AI-powered canvas tools where agents read, interpret, and modify canvas content

• Developers prototyping visual programming interfaces, automation pipelines, and no-code platforms using the workflow starter kit

• Developers building image generation pipelines with node-based interfaces

Open-Source Alternative Value:

tldraw provides an open-source SDK that gives developers the same infinite canvas engine used by tldraw.com, with full access to the source code for customization and extension. The self-hostable multiplayer infrastructure allows teams to run real-time collaboration on their own infrastructure using @tldraw/sync and Cloudflare Durable Objects. The MIT-licensed starter kits provide reference implementations for common patterns including multiplayer whiteboarding, AI agents, and visual workflow builders, which developers can use directly or study when building their own canvas applications. The extensible architecture through custom shapes, tools, and UI components means developers can build canvas experiences that diverge significantly from the default whiteboarding tool set.