tldraw.dev

# tldraw SDK

## SDK features

- [Accessibility](https://tldraw.dev/sdk-features/accessibility)
- [Actions](https://tldraw.dev/sdk-features/actions)
- [Animation](https://tldraw.dev/sdk-features/animation)
- [Assets](https://tldraw.dev/sdk-features/assets)
- [Attribution](https://tldraw.dev/sdk-features/attribution)
- [Bindings](https://tldraw.dev/sdk-features/bindings)
- [Camera system](https://tldraw.dev/sdk-features/camera)
- [Click detection](https://tldraw.dev/sdk-features/click-detection)
- [Clipboard](https://tldraw.dev/sdk-features/clipboard)
- [Collaboration](https://tldraw.dev/sdk-features/collaboration)
- [Commenting](https://tldraw.dev/sdk-features/commenting)
- [Coordinates](https://tldraw.dev/sdk-features/coordinates)
- [Culling](https://tldraw.dev/sdk-features/culling)
- [Cursor chat](https://tldraw.dev/sdk-features/cursor-chat)
- [Cursors](https://tldraw.dev/sdk-features/cursors)
- [Deep links](https://tldraw.dev/sdk-features/deep-links)
- [Default shapes](https://tldraw.dev/sdk-features/default-shapes)
- [Drag and drop](https://tldraw.dev/sdk-features/drag-and-drop)
- [Draw shape](https://tldraw.dev/sdk-features/draw-shape)
- [Edge scrolling](https://tldraw.dev/sdk-features/edge-scrolling)
- [Editor](https://tldraw.dev/sdk-features/editor)
- [Embed shape](https://tldraw.dev/sdk-features/embed-shape)
- [Environment detection](https://tldraw.dev/sdk-features/environment)
- [Error handling](https://tldraw.dev/sdk-features/errors)
- [Events](https://tldraw.dev/sdk-features/events)
- [External content handling](https://tldraw.dev/sdk-features/external-content)
- [Focus](https://tldraw.dev/sdk-features/focus)
- [Frame shape](https://tldraw.dev/sdk-features/frame-shape)
- [Geo shape](https://tldraw.dev/sdk-features/geo-shape)
- [Geometry](https://tldraw.dev/sdk-features/geometry)
- [Groups](https://tldraw.dev/sdk-features/groups)
- [Handles](https://tldraw.dev/sdk-features/handles)
- [Highlighting](https://tldraw.dev/sdk-features/highlighting)
- [History (undo/redo)](https://tldraw.dev/sdk-features/history)
- [Image export](https://tldraw.dev/sdk-features/image-export)
- [Indicators](https://tldraw.dev/sdk-features/indicators)
- [Input handling](https://tldraw.dev/sdk-features/input-handling)
- [Instance state](https://tldraw.dev/sdk-features/instance-state)
- [Internationalization](https://tldraw.dev/sdk-features/internationalization)
- [License key](https://tldraw.dev/sdk-features/license-key)
- [Locked shapes](https://tldraw.dev/sdk-features/locked-shapes)
- [Note shape](https://tldraw.dev/sdk-features/note-shape)
- [Options](https://tldraw.dev/sdk-features/options)
- [Overlay utils](https://tldraw.dev/sdk-features/overlay-utils)
- [Pages](https://tldraw.dev/sdk-features/pages)
- [Parenting and ancestors](https://tldraw.dev/sdk-features/parenting)
- [Performance](https://tldraw.dev/sdk-features/performance)
- [Persistence](https://tldraw.dev/sdk-features/persistence)
- [Readonly mode](https://tldraw.dev/sdk-features/readonly)
- [Rich text](https://tldraw.dev/sdk-features/rich-text)
- [Scribble](https://tldraw.dev/sdk-features/scribble)
- [Selection](https://tldraw.dev/sdk-features/selection)
- [Shape clipping](https://tldraw.dev/sdk-features/shape-clipping)
- [Shape indexing](https://tldraw.dev/sdk-features/shape-indexing)
- [Shape transforms](https://tldraw.dev/sdk-features/shape-transforms)
- [Shapes](https://tldraw.dev/sdk-features/shapes)
- [Side effects](https://tldraw.dev/sdk-features/side-effects)
- [Signals](https://tldraw.dev/sdk-features/signals)
- [Snapping](https://tldraw.dev/sdk-features/snapping)
- [Store](https://tldraw.dev/sdk-features/store)
- [Styles](https://tldraw.dev/sdk-features/styles)
- [Text measurement](https://tldraw.dev/sdk-features/text-measurement)
- [Text shape](https://tldraw.dev/sdk-features/text-shape)
- [Themes](https://tldraw.dev/sdk-features/themes)
- [Ticks](https://tldraw.dev/sdk-features/ticks)
- [Tools](https://tldraw.dev/sdk-features/tools)
- [UI components](https://tldraw.dev/sdk-features/ui-components)
- [UI primitives](https://tldraw.dev/sdk-features/ui-primitives)
- [User following](https://tldraw.dev/sdk-features/user-following)
- [User preferences](https://tldraw.dev/sdk-features/user-preferences)
- [Validation](https://tldraw.dev/sdk-features/validation)
- [Visibility](https://tldraw.dev/sdk-features/visibility)

## Releases

- [v5.4.0](https://tldraw.dev/releases/v5.4.0)
- [Migration skill](https://tldraw.dev/releases/migration-skill)
- [v5.3.0](https://tldraw.dev/releases/v5.3.0)
- [v5.2.0](https://tldraw.dev/releases/v5.2.0)
- [v5.1.0](https://tldraw.dev/releases/v5.1.0)
- [v5.0.0](https://tldraw.dev/releases/v5.0.0)
- [v4.5.0](https://tldraw.dev/releases/v4.5.0)
- [v4.4.0](https://tldraw.dev/releases/v4.4.0)
- [v4.3.0](https://tldraw.dev/releases/v4.3.0)
- [v4.2.0](https://tldraw.dev/releases/v4.2.0)
- [v4.1.0](https://tldraw.dev/releases/v4.1.0)
- [v4.0.0](https://tldraw.dev/releases/v4.0.0)
- [v3.15.0](https://tldraw.dev/releases/v3.15.0)
- [v3.14.0](https://tldraw.dev/releases/v3.14.0)
- [v3.13.0](https://tldraw.dev/releases/v3.13.0)
- [v3.12.0](https://tldraw.dev/releases/v3.12.0)
- [v3.11.0](https://tldraw.dev/releases/v3.11.0)
- [v3.10.0](https://tldraw.dev/releases/v3.10.0)
- [v3.9.0](https://tldraw.dev/releases/v3.9.0)
- [v3.8.0](https://tldraw.dev/releases/v3.8.0)
- [v3.7.0](https://tldraw.dev/releases/v3.7.0)
- [v3.6.0](https://tldraw.dev/releases/v3.6.0)
- [v3.5.0](https://tldraw.dev/releases/v3.5.0)
- [v3.4.0](https://tldraw.dev/releases/v3.4.0)
- [v3.3.0](https://tldraw.dev/releases/v3.3.0)
- [v3.2.0](https://tldraw.dev/releases/v3.2.0)
- [v3.1.0](https://tldraw.dev/releases/v3.1.0)
- [v3.0.0](https://tldraw.dev/releases/v3.0.0)
- [v2.4.0](https://tldraw.dev/releases/v2.4.0)
- [v2.3.0](https://tldraw.dev/releases/v2.3.0)
- [v2.2.0](https://tldraw.dev/releases/v2.2.0)
- [v2.1.0](https://tldraw.dev/releases/v2.1.0)
- [v2.0.0](https://tldraw.dev/releases/v2.0.0)

## Examples

- [Custom user metadata](https://tldraw.dev/examples/custom-user)
- [Multiplayer sync with custom user data](https://tldraw.dev/examples/sync-custom-user)
- [Attribution](https://tldraw.dev/examples/attribution)
- [Attribution timeline](https://tldraw.dev/examples/attribution-timeline)
- [Tldraw component](https://tldraw.dev/examples/basic)
- [Editor options](https://tldraw.dev/examples/custom-options)
- [Shape options](https://tldraw.dev/examples/configure-shape-util)
- [Camera options](https://tldraw.dev/examples/camera-options)
- [Asset options](https://tldraw.dev/examples/asset-props)
- [Custom text outline](https://tldraw.dev/examples/custom-text-outline)
- [Display options](https://tldraw.dev/examples/display-options)
- [Edge scrolling](https://tldraw.dev/examples/edge-scrolling)
- [Persistence key](https://tldraw.dev/examples/persistence-key)
- [Read-only](https://tldraw.dev/examples/readonly)
- [Reduced motion preferences](https://tldraw.dev/examples/reduced-motion)
- [Custom embeds](https://tldraw.dev/examples/custom-embed)
- [Environment detection](https://tldraw.dev/examples/environment-detection)
- [Embed permissions](https://tldraw.dev/examples/embed-permissions)
- [Deep links](https://tldraw.dev/examples/deep-links)
- [Frame colors](https://tldraw.dev/examples/frame-colors)
- [Note resizing](https://tldraw.dev/examples/resize-note)
- [Precise exact arrows](https://tldraw.dev/examples/arrows-precise-exact)
- [Disable pages](https://tldraw.dev/examples/disable-pages)
- [Minimal](https://tldraw.dev/examples/only-editor)
- [Sublibraries](https://tldraw.dev/examples/exploded)
- [Controlling the canvas](https://tldraw.dev/examples/api)
- [Save and load snapshots](https://tldraw.dev/examples/snapshots)
- [Coordinate system transformations](https://tldraw.dev/examples/coordinate-system)
- [Create an arrow](https://tldraw.dev/examples/create-arrow)
- [Custom clipping shape](https://tldraw.dev/examples/custom-clipping-shape)
- [Zoom to bounds](https://tldraw.dev/examples/zoom-to-bounds)
- [Arrow labels](https://tldraw.dev/examples/arrow-labels)
- [Create a video shape](https://tldraw.dev/examples/local-videos)
- [Create an image shape](https://tldraw.dev/examples/local-images)
- [Custom overlay](https://tldraw.dev/examples/custom-overlay)
- [Dynamic tools with setTool and removeTool](https://tldraw.dev/examples/dynamic-tools)
- [Focus the editor](https://tldraw.dev/examples/editor-focus)
- [Lock camera zoom](https://tldraw.dev/examples/lock-camera-zoom)
- [Search text on the canvas](https://tldraw.dev/examples/text-search)
- [Shape animation](https://tldraw.dev/examples/shape-animation)
- [Z-order](https://tldraw.dev/examples/z-order)
- [Align and distribute shapes](https://tldraw.dev/examples/align-and-distribute-shapes)
- [Conditional culling](https://tldraw.dev/examples/conditional-culling)
- [Dimensions HUD](https://tldraw.dev/examples/dimensions-hud)
- [Lasso select tool](https://tldraw.dev/examples/lasso-select-tool)
- [Locked shapes](https://tldraw.dev/examples/locked-shapes)
- [Reactive inputs](https://tldraw.dev/examples/reactive-inputs)
- [Replace a built-in overlay](https://tldraw.dev/examples/replace-brush-overlay)
- [Toggle focus mode](https://tldraw.dev/examples/focus-mode)
- [Hovered overlay](https://tldraw.dev/examples/hovered-overlay)
- [Interaction end callback](https://tldraw.dev/examples/interaction-end-callback)
- [Performance hooks](https://tldraw.dev/examples/performance-hooks)
- [Selection bounds](https://tldraw.dev/examples/selection-bounds)
- [Easter egg styles](https://tldraw.dev/examples/easter-egg-styles)
- [Toolbar groups](https://tldraw.dev/examples/toolbar-groups)
- [Vertical toolbar](https://tldraw.dev/examples/vertical-toolbar)
- [Add a tool to the toolbar](https://tldraw.dev/examples/add-tool-to-toolbar)
- [Remove a tool from the toolbar](https://tldraw.dev/examples/remove-tool)
- [Change default colors](https://tldraw.dev/examples/changing-default-colors)
- [Change default styles](https://tldraw.dev/examples/changing-default-style)
- [Changing menus](https://tldraw.dev/examples/custom-menus)
- [Format rich text on multiple shapes](https://tldraw.dev/examples/rich-text-on-multiple-shapes)
- [Custom theme](https://tldraw.dev/examples/custom-theme)
- [Multiple themes](https://tldraw.dev/examples/multiple-themes)
- [Hide UI components](https://tldraw.dev/examples/ui-components-hidden)
- [Menu system hover](https://tldraw.dev/examples/menu-system-hover)
- [Screen reader accessibility](https://tldraw.dev/examples/screen-reader-accessibility)
- [Things on the canvas](https://tldraw.dev/examples/things-on-the-canvas)
- [Toasts and dialogs](https://tldraw.dev/examples/toasts-and-dialogs)
- [UI primitives](https://tldraw.dev/examples/ui-primitives)
- [UI zones](https://tldraw.dev/examples/zones)
- [Hide the entire UI](https://tldraw.dev/examples/hide-ui)
- [Replace the entire UI](https://tldraw.dev/examples/custom-ui)
- [Contextual toolbar](https://tldraw.dev/examples/contextual-toolbar)
- [Custom canvas components](https://tldraw.dev/examples/custom-components)
- [Custom grid](https://tldraw.dev/examples/custom-grid)
- [Drag and drop tray](https://tldraw.dev/examples/drag-and-drop-tray)
- [Error boundary](https://tldraw.dev/examples/error-boundary)
- [Selection UI](https://tldraw.dev/examples/selection-ui)
- [Text mass style updates](https://tldraw.dev/examples/text-mass-style-updates)
- [Add connected shape](https://tldraw.dev/examples/add-connected-shape)
- [Color picker](https://tldraw.dev/examples/color-picker)
- [Custom actions](https://tldraw.dev/examples/action-overrides)
- [Custom error capture](https://tldraw.dev/examples/custom-error-capture)
- [Custom indicators](https://tldraw.dev/examples/indicators-logic)
- [Custom keyboard shortcuts](https://tldraw.dev/examples/keyboard-shortcuts)
- [Escape shape focus trap](https://tldraw.dev/examples/escape-shape-focus-trap)
- [Overlay theme colors](https://tldraw.dev/examples/overlay-theme-colors)
- [Selection color condition](https://tldraw.dev/examples/selection-color-condition)
- [Stroke size picker](https://tldraw.dev/examples/stroke-size-picker)
- [Dark mode](https://tldraw.dev/examples/dark-mode)
- [Force mobile layout](https://tldraw.dev/examples/force-mobile)
- [Toggle dark mode](https://tldraw.dev/examples/dark-mode-toggle)
- [Inspector panel](https://tldraw.dev/examples/inspector-panel)
- [Layer panel](https://tldraw.dev/examples/layer-panel)
- [Page panel](https://tldraw.dev/examples/page-panel)
- [Floaty window](https://tldraw.dev/examples/floaty-window)
- [Custom translations and overrides](https://tldraw.dev/examples/custom-language-translations)
- [Custom renderer](https://tldraw.dev/examples/custom-renderer)
- [Inset editor](https://tldraw.dev/examples/inset)
- [Inset editor (fixed sizes)](https://tldraw.dev/examples/inline)
- [Inset editor (common practices)](https://tldraw.dev/examples/inline-behavior)
- [Inset canvas](https://tldraw.dev/examples/inset-canvas)
- [Scrollable container](https://tldraw.dev/examples/scroll)
- [Multiple editors](https://tldraw.dev/examples/multiple)
- [External dialog](https://tldraw.dev/examples/external-dialog)
- [External UI (using context)](https://tldraw.dev/examples/external-ui-context)
- [External UI (using state)](https://tldraw.dev/examples/external-ui)
- [Snapshot image component](https://tldraw.dev/examples/image-component)
- [Signals](https://tldraw.dev/examples/signals)
- [Canvas events](https://tldraw.dev/examples/canvas-events)
- [Store events](https://tldraw.dev/examples/store-events)
- [UI events](https://tldraw.dev/examples/ui-events)
- [Block events](https://tldraw.dev/examples/event-blocker)
- [Prevent instance changes](https://tldraw.dev/examples/prevent-instance-change)
- [Prevent shape changes](https://tldraw.dev/examples/prevent-shape-change)
- [Prevent multi-shape selection](https://tldraw.dev/examples/prevent-multi-shape-selection)
- [Before create/update shape](https://tldraw.dev/examples/before-create-update-shape)
- [Before delete shape](https://tldraw.dev/examples/before-delete-shape)
- [Custom double-click behavior](https://tldraw.dev/examples/custom-double-click-behavior)
- [After create/update shape](https://tldraw.dev/examples/after-create-update-shape)
- [After delete shape](https://tldraw.dev/examples/after-delete-shape)
- [Permissions](https://tldraw.dev/examples/permissions)
- [Permissions 2](https://tldraw.dev/examples/permissions-2)
- [Derived view](https://tldraw.dev/examples/derived-view)
- [Shape meta (on change)](https://tldraw.dev/examples/meta-on-change)
- [Shape meta (on create)](https://tldraw.dev/examples/meta-on-create)
- [Unsaved changes](https://tldraw.dev/examples/unsaved-changes)
- [Custom shape wrapper](https://tldraw.dev/examples/custom-shape-wrapper)
- [Custom shape](https://tldraw.dev/examples/custom-shape)
- [Custom tool (sticker)](https://tldraw.dev/examples/custom-tool)
- [Custom tool (screenshot)](https://tldraw.dev/examples/screenshot-tool)
- [Cubic bezier curve shape](https://tldraw.dev/examples/cubic-bezier-shape)
- [Custom shape and tool](https://tldraw.dev/examples/custom-config)
- [Shape with onClick](https://tldraw.dev/examples/shape-with-onClick)
- [Shape with onDoubleClickEdge](https://tldraw.dev/examples/shape-with-onDoubleClickEdge)
- [Custom shape with custom styles](https://tldraw.dev/examples/shape-with-custom-styles)
- [Custom shape with tldraw styles](https://tldraw.dev/examples/shape-with-tldraw-styles)
- [Clickable custom shape](https://tldraw.dev/examples/interactive-shape)
- [Custom handle snap reference](https://tldraw.dev/examples/custom-relative-snapping)
- [Custom shape with handles](https://tldraw.dev/examples/speech-bubble)
- [Custom tool with child states](https://tldraw.dev/examples/tool-with-child-states)
- [Editable custom shape](https://tldraw.dev/examples/editable-shape)
- [Flex layout shape](https://tldraw.dev/examples/flex-layout)
- [Arrow binding options](https://tldraw.dev/examples/arrow-binding-options)
- [Custom geo types](https://tldraw.dev/examples/custom-geo-types)
- [Custom shape geometry](https://tldraw.dev/examples/shape-with-geometry)
- [Custom shape migrations](https://tldraw.dev/examples/shape-with-migrations)
- [Custom shape SVG export](https://tldraw.dev/examples/toSvg-method-example)
- [Custom snapping](https://tldraw.dev/examples/bounds-snapping-shape)
- [Frame layout modes](https://tldraw.dev/examples/frame-layouts)
- [Shape that accepts dropped files](https://tldraw.dev/examples/drop-zone-shape)
- [Stamp tool](https://tldraw.dev/examples/stamp-tool)
- [Custom validators for shape props](https://tldraw.dev/examples/custom-validators)
- [Programmatic text shape creation](https://tldraw.dev/examples/text-shape-configuration)
- [Data grid shape](https://tldraw.dev/examples/ag-grid-shape)
- [Drag and drop shape](https://tldraw.dev/examples/drag-and-drop)
- [Portal shapes](https://tldraw.dev/examples/portal-shapes)
- [Attach shapes together (bindings)](https://tldraw.dev/examples/sticker-bindings)
- [DOM-based shape size](https://tldraw.dev/examples/size-from-dom)
- [Layout constraints (bindings)](https://tldraw.dev/examples/layout-bindings)
- [Persistent iframe shape](https://tldraw.dev/examples/persistent-iframe-shape)
- [Pin (bindings)](https://tldraw.dev/examples/pin-bindings)
- [Rich text with custom extension and toolbar](https://tldraw.dev/examples/rich-text-custom-extension)
- [Rich text with font options](https://tldraw.dev/examples/rich-text-font-extensions)
- [Outlined text](https://tldraw.dev/examples/outlined-text)
- [Globs](https://tldraw.dev/examples/globs-editor)
- [Popup shape](https://tldraw.dev/examples/popup-shape)
- [Commenting](https://tldraw.dev/examples/commenting)
- [Multiplayer sync](https://tldraw.dev/examples/sync-demo)
- [Commenting sidebar](https://tldraw.dev/examples/commenting-sidebar)
- [Comment clustering](https://tldraw.dev/examples/comment-clustering)
- [Multiplayer sync with a custom shape](https://tldraw.dev/examples/sync-custom-shape)
- [Multiplayer sync with custom people menu](https://tldraw.dev/examples/sync-custom-people-menu)
- [Multiplayer sync with custom presence](https://tldraw.dev/examples/sync-custom-presence)
- [Comment anchors](https://tldraw.dev/examples/comment-anchors)
- [Multiplayer sync with private content](https://tldraw.dev/examples/sync-private-content)
- [Commenting on mobile](https://tldraw.dev/examples/commenting-mobile)
- [Manually update user presence](https://tldraw.dev/examples/user-presence)
- [Shape comment precision](https://tldraw.dev/examples/comment-shape-precision)
- [Comments and undo](https://tldraw.dev/examples/comment-history)
- [Region comments](https://tldraw.dev/examples/comment-regions)
- [Drawn comment reactions](https://tldraw.dev/examples/comment-drawing-reactions)
- [Comment notifications](https://tldraw.dev/examples/comment-notifications)
- [Persist to storage](https://tldraw.dev/examples/local-storage)
- [Static assets](https://tldraw.dev/examples/static-assets)
- [Custom records](https://tldraw.dev/examples/custom-records)
- [Export canvas as image](https://tldraw.dev/examples/export-canvas-as-image)
- [Export canvas as image (with settings)](https://tldraw.dev/examples/export-canvas-settings)
- [Hosted images](https://tldraw.dev/examples/hosted-images)
- [Custom paste behavior](https://tldraw.dev/examples/custom-paste)
- [External content sources](https://tldraw.dev/examples/external-content-sources)
- [Clipboard events](https://tldraw.dev/examples/clipboard-events)
- [Custom asset type](https://tldraw.dev/examples/custom-asset-type)
- [Meta migrations](https://tldraw.dev/examples/meta-migrations)
- [D3 geo map](https://tldraw.dev/examples/d3-map)
- [Slideshow (fixed camera)](https://tldraw.dev/examples/slideshow)
- [Slideshow (free camera)](https://tldraw.dev/examples/slides)
- [Education canvas](https://tldraw.dev/examples/education-canvas)
- [Image annotator](https://tldraw.dev/examples/image-annotator)
- [PDF editor](https://tldraw.dev/examples/pdf-editor)
- [Canvas mask](https://tldraw.dev/examples/mask-window)
- [Fog of war](https://tldraw.dev/examples/fog-of-war)
- [Mark exams](https://tldraw.dev/examples/exam-marking)
- [Many shapes](https://tldraw.dev/examples/many-shapes)
- [Soft clipping region](https://tldraw.dev/examples/soft-clip)
- [Tower defense](https://tldraw.dev/examples/tower-defense)
- [Customize Mermaid diagrams](https://tldraw.dev/examples/custom-shape-mermaids)
- [Gravity sim (xkcd 2347)](https://tldraw.dev/examples/xkcd-dependency)
- [Hundreds of Mermaid diagrams](https://tldraw.dev/examples/hundred-mermaids)
- [Pasting Mermaid code as shapes](https://tldraw.dev/examples/mermaid-pasting)
- [Snowstorm](https://tldraw.dev/examples/snowstorm)
- [Timeline scrubber](https://tldraw.dev/examples/timeline-scrubber)

## Markdown exports of resources

- [All SDK features, releases, and examples](https://tldraw.dev/llms-full.txt)
- [SDK features only](https://tldraw.dev/llms-docs.txt)
- [Releases only](https://tldraw.dev/llms-releases.txt)
- [Examples only](https://tldraw.dev/llms-examples.txt)