Runtime editor API
Direct programmatic control over your canvas application during runtime.
Key features
Key features
Key features
Key features
Shape operations
Create, modify, and remove shapes programmatically with full validation and consistency. Perfect for content generators, import systems, and automated drawing tools.
Shape operations
Create, modify, and remove shapes programmatically with full validation and consistency. Perfect for content generators, import systems, and automated drawing tools.
Shape operations
Create, modify, and remove shapes programmatically with full validation and consistency. Perfect for content generators, import systems, and automated drawing tools.
Shape operations
Create, modify, and remove shapes programmatically with full validation and consistency. Perfect for content generators, import systems, and automated drawing tools.
Selection management
Control user focus by programmatically managing selections and highlights. Guide users’ attention through complex documents and coordinate multi-step workflows.
Selection management
Control user focus by programmatically managing selections and highlights. Guide users’ attention through complex documents and coordinate multi-step workflows.
Selection management
Control user focus by programmatically managing selections and highlights. Guide users’ attention through complex documents and coordinate multi-step workflows.
Selection management
Control user focus by programmatically managing selections and highlights. Guide users’ attention through complex documents and coordinate multi-step workflows.
Camera control
Direct viewport positioning and zoom levels with smooth animations. Build guided tours, presentation modes, and focus systems that automatically highlight relevant content.
Camera control
Direct viewport positioning and zoom levels with smooth animations. Build guided tours, presentation modes, and focus systems that automatically highlight relevant content.
Camera control
Direct viewport positioning and zoom levels with smooth animations. Build guided tours, presentation modes, and focus systems that automatically highlight relevant content.
Camera control
Direct viewport positioning and zoom levels with smooth animations. Build guided tours, presentation modes, and focus systems that automatically highlight relevant content.
Batch transactions
Group multiple operations into atomic changes with clean undo/redo boundaries.
Batch transactions
Group multiple operations into atomic changes with clean undo/redo boundaries.
Batch transactions
Group multiple operations into atomic changes with clean undo/redo boundaries.
Batch transactions
Group multiple operations into atomic changes with clean undo/redo boundaries.
Real-time queries
Access live canvas state through reactive queries that update automatically.
Real-time queries
Access live canvas state through reactive queries that update automatically.
Real-time queries
Access live canvas state through reactive queries that update automatically.
Real-time queries
Access live canvas state through reactive queries that update automatically.
Event integration
Build analytics systems, collaboration features, and custom interaction patterns by hooking into editor events and state changes.
Event integration
Build analytics systems, collaboration features, and custom interaction patterns by hooking into editor events and state changes.
Event integration
Build analytics systems, collaboration features, and custom interaction patterns by hooking into editor events and state changes.
Event integration
Build analytics systems, collaboration features, and custom interaction patterns by hooking into editor events and state changes.
Build canvas apps that work
Runtime APIs handle content generation, guided tours, and automated drawing workflows.
Build canvas apps that work
Runtime APIs handle content generation, guided tours, and automated drawing workflows.
Build canvas apps that work
Runtime APIs handle content generation, guided tours, and automated drawing workflows.
Build canvas apps that work
Runtime APIs handle content generation, guided tours, and automated drawing workflows.
Engineering details
Engineering details
Engineering details
Engineering details
Advanced selection and focus systems
The system enables precise control of user attention through programmatic selection and focus management. It supports complex selection patterns, hierarchical focus within groups, and intelligent viewport coordination. Selection integrates smoothly with keyboard navigation, accessibility features, and collaborative cursor management.
Advanced selection and focus systems
The system enables precise control of user attention through programmatic selection and focus management. It supports complex selection patterns, hierarchical focus within groups, and intelligent viewport coordination. Selection integrates smoothly with keyboard navigation, accessibility features, and collaborative cursor management.
Advanced selection and focus systems
The system enables precise control of user attention through programmatic selection and focus management. It supports complex selection patterns, hierarchical focus within groups, and intelligent viewport coordination. Selection integrates smoothly with keyboard navigation, accessibility features, and collaborative cursor management.
Advanced selection and focus systems
The system enables precise control of user attention through programmatic selection and focus management. It supports complex selection patterns, hierarchical focus within groups, and intelligent viewport coordination. Selection integrates smoothly with keyboard navigation, accessibility features, and collaborative cursor management.
Comprehensive shape lifecycle management
The editor provides complete control over shape creation, modification, and deletion with the same validation and consistency guarantees as user interactions. Programmatic operations automatically respect shape relationships, maintain bindings, and trigger the correct side effects across the canvas. The API also provides type-safe methods for bulk actions, transaction management, and constraint validation.
Comprehensive shape lifecycle management
The editor provides complete control over shape creation, modification, and deletion with the same validation and consistency guarantees as user interactions. Programmatic operations automatically respect shape relationships, maintain bindings, and trigger the correct side effects across the canvas. The API also provides type-safe methods for bulk actions, transaction management, and constraint validation.
Comprehensive shape lifecycle management
The editor provides complete control over shape creation, modification, and deletion with the same validation and consistency guarantees as user interactions. Programmatic operations automatically respect shape relationships, maintain bindings, and trigger the correct side effects across the canvas. The API also provides type-safe methods for bulk actions, transaction management, and constraint validation.
Comprehensive shape lifecycle management
The editor provides complete control over shape creation, modification, and deletion with the same validation and consistency guarantees as user interactions. Programmatic operations automatically respect shape relationships, maintain bindings, and trigger the correct side effects across the canvas. The API also provides type-safe methods for bulk actions, transaction management, and constraint validation.
Professional camera and viewport control
The system offers advanced camera control with smooth animations, intelligent bounds handling, and seamless viewport transitions. It provides precise coordinate control, configurable easing functions, and automatic conflict resolution between programmatic and user-driven changes. All operations adapt to responsive design constraints and device-specific interaction patterns.
Professional camera and viewport control
The system offers advanced camera control with smooth animations, intelligent bounds handling, and seamless viewport transitions. It provides precise coordinate control, configurable easing functions, and automatic conflict resolution between programmatic and user-driven changes. All operations adapt to responsive design constraints and device-specific interaction patterns.
Professional camera and viewport control
The system offers advanced camera control with smooth animations, intelligent bounds handling, and seamless viewport transitions. It provides precise coordinate control, configurable easing functions, and automatic conflict resolution between programmatic and user-driven changes. All operations adapt to responsive design constraints and device-specific interaction patterns.
Professional camera and viewport control
The system offers advanced camera control with smooth animations, intelligent bounds handling, and seamless viewport transitions. It provides precise coordinate control, configurable easing functions, and automatic conflict resolution between programmatic and user-driven changes. All operations adapt to responsive design constraints and device-specific interaction patterns.
Asset handling and storage integration
Large assets like images and videos are handled separately from real-time synchronization to maintain performance. Files are uploaded to cloud storage (R2) and cached on Cloudflare's edge network. In this way, loading is fast worldwide, and WebSocket connections stay focused on lightweight canvas interactions data.
Asset handling and storage integration
Large assets like images and videos are handled separately from real-time synchronization to maintain performance. Files are uploaded to cloud storage (R2) and cached on Cloudflare's edge network. In this way, loading is fast worldwide, and WebSocket connections stay focused on lightweight canvas interactions data.
Asset handling and storage integration
Large assets like images and videos are handled separately from real-time synchronization to maintain performance. Files are uploaded to cloud storage (R2) and cached on Cloudflare's edge network. In this way, loading is fast worldwide, and WebSocket connections stay focused on lightweight canvas interactions data.
Asset handling and storage integration
Large assets like images and videos are handled separately from real-time synchronization to maintain performance. Files are uploaded to cloud storage (R2) and cached on Cloudflare's edge network. In this way, loading is fast worldwide, and WebSocket connections stay focused on lightweight canvas interactions data.
Multiplayer starter kit
Self-hosted tldraw with real-time multiplayer collaboration built with Cloudflare Durable Objects. Production-ready backend that handles WebSocket connections, automatic persistence, and asset management. The same architecture that powers hundreds of thousands of collaborative sessions on tldraw.com.
Multiplayer starter kit
Self-hosted tldraw with real-time multiplayer collaboration built with Cloudflare Durable Objects. Production-ready backend that handles WebSocket connections, automatic persistence, and asset management. The same architecture that powers hundreds of thousands of collaborative sessions on tldraw.com.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Examples
Examples
Examples
Examples
Endless room to explore
From small sketches to sprawling systems, the canvas adapts to your needs.
Endless room to explore
From small sketches to sprawling systems, the canvas adapts to your needs.
Endless room to explore
From small sketches to sprawling systems, the canvas adapts to your needs.
Endless room to explore
From small sketches to sprawling systems, the canvas adapts to your needs.
© 2025 tldraw