Tldraw component
Scroll here to load component examples
Editor options
Scroll here to load component examples
Shape options
Scroll here to load component examples
Camera options
Scroll here to load component examples
Asset options
Scroll here to load component examples
Custom text outline
Scroll here to load component examples
Display options
Scroll here to load component examples
Edge scrolling
Scroll here to load component examples
Persistence key
Scroll here to load component examples
Read-only
Scroll here to load component examples
Reduced motion preferences
Scroll here to load component examples
Custom embeds
Scroll here to load component examples
Environment detection
Scroll here to load component examples
Embed permissions
Scroll here to load component examples
Deep links
Scroll here to load component examples
Frame colors
Scroll here to load component examples
Note resizing
Scroll here to load component examples
Precise exact arrows
Scroll here to load component examples
Disable pages
Scroll here to load component examples
Minimal
Scroll here to load component examples
Sublibraries
Scroll here to load component examples
Controlling the canvas
Scroll here to load component examples
Save and load snapshots
Scroll here to load component examples
Coordinate system transformations
Scroll here to load component examples
Create an arrow
Scroll here to load component examples
Custom clipping shape
Scroll here to load component examples
Zoom to bounds
Scroll here to load component examples
Arrow labels
Scroll here to load component examples
Create a video shape
Scroll here to load component examples
Create an image shape
Scroll here to load component examples
Custom overlay
Scroll here to load component examples
Dynamic tools with setTool and removeTool
Scroll here to load component examples
Focus the editor
Scroll here to load component examples
Lock camera zoom
Scroll here to load component examples
Search text on the canvas
Scroll here to load component examples
Shape animation
Scroll here to load component examples
Z-order
Scroll here to load component examples
Align and distribute shapes
Scroll here to load component examples
Conditional culling
Scroll here to load component examples
Dimensions HUD
Scroll here to load component examples
Lasso select tool
Scroll here to load component examples
Locked shapes
Scroll here to load component examples
Reactive inputs
Scroll here to load component examples
Replace a built-in overlay
Scroll here to load component examples
Toggle focus mode
Scroll here to load component examples
Hovered overlay
Scroll here to load component examples
Interaction end callback
Scroll here to load component examples
Performance hooks
Scroll here to load component examples
Selection bounds
Scroll here to load component examples
Easter egg styles
Scroll here to load component examples
Add a tool to the toolbar
Scroll here to load component examples
Remove a tool from the toolbar
Scroll here to load component examples
Change default colors
Scroll here to load component examples
Change default styles
Scroll here to load component examples
Changing menus
Scroll here to load component examples
Format rich text on multiple shapes
Scroll here to load component examples
Custom theme
Scroll here to load component examples
Multiple themes
Scroll here to load component examples
Hide UI components
Scroll here to load component examples
Menu system hover
Scroll here to load component examples
Screen reader accessibility
Scroll here to load component examples
Things on the canvas
Scroll here to load component examples
Toasts and dialogs
Scroll here to load component examples
UI primitives
Scroll here to load component examples
UI zones
Scroll here to load component examples
Hide the entire UI
Scroll here to load component examples
Replace the entire UI
Scroll here to load component examples
Contextual style panel
Scroll here to load component examples
Contextual toolbar
Scroll here to load component examples
Custom canvas components
Scroll here to load component examples
Custom grid
Scroll here to load component examples
Drag and drop tray
Scroll here to load component examples
Error boundary
Scroll here to load component examples
Selection UI
Scroll here to load component examples
Text mass style updates
Scroll here to load component examples
Add connected shape
Scroll here to load component examples
Color picker
Scroll here to load component examples
Custom actions
Scroll here to load component examples
Custom error capture
Scroll here to load component examples
Custom indicators
Scroll here to load component examples
Custom keyboard shortcuts
Scroll here to load component examples
Escape shape focus trap
Scroll here to load component examples
Overlay theme colors
Scroll here to load component examples
Selection color condition
Scroll here to load component examples
Stroke size picker
Scroll here to load component examples
Dark mode
Scroll here to load component examples
Force mobile layout
Scroll here to load component examples
Toggle dark mode
Scroll here to load component examples
Inspector panel
Scroll here to load component examples
Layer panel
Scroll here to load component examples
Page panel
Scroll here to load component examples
Floaty window
Scroll here to load component examples
Custom translations and overrides
Scroll here to load component examples
Custom renderer
Scroll here to load component examples
Toolbar groups
Scroll here to load component examples
Vertical toolbar
Scroll here to load component examples
Inset editor
Scroll here to load component examples
Inset editor (fixed sizes)
Scroll here to load component examples
Inset editor (common practices)
Scroll here to load component examples
Inset canvas
Scroll here to load component examples
Scrollable container
Scroll here to load component examples
Multiple editors
Scroll here to load component examples
External UI (using context)
Scroll here to load component examples
External UI (using state)
Scroll here to load component examples
External dialog
Scroll here to load component examples
Snapshot image component
Scroll here to load component examples
Signals
Scroll here to load component examples
Canvas events
Scroll here to load component examples
Store events
Scroll here to load component examples
UI events
Scroll here to load component examples
Block events
Scroll here to load component examples
Prevent instance changes
Scroll here to load component examples
Prevent shape changes
Scroll here to load component examples
Prevent multi-shape selection
Scroll here to load component examples
Before create/update shape
Scroll here to load component examples
Before delete shape
Scroll here to load component examples
Custom double-click behavior
Scroll here to load component examples
After create/update shape
Scroll here to load component examples
After delete shape
Scroll here to load component examples
Permissions
Scroll here to load component examples
Permissions 2
Scroll here to load component examples
Derived view
Scroll here to load component examples
Shape meta (on change)
Scroll here to load component examples
Shape meta (on create)
Scroll here to load component examples
Unsaved changes
Scroll here to load component examples
Custom shape
Scroll here to load component examples
Custom tool (sticker)
Scroll here to load component examples
Custom tool (screenshot)
Scroll here to load component examples
Cubic bezier curve shape
Scroll here to load component examples
Custom shape and tool
Scroll here to load component examples
Shape with onClick
Scroll here to load component examples
Shape with onDoubleClickEdge
Scroll here to load component examples
Custom shape with custom styles
Scroll here to load component examples
Custom shape with tldraw styles
Scroll here to load component examples
Clickable custom shape
Scroll here to load component examples
Custom handle snap reference
Scroll here to load component examples
Custom shape with handles
Scroll here to load component examples
Custom tool with child states
Scroll here to load component examples
Editable custom shape
Scroll here to load component examples
Flex layout shape
Scroll here to load component examples
Arrow binding options
Scroll here to load component examples
Custom geo types
Scroll here to load component examples
Custom shape SVG export
Scroll here to load component examples
Custom shape geometry
Scroll here to load component examples
Custom shape migrations
Scroll here to load component examples
Custom snapping
Scroll here to load component examples
Frame layout modes
Scroll here to load component examples
Keyboard math input
Scroll here to load component examples
Shape that accepts dropped files
Scroll here to load component examples
Stamp tool
Scroll here to load component examples
Custom validators for shape props
Scroll here to load component examples
Programmatic text shape creation
Scroll here to load component examples
Data grid shape
Scroll here to load component examples
Drag and drop shape
Scroll here to load component examples
Portal shapes
Scroll here to load component examples
Attach shapes together (bindings)
Scroll here to load component examples
DOM-based shape size
Scroll here to load component examples
Layout constraints (bindings)
Scroll here to load component examples
Persistent iframe shape
Scroll here to load component examples
Pin (bindings)
Scroll here to load component examples
Rich text with custom extension and toolbar
Scroll here to load component examples
Rich text with font options
Scroll here to load component examples
Outlined text
Scroll here to load component examples
Globs
Scroll here to load component examples
Popup shape
Scroll here to load component examples
Custom shape wrapper
Scroll here to load component examples
Custom note attribution
Scroll here to load component examples
Custom user metadata
Scroll here to load component examples
Attribution
Scroll here to load component examples
Attribution timeline
Scroll here to load component examples
Commenting
Scroll here to load component examples
Commenting sidebar
Scroll here to load component examples
Comment clustering
Scroll here to load component examples
Comment anchors
Scroll here to load component examples
Commenting on mobile
Scroll here to load component examples
Manually update user presence
Scroll here to load component examples
Shape comment precision
Scroll here to load component examples
Comments and undo
Scroll here to load component examples
Region comments
Scroll here to load component examples
Drawn comment reactions
Scroll here to load component examples
Comment notifications
Scroll here to load component examples
Persist to storage
Scroll here to load component examples
Static assets
Scroll here to load component examples
Custom records
Scroll here to load component examples
Export canvas as image
Scroll here to load component examples
Export canvas as image (with settings)
Scroll here to load component examples
Hosted images
Scroll here to load component examples
Custom paste behavior
Scroll here to load component examples
External content sources
Scroll here to load component examples
Clipboard events
Scroll here to load component examples
Custom asset type
Scroll here to load component examples
Meta migrations
Scroll here to load component examples
Slideshow (fixed camera)
Scroll here to load component examples
Slideshow (free camera)
Scroll here to load component examples
Education canvas
Scroll here to load component examples
Image annotator
Scroll here to load component examples
PDF editor
Scroll here to load component examples
Canvas mask
Scroll here to load component examples
Zoom into Moby Dick
Scroll here to load component examples
Fog of war
Scroll here to load component examples
Map tiles
Scroll here to load component examples
Mark exams
Scroll here to load component examples
Many shapes
Scroll here to load component examples
Soft clipping region
Scroll here to load component examples
Tower defense
Scroll here to load component examples
Customize Mermaid diagrams
Scroll here to load component examples
Gravity sim (xkcd 2347)
Scroll here to load component examples
Hundreds of Mermaid diagrams
Scroll here to load component examples
Pasting Mermaid code as shapes
Scroll here to load component examples
Snowstorm
Scroll here to load component examples
Timeline scrubber
Scroll here to load component examples
D3 geo map
Scroll here to load component examples