Control
Drive the canvas
Skip building basic editor APIs and start with tldraw's comprehensive runtime controls.
Shape operations
Create, modify, and remove shapes programmatically with full validation and consistency. Perfect for content generators, import systems, and automated drawing tools.
Lifecycle hooks
Capture create, update, and delete operations before or after they run. Register handlers for specific record types with full state access for optimized decisions.
Programmatic navigation
Control camera position and zoom with smooth animations and precise positioning. Set coordinates, center on content, or create guided navigation experiences programmatically.
Real-time synchronization
Enjoy a built-in support for collaborative editing with conflict resolution and state reconciliation across multiple users and devices.
And so much more
Create, update, and orchestrate canvas interactions through clean, reactive methods that scale from simple automation to complex workflows.
Runtime editor API
A single Editor instance gives you full programmatic control over the canvas. You can create shapes, manage selections, switch tools, and coordinate complex operations through a reactive API that keeps everything in sync. Use it to build real-time data visualizations, generate diagrams from code, or create guided tutorials that manipulate the canvas programmatically. The runtime API handles the complexity so you can stay focused on application logic.
Event handling
The event system lets you hook into every interaction and canvas change. Listen for shape creation, deletion, selection updates, and user input to make your app respond to both user actions and programmatic changes. Build analytics dashboards, custom undo systems, or collaborative features that sync with external services. The API gives you the hooks you need without extra complexity.
State management and control
Reactive state management keeps the canvas and your application in sync. Changes flow automatically through computed values and subscriptions, removing the need for manual synchronization and avoiding consistency bugs. You can build complex apps where canvas state drives UI updates, external data maps to shapes, and user interactions trigger cascading changes. The state system manages dependencies so you can focus on features.
Creating and updating shapes
Use clean APIs to generate shapes from data, automate layouts, and run complex transformations. Create single shapes or batches, animate updates, and manage hierarchies with methods that handle the math for you. Build diagram generators, data visualizations, or automated design systems. Whether you’re placing one rectangle or hundreds of connected shapes, the creation APIs deliver precision and performance.
Viewport and camera control
Programmatic camera control lets you guide navigation, focus attention, and build dynamic presentations. Pan, zoom, and animate the viewport with smooth transitions that blend seamlessly with user input. Use it to create interactive tours, focus modes, or presentation systems that direct attention where it’s needed. The camera system provides frame-perfect control while keeping the experience natural for users.
Build with a starter kit
Production ready starter kit to add a chat to your canvas. Building something different?
Simplify asset handling
Support images, video, text, and custom content types without extra hassle.