Your users expect drag-and-drop that snaps perfectly.
We handle the math.
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.
Smart snapping
Build with tldraw’s magnetic snapping systems that guide shapes with bounds, handles, and geometric alignment for user interactions that feel natural.
Object grouping
Implement hierarchical object relationships that preserve individual shape properties while enabling batch operations and nested transformation behaviors.
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.
Solid engineering
Our team spent years to get all the details right, so you don’t have to.
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.
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.
Starter kits
Production ready starter kit to integrate agents into your canvas. Building something different?
Examples
See for yourself
Have a look at our examples on how to implement layout management features.
Layout bindings
Implement container-based layout systems with automatic positioning and size management.
Bound snapping
Create custom snapping geometry for specialized shape alignment and magnetic positioning behavior.
Drag and drop shape
Create custom shapes that can be dragged and dropped onto each other.
Layouts that line up
Tools that guide shapes, snaps, and spacing so your users don’t have to.