Layout and composition
Alignment that scales from simple drag-and-drop to complex multi-object workflows.
Key features
Key features
Key features
Key features
Object alignment
Create precise object alignment systems with edge detection, center points, and distribution controls. Perfect for building design tools that need consistent spacing and professional layouts.
Object alignment
Create precise object alignment systems with edge detection, center points, and distribution controls. Perfect for building design tools that need consistent spacing and professional layouts.
Object alignment
Create precise object alignment systems with edge detection, center points, and distribution controls. Perfect for building design tools that need consistent spacing and professional layouts.
Object alignment
Create precise object alignment systems with edge detection, center points, and distribution controls. Perfect for building design tools that need consistent spacing and professional layouts.
Object ordering
Manage z-index layering with intuitive bring-to-front and send-to-back controls that handle complex multi-object hierarchies and maintain visual depth relationships.
Object ordering
Manage z-index layering with intuitive bring-to-front and send-to-back controls that handle complex multi-object hierarchies and maintain visual depth relationships.
Object ordering
Manage z-index layering with intuitive bring-to-front and send-to-back controls that handle complex multi-object hierarchies and maintain visual depth relationships.
Object ordering
Manage z-index layering with intuitive bring-to-front and send-to-back controls that handle complex multi-object hierarchies and maintain visual depth relationships.
Object grouping
Implement hierarchical object relationships that preserve individual shape properties while enabling batch operations and nested transformation behaviors.
Object grouping
Implement hierarchical object relationships that preserve individual shape properties while enabling batch operations and nested transformation behaviors.
Object grouping
Implement hierarchical object relationships that preserve individual shape properties while enabling batch operations and nested transformation behaviors.
Object grouping
Implement hierarchical object relationships that preserve individual shape properties while enabling batch operations and nested transformation behaviors.
Smart snapping
Build with tldraw’s magnetic snapping systems that guide shapes with bounds, handles, and geometric alignment for user interactions that feel natural.
Smart snapping
Build with tldraw’s magnetic snapping systems that guide shapes with bounds, handles, and geometric alignment for user interactions that feel natural.
Smart snapping
Build with tldraw’s magnetic snapping systems that guide shapes with bounds, handles, and geometric alignment for user interactions that feel natural.
Smart snapping
Build with tldraw’s magnetic snapping systems that guide shapes with bounds, handles, and geometric alignment for user interactions that feel natural.
Dynamic transformation controls
Implement multi-directional resize handles with aspect ratio preservation, rotation controls, and proportional scaling options. It also works with multi-object batch operations.
Dynamic transformation controls
Implement multi-directional resize handles with aspect ratio preservation, rotation controls, and proportional scaling options. It also works with multi-object batch operations.
Dynamic transformation controls
Implement multi-directional resize handles with aspect ratio preservation, rotation controls, and proportional scaling options. It also works with multi-object batch operations.
Dynamic transformation controls
Implement multi-directional resize handles with aspect ratio preservation, rotation controls, and proportional scaling options. It also works with multi-object batch operations.
Visual feedback
Create transformation previews, dimension indicators, and alignment guides that automatically prioritize snap targets based on proximity and user intent.
Visual feedback
Create transformation previews, dimension indicators, and alignment guides that automatically prioritize snap targets based on proximity and user intent.
Visual feedback
Create transformation previews, dimension indicators, and alignment guides that automatically prioritize snap targets based on proximity and user intent.
Visual feedback
Create transformation previews, dimension indicators, and alignment guides that automatically prioritize snap targets based on proximity and user intent.
Professional layout tools
Your users expect drag-and-drop that snaps perfectly. We handle the math.
Professional layout tools
Your users expect drag-and-drop that snaps perfectly. We handle the math.
Professional layout tools
Your users expect drag-and-drop that snaps perfectly. We handle the math.
Professional layout tools
Your users expect drag-and-drop that snaps perfectly. We handle the math.
Engineering details
Engineering details
Engineering details
Engineering details
Screen vs page coordinates
tldraw’s layout system manages two coordinate spaces. Screen coordinates handle UI interactions and viewport positioning, while page coordinates maintain object relationships independent of zoom and pan state. This dual-coordinate approach enables consistent manipulation behavior regardless of canvas transform state. where users can manipulate objects at different viewport scales simultaneously.
Screen vs page coordinates
tldraw’s layout system manages two coordinate spaces. Screen coordinates handle UI interactions and viewport positioning, while page coordinates maintain object relationships independent of zoom and pan state. This dual-coordinate approach enables consistent manipulation behavior regardless of canvas transform state. where users can manipulate objects at different viewport scales simultaneously.
Screen vs page coordinates
tldraw’s layout system manages two coordinate spaces. Screen coordinates handle UI interactions and viewport positioning, while page coordinates maintain object relationships independent of zoom and pan state. This dual-coordinate approach enables consistent manipulation behavior regardless of canvas transform state. where users can manipulate objects at different viewport scales simultaneously.
Screen vs page coordinates
tldraw’s layout system manages two coordinate spaces. Screen coordinates handle UI interactions and viewport positioning, while page coordinates maintain object relationships independent of zoom and pan state. This dual-coordinate approach enables consistent manipulation behavior regardless of canvas transform state. where users can manipulate objects at different viewport scales simultaneously.
Transform matrix operations
Every shape maintains a transformation matrix that combines position, rotation, and scale operations. These matrices compose hierarchically for grouped objects and decompose cleanly for individual manipulation. The system handles matrix composition and inversion for smooth animation and precise positioning.
Transform matrix operations
Every shape maintains a transformation matrix that combines position, rotation, and scale operations. These matrices compose hierarchically for grouped objects and decompose cleanly for individual manipulation. The system handles matrix composition and inversion for smooth animation and precise positioning.
Transform matrix operations
Every shape maintains a transformation matrix that combines position, rotation, and scale operations. These matrices compose hierarchically for grouped objects and decompose cleanly for individual manipulation. The system handles matrix composition and inversion for smooth animation and precise positioning.
Transform matrix operations
Every shape maintains a transformation matrix that combines position, rotation, and scale operations. These matrices compose hierarchically for grouped objects and decompose cleanly for individual manipulation. The system handles matrix composition and inversion for smooth animation and precise positioning.
Multi-modal precision control
tldraw provides multi-layers precision control that adapts to different user needs and contexts. These control mechanisms work together to enable both rapid positioning and pixel-perfect fine-tuning within the same interaction framework.
Multi-modal precision control
tldraw provides multi-layers precision control that adapts to different user needs and contexts. These control mechanisms work together to enable both rapid positioning and pixel-perfect fine-tuning within the same interaction framework.
Multi-modal precision control
tldraw provides multi-layers precision control that adapts to different user needs and contexts. These control mechanisms work together to enable both rapid positioning and pixel-perfect fine-tuning within the same interaction framework.
Multi-modal precision control
tldraw provides multi-layers precision control that adapts to different user needs and contexts. These control mechanisms work together to enable both rapid positioning and pixel-perfect fine-tuning within the same interaction framework.
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.
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
Layouts that line up
Tools that guide shapes, snaps, and spacing so your users don’t have to.
Layouts that line up
Tools that guide shapes, snaps, and spacing so your users don’t have to.
Layouts that line up
Tools that guide shapes, snaps, and spacing so your users don’t have to.
Layouts that line up
Tools that guide shapes, snaps, and spacing so your users don’t have to.
© 2025 tldraw