Programmatic control

Drive the canvas with the runtime Editor API.

Skip building basic editor APIs and start with tldraw's comprehensive runtime controls. Create, update, and orchestrate canvas interactions through clean, reactive methods that scale from simple automation to complex workflows.

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.

Learn more

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.

Learn more

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.

Learn more

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.

Learn more

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.

Learn more

Program the canvas your way

APIs for objects, state, events, and camera control let you script and automate every part of the canvas.

Product

Developers

Resources

Product

Developers

Resources

Product

Developers

Resources

Product

Developers

Resources