Programmatic navigation
Control camera position and zoom with smooth animations and precise positioning. Set coordinates, center on content, or create guided navigation experiences programmatically.
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.
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.
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.
Zach Blodgett,Staff Product Managerat
"tldraw’s technology enabled us to deliver a high-quality foundation and also develop native functionality ourselves. The technology and team have been great to work with."
ClickUp modernized its whiteboard for millions of users, replacing legacy infrastructure with the tldraw SDK.
Solid engineering
Our team spent years to get all the details right, so you don’t have to.
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.
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.
examples
See for yourself
Have a look at our examples on how to programmatically control you canvas navigation.
Camera options
Configure camera constraints, bounds, and navigation behavior.
Lock camera zoom
Implement zoom restrictions and controlled navigation states.
Deep link navigation
Manage sharing permissions with editor and viewer access controls.
Canvas with a view
Intelligent zoom and pan keep content framed exactly where it should be.