Navigate the canvas smoothly with zoom and flexible viewport positioning.
Smart zoom
Add intuitive zooming that steps smoothly in and out, always landing at the right level of detail with content-aware calculations.
Camera constraints
Set flexible camera boundaries tailored to your app’s needs, from free-flow movement to contained views, or more fine-tuned solutions.
Optimized smooth animations
Customize fluid transitions to match your brand and adapt to your users’ needs, optimized across all devices with built-in viewport culling and level-of-detail scaling.
Viewport following
Build real-time camera synchronization so your users stay in sync. Perfect for presentation modes, guided tours, or restricted editing workflows.
Own the viewport
Add precise zoom, pan, and navigation to your canvas in minutes, not weeks.
Solid engineering
Our team spent years to get all the details right, so you don’t have to.
Screen and page space translation
Our camera system maintains dual coordinate system with precise translation between the screen space and page space. Regardless of zoom level, it creates accurate hit testing and shape positioning. Screen space handles UI positioning and input events relative to the browser viewport, while page space manages canvas content with precision.
Intelligent zoom management
The zoom system operates on step-based architecture rather than continuous scaling. Our base zoom calculations automatically determine optimal zoom levels based on content bounds. This prevents jarring zoom jumps and maintains visual coherence. Even when zoom levels are customized, they will still feel natural and predictable to users.
Performance-optimized rendering pipeline
The camera system relies on tldraw’s rendering pipeline to maintain smooth performance during movements and zoom operations. It optimizes rendering by culling shapes outside the viewport, scaling level of detail based on zoom, synchronizing updates with the browser’s refresh cycles, and using memory-efficient viewport tracking to minimize computational overhead. All of this ensures smooth interactions across all users, tabs, and devices.
Starter kits
Production ready starter kit to build a workflow canvas. Building something different?
Examples
See for yourself
Have a look at our examples on how to implement camera and viewport features.
Camera options configuration
Configure camera constraints, zoom behaviors, and navigation controls for custom canvas experiences.
Lock camera zoom
Implement zoom locking functionality to constrain user navigation for focused editing experiences.
Slides with viewport following
Build application-specific navigation patterns with programmatic camera positioning and constraint management.
Drawing that feels right
Freehand drawing and shapes built in for your app.