Tailor canvas apps to your domain with the tldraw SDK’s shapes and custom tools.
Complete UI control
Build fully branded applications. Replace any interface element, from individual toolbar buttons to entire panels, while keeping tldraw's interaction logic.
Shape utilities
Define custom behavior through shape utility classes that handle rendering, geometry, and user interactions.
Binding relationships
Connect shapes with automatic relationship management that survives editing, copying, and collaborative changes. Perfect for building flowcharts, org charts, and architectural diagrams.
State machine tools
Build custom interactions, multi-step operations, and precise event handling via hierarchical state machines that guide users through complex workflows.
Your canvas, your tools
Break free of defaults. Design shapes and canvas tools that are so on brand.
Examples
See for yourself
Have a look at our examples on how to implement UI customization features.
Custom snapping
Create a shape with custom snapping geometry.
Editable custom shape
Build an interactive custom shape.
Education canvas
Create an educational application using tldraw with custom layout, UI, shapes, and more.
Canvas without limits
Design canvas tools that feel on brand, from shapes to full UI control. Our team spent years to get all the details right, so you don’t have to.
HTML/SVG architecture
tldraw renders everything as React components that output HTML and SVG elements, not locked canvas pixels. Custom shapes can contain interactive buttons, form inputs, and complex data grids while maintaining automatic hit-testing, selection handles, and export functionality. You get native accessibility, DOM events, CSS styling, and access to the complete React ecosystem including any npm packages.
Shape utility classes
Custom shapes extend base utility classes with TypeScript interfaces that provide compile-time safety and IDE support. The property system includes automatic validation, serialization, and migration support for evolving shape schemas. Each shape utility defines its geometry calculations, rendering logic, and interaction behavior through clearly defined methods that integrate with tldraw's collaborative editing system.
Tool state machine architecture
Custom tools use hierarchical finite state machines built to handle complex multi-step interactions. Tools transition between states based on user input with automatic cleanup and precise event handling. This pattern supports everything from simple click-to-create tools to complex editing workflows with multiple interaction modes and keyboard shortcuts.
Build with our agent starter kit
Production ready starter kit to integrate agents into your canvas. Building something different?
