Navigate your canvas with precision control
Programmatically control smooth camera movement, intelligent zoom controls, and flexible viewport constraints that guide users exactly where they need to go.
Key features
Key features
Key features
Key features
Programmatic navigation
Control camera position and zoom with smooth animations and precise positioning. Set coordinates, center on content, or create guided navigation experiences programmatically.
Programmatic navigation
Control camera position and zoom with smooth animations and precise positioning. Set coordinates, center on content, or create guided navigation experiences programmatically.
Programmatic navigation
Control camera position and zoom with smooth animations and precise positioning. Set coordinates, center on content, or create guided navigation experiences programmatically.
Programmatic navigation
Control camera position and zoom with smooth animations and precise positioning. Set coordinates, center on content, or create guided navigation experiences programmatically.
Controlled constraints
Define viewport bounds, zoom limits, and pan restrictions to keep content within specific areas. Perfect for building focused experiences with guided navigation flows.
Controlled constraints
Define viewport bounds, zoom limits, and pan restrictions to keep content within specific areas. Perfect for building focused experiences with guided navigation flows.
Controlled constraints
Define viewport bounds, zoom limits, and pan restrictions to keep content within specific areas. Perfect for building focused experiences with guided navigation flows.
Controlled constraints
Define viewport bounds, zoom limits, and pan restrictions to keep content within specific areas. Perfect for building focused experiences with guided navigation flows.
Coordinate transforms
Automatic conversion between screen, viewport, and page coordinate systems for accurate positioning and hit detection without manual calculations.
Coordinate transforms
Automatic conversion between screen, viewport, and page coordinate systems for accurate positioning and hit detection without manual calculations.
Coordinate transforms
Automatic conversion between screen, viewport, and page coordinate systems for accurate positioning and hit detection without manual calculations.
Coordinate transforms
Automatic conversion between screen, viewport, and page coordinate systems for accurate positioning and hit detection without manual calculations.
Zoom intelligence
Automatic zoom-to-fit functionality with configurable zoom steps and base zoom calculations. Perfect for building applications that frame content intelligently.
Zoom intelligence
Automatic zoom-to-fit functionality with configurable zoom steps and base zoom calculations. Perfect for building applications that frame content intelligently.
Zoom intelligence
Automatic zoom-to-fit functionality with configurable zoom steps and base zoom calculations. Perfect for building applications that frame content intelligently.
Zoom intelligence
Automatic zoom-to-fit functionality with configurable zoom steps and base zoom calculations. Perfect for building applications that frame content intelligently.
Zoom, pan, no delays
Deliver smooth zoom and panning without wrestling with positioning code.
Zoom, pan, no delays
Deliver smooth zoom and panning without wrestling with positioning code.
Zoom, pan, no delays
Deliver smooth zoom and panning without wrestling with positioning code.
Zoom, pan, no delays
Deliver smooth zoom and panning without wrestling with positioning code.
Engineering details
Engineering details
Engineering details
Engineering details
Reactive position and zoom tracking
The camera system stores state in a simple coordinate structure with x and y page positions and a z zoom level. Updates trigger automatic UI rerendering through reactive atoms, while animation states indicate whether the viewport is moving or idle. It also validates constraints in real time and provides immediate access to the current camera state for coordinate calculations.
Reactive position and zoom tracking
The camera system stores state in a simple coordinate structure with x and y page positions and a z zoom level. Updates trigger automatic UI rerendering through reactive atoms, while animation states indicate whether the viewport is moving or idle. It also validates constraints in real time and provides immediate access to the current camera state for coordinate calculations.
Reactive position and zoom tracking
The camera system stores state in a simple coordinate structure with x and y page positions and a z zoom level. Updates trigger automatic UI rerendering through reactive atoms, while animation states indicate whether the viewport is moving or idle. It also validates constraints in real time and provides immediate access to the current camera state for coordinate calculations.
Reactive position and zoom tracking
The camera system stores state in a simple coordinate structure with x and y page positions and a z zoom level. Updates trigger automatic UI rerendering through reactive atoms, while animation states indicate whether the viewport is moving or idle. It also validates constraints in real time and provides immediate access to the current camera state for coordinate calculations.
Camera constraints architecture
Camera constraints offer flexible control of viewport movement through configurable bounds, padding, and behavior settings. The system supports behaviors such as free movement, fixed positioning, bounded containment, and edge-aware navigation. Constraints also account for zoom-aware bounds and enable both axis-independent control and intelligent fit-zoom transitions for complex navigation.
Camera constraints architecture
Camera constraints offer flexible control of viewport movement through configurable bounds, padding, and behavior settings. The system supports behaviors such as free movement, fixed positioning, bounded containment, and edge-aware navigation. Constraints also account for zoom-aware bounds and enable both axis-independent control and intelligent fit-zoom transitions for complex navigation.
Camera constraints architecture
Camera constraints offer flexible control of viewport movement through configurable bounds, padding, and behavior settings. The system supports behaviors such as free movement, fixed positioning, bounded containment, and edge-aware navigation. Constraints also account for zoom-aware bounds and enable both axis-independent control and intelligent fit-zoom transitions for complex navigation.
Camera constraints architecture
Camera constraints offer flexible control of viewport movement through configurable bounds, padding, and behavior settings. The system supports behaviors such as free movement, fixed positioning, bounded containment, and edge-aware navigation. Constraints also account for zoom-aware bounds and enable both axis-independent control and intelligent fit-zoom transitions for complex navigation.
Viewport coordinate systems
The viewport system manages three coordinate spaces: screen coordinates for DOM interactions, viewport coordinates for canvas rendering, and page coordinates for logical positioning. It provides automatic transformations between these spaces, such as screen-to-page for mouse input and page-to-screen for UI overlays. The system also calculates viewport bounds and performs efficient culling to optimize performance.
Viewport coordinate systems
The viewport system manages three coordinate spaces: screen coordinates for DOM interactions, viewport coordinates for canvas rendering, and page coordinates for logical positioning. It provides automatic transformations between these spaces, such as screen-to-page for mouse input and page-to-screen for UI overlays. The system also calculates viewport bounds and performs efficient culling to optimize performance.
Viewport coordinate systems
The viewport system manages three coordinate spaces: screen coordinates for DOM interactions, viewport coordinates for canvas rendering, and page coordinates for logical positioning. It provides automatic transformations between these spaces, such as screen-to-page for mouse input and page-to-screen for UI overlays. The system also calculates viewport bounds and performs efficient culling to optimize performance.
Viewport coordinate systems
The viewport system manages three coordinate spaces: screen coordinates for DOM interactions, viewport coordinates for canvas rendering, and page coordinates for logical positioning. It provides automatic transformations between these spaces, such as screen-to-page for mouse input and page-to-screen for UI overlays. The system also calculates viewport bounds and performs efficient culling to optimize performance.
Workflow starter kit
Build visual tools where users drag, connect and execute nodes to build automation pipelines within a canvas interface. Set up your first workflow builder in minutes, then customize nodes and behaviors for your specific use case. Drag-and-drop nodes, automatic connection routing, and execution management out of the box.
Workflow starter kit
Build visual tools where users drag, connect and execute nodes to build automation pipelines within a canvas interface. Set up your first workflow builder in minutes, then customize nodes and behaviors for your specific use case. Drag-and-drop nodes, automatic connection routing, and execution management out of the box.
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
Canvas with a view
Intelligent zoom and pan keep content framed exactly where it should be.
Canvas with a view
Intelligent zoom and pan keep content framed exactly where it should be.
Canvas with a view
Intelligent zoom and pan keep content framed exactly where it should be.
Canvas with a view
Intelligent zoom and pan keep content framed exactly where it should be.
© 2025 tldraw