Replace every interface element with React components that match your brand.
Customize everything
No black boxes, no compromises. Extend, replace, and control every layer of the canvas.
Component overrides
Replace any UI element through simple prop-based component replacement without breaking functionality. Perfect for branded applications that feel completely native.
CSS variable theming
Customize colors, fonts, and spacing through semantic CSS variables, light and dark modes included. Match existing design systems without architectural conflicts.
Menu customization
Extend context menus, toolbars, and panels with custom actions and organize them into logical groups. Ideal for domain-specific workflows and shortcuts.
Style property system
Create shared styling properties that work across multiple shape types for consistent theming and visual unity.
Responsive layouts
Components automatically adapt to different screen sizes with built-in breakpoint handling and mobile-optimized behavior patterns.
Asset replacement
Replace icons, fonts, and visual assets with your branded versions while keeping editor functionality intact.
Examples
See for yourself
Have a look at our examples on how to customize the UI.
Custom toolbar configuration
Add a contextual toolbar which appears on top of the selected shapes.
Complete UI replacement
Build entirely custom interfaces while keeping tldraw's core drawing functionality.
Custom UI components
Replace default toolbar and panels with branded interface elements that match your application's design system.
Solid engineering
We've spent three years and five million dollars building thousands of table-stakes features, from rotating cursors to handling pasted images. Take the work and make something incredible.
Component override architecture
The UI system uses a comprehensive interface with over 25 replaceable components covering toolbars, menus, panels, and dialogs. Pass replacement components through props to customize anything from individual buttons to complete interface sections. Components merge with defaults automatically, and setting components to null removes them entirely from the interface.
Container-content separation
Every major UI component follows a consistent pattern where container components handle state and positioning while content components handle rendering. This separation lets you wrap existing content with custom containers or replace content while keeping proven interaction logic. The pattern supports both complete replacement and compositional customization.
Shape utility extensions
Custom shapes inherit from base shape utilities that handle geometry calculations, hit testing, and rendering optimizations automatically. Your custom shape code focuses on unique visual and interactive aspects while the framework handles canvas performance, selection behavior, and collaborative synchronization. The system includes full TypeScript support for type-safe shape definitions.
CSS variable system
The theming system uses semantic CSS variables that map to actual color values for light and dark modes. This two-layer approach lets you customize brand colors while maintaining semantic meaning throughout your interface.
Starter kits
Production ready starter kit to integrate agents into your canvas. Building something different?
Full control, simple setup
From menus to theming, adapt every layer of the canvas without breaking flow.