Precise camera and viewport control
Navigate the canvas smoothly with zoom and flexible viewport positioning.
Key features
Key features
Key features
Key features
Smart zoom
Add intuitive zooming that steps smoothly in and out, always landing at the right level of detail with content-aware calculations.
Smart zoom
Add intuitive zooming that steps smoothly in and out, always landing at the right level of detail with content-aware calculations.
Smart zoom
Add intuitive zooming that steps smoothly in and out, always landing at the right level of detail with content-aware calculations.
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.
Camera constraints
Set flexible camera boundaries tailored to your app’s needs, from free-flow movement to contained views, or more fine-tuned solutions.
Camera constraints
Set flexible camera boundaries tailored to your app’s needs, from free-flow movement to contained views, or more fine-tuned solutions.
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.
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.
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.
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.
Viewport following
Build real-time camera synchronization so your users stay in sync. Perfect for presentation modes, guided tours, or restricted editing workflows.
Viewport following
Build real-time camera synchronization so your users stay in sync. Perfect for presentation modes, guided tours, or restricted editing workflows.
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.
Own the viewport
Add precise zoom, pan, and navigation to your canvas in minutes, not weeks.
Own the viewport
Add precise zoom, pan, and navigation to your canvas in minutes, not weeks.
Own the viewport
Add precise zoom, pan, and navigation to your canvas in minutes, not weeks.
Engineering details
Engineering details
Engineering details
Engineering details
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Examples
Examples
Examples
Examples
© 2025 tldraw