Learn
Reference
Examples
Learn
Reference
Examples
Examples
Getting started
Tldraw component
Custom renderer
Static assets
Persistence key
Multiplayer demo with custom shape
Read-only
State and store
Force mobile
Custom options
Infer dark mode
Inset editor
Scrolling container
Multiple editors
UI & theming
External UI
External UI (Context)
Hidden UI components
Hide UI
Inset canvas
Add a tool to the Toolbar
Changing default colors
Changing default menus
Changing default style
Custom UI
UI zones
Action overrides
Canvas components
Context toolbar
Error boundary
Keyboard shortcuts
Things on the canvas
External dialog
Floaty window
Inline behavior
Inline layout
Tldraw image component
Shapes & tools
Layout constraints (bindings)
Pin (bindings)
Popup shape
Selection UI
Sticker (bindings)
Custom shape
Custom tool
Drag and drop
Interactive shape
Speech bubble
Using tldraw styles
Custom tool (screenshot)
Editable shape
Tool with child states
Using custom styles
Bounds Snapping Shape
Custom shape and tool
Shape toSvg method
Shape with geometry
Shape with migrations
Data & assets
Asset props
Local Storage
Export canvas as image
External content sources
Hosted images
Local images
Shape meta (on change)
Shape meta (on create)
Meta Migrations
Editor API
Camera options
Editor focus
Indicators logic
Prevent instance change
Prevent shape change
User presence
Code x-ray for UI events
Controlling the editor
Snapshots
Canvas events
Store events
Minimal
Sublibraries
Before create/update shape
Before delete shape
After create/update shape
After delete shape
Collaboration
Multiplayer with tlsync
Collaboration with YJS
Custom user data
Use cases
Fog of war
Slideshow with Camera
Image annotator
PDF editor
Slideshow
Close
Custom user data
This example shows how to integrate your own user data into tldraw and tldraw's multiplayer system.
Collaboration with YJS
Fog of war
