Custom shapes and tools
Tailor canvas apps to your domain with the tldraw SDK’s shapes and custom tools.
Key features
Key features
Key features
Key features
Shape utilities
Define custom behavior through shape utility classes that handle rendering, geometry, and user interactions.
Shape utilities
Define custom behavior through shape utility classes that handle rendering, geometry, and user interactions.
Shape utilities
Define custom behavior through shape utility classes that handle rendering, geometry, and user interactions.
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.
Binding relationships
Connect shapes with automatic relationship management that survives editing, copying, and collaborative changes. Perfect for building flowcharts, org charts, and architectural diagrams.
Binding relationships
Connect shapes with automatic relationship management that survives editing, copying, and collaborative changes. Perfect for building flowcharts, org charts, and architectural diagrams.
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.
State machine tools
Build custom interactions, multi-step operations, and precise event handling via hierarchical state machines that guide users through complex workflows.
State machine tools
Build custom interactions, multi-step operations, and precise event handling via hierarchical state machines that guide users through complex workflows.
State machine tools
Build custom interactions, multi-step operations, and precise event handling via hierarchical state machines that guide users through complex workflows.
Complete UI control
Build fully branded applications. Replace any interface element, from individual toolbar buttons to entire panels, while keeping tldraw's interaction logic.
Complete UI control
Build fully branded applications. Replace any interface element, from individual toolbar buttons to entire panels, while keeping tldraw's interaction logic.
Complete UI control
Build fully branded applications. Replace any interface element, from individual toolbar buttons to entire panels, while keeping tldraw's interaction logic.
Complete UI control
Build fully branded applications. Replace any interface element, from individual toolbar buttons to entire panels, while keeping tldraw's interaction logic.
Your canvas, your rules
Break free of defaults. Design shapes and canvas tools that are so on brand.
Your canvas, your rules
Break free of defaults. Design shapes and canvas tools that are so on brand.
Your canvas, your rules
Break free of defaults. Design shapes and canvas tools that are so on brand.
Your canvas, your rules
Break free of defaults. Design shapes and canvas tools that are so on brand.
Engineering details
Engineering details
Engineering details
Engineering details
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Canvas without limits
Design canvas tools that feel on brand, from shapes to full UI control.
Canvas without limits
Design canvas tools that feel on brand, from shapes to full UI control.
Canvas without limits
Design canvas tools that feel on brand, from shapes to full UI control.
Canvas without limits
Design canvas tools that feel on brand, from shapes to full UI control.
© 2025 tldraw