Tldraw

Official6 tools

by tldraw · TypeScript

Draw and visually collaborate with your agents on tldraw's canvas.

Visual collaboration canvas for agents to draw and design together.

Topics

drawingsketchwhiteboardcanvasdiagraminfinitereactcollaborationdesignmultiplayersyncsdk

Captured live from the server via tools/list.

search

Search the tldraw Editor API spec by writing JavaScript that receives a `spec` object and returns a result. The spec contains: spec.members (all Editor methods/properties with name, kind, signature, description, category), spec.categories (category names), spec.types.shapes (focused shape type definitions with props), spec.types.shapeTypes (list of all shape type strings), spec.helpers (exec helper functions with descriptions, params, examples). Examples: - Find shape methods: return spec.members.filter(m => m.category === "shapes").map(m => ({ name: m.name, signature: m.signature })) - Get arrow shape props: return spec.types.shapes.find(s => s.shapeType === "arrow") - List all categories: return spec.categories - Find a helper: return spec.helpers.find(h => h.name === "createArrowBetweenShapes")

Parameters (1)

codestringrequired
JavaScript code that receives `spec` and returns a result. Must use `return` to produce output.

exec

Execute JavaScript code on a tldraw canvas. The code runs in the widget with access to the live `editor` instance, helper functions, and normal js. Use the `search` tool first to discover available Editor methods and shape types. Each canvas has a unique `canvasId`. Omit `canvasId` to create a new blank canvas. To edit an existing canvas, pass the `canvasId` that was returned by a previous exec call. Shapes and text grow depending on the amount of text they have. Use clever scripting to ensure there are no unintended overlaps. Examples: - Create a rectangle: editor.createShape({ _type: 'rectangle', shapeId: 'box1', x: 200, y: 120, w: 320, h: 180, text: 'Hello' }) - Connect shapes with an arrow: editor.createShape({ _type: 'arrow', shapeId: 'a1', fromId: 'box1', toId: 'box2', x1: 0, y1: 0, x2: 100, y2: 0 }) - Select and zoom: editor.select('box1'); editor.zoomToSelection() - Read shapes: return editor.getCurrentPageShapes() - Distribute evenly: editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal') - Box around shapes: boxShapes(['box1', 'box2'], { text: 'Group label', color: 'blue' }) - Stack shapes dynamically: editor.createShape({ _type: 'rectangle', shapeId: 'a', x: 0, y: 0, w: 300, h: 200, text: 'First box\nwith wrapping text' }); const bounds = editor.getShapePageBounds('a'); editor.createShape({ _type: 'rectangle', shapeId: 'b', x: 0, y: bounds.maxY + 20, w: 300, h: 200, text: 'Below first' })

Parameters (2)

codestringrequired
JavaScript code to execute. Has access to `editor` (tldraw Editor instance) and helper functions.
canvasIdstring
Canvas ID to edit. Omit to create a new blank canvas. Pass a canvasId from a previous exec result to continue editing that canvas.

_exec_callback

App-only: widget calls this to resolve a pending exec request.

Parameters (3)

channelstringrequired
resultobject
errorstring

_get_canvas_state

App-only: get the latest checkpoint for a canvas by its canvasId.

Parameters (1)

canvasIdstringrequired

read_checkpoint

App-only: read shapes from a checkpoint by ID.

Parameters (1)

checkpointIdstringrequired

save_checkpoint

App-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings.

Parameters (5)

checkpointIdstringrequired
shapesJsonstringrequired
assetsJsonstring
bindingsJsonstring
canvasIdstring

README.md8 KBView on GitHub

<div alt style="text-align: center; transform: scale(.25);"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/tldraw/tldraw/raw/main/assets/github-hero-dark.png" /> <img alt="tldraw" src="https://github.com/tldraw/tldraw/raw/main/assets/github-hero-light.png" /> </picture> </div> <p align="center"> <a href="https://www.npmjs.com/package/tldraw"><img src="https://img.shields.io/npm/v/tldraw" alt="npm" /></a> <a href="https://www.npmjs.com/package/tldraw"><img src="https://img.shields.io/npm/dm/tldraw" alt="npm downloads" /></a> <a href="https://discord.tldraw.com/?utm_source=github&utm_medium=readme&utm_campaign=sociallink"><img src="https://img.shields.io/badge/discord-join-5865F2?logo=discord&logoColor=white" alt="Discord" /></a> <a href="https://deepwiki.com/tldraw/tldraw"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki" /></a> </p> <h3 align="center"> Build infinite canvas apps in React with the tldraw SDK. </h3> <p align="center"> <a href="https://tldraw.dev/quick-start">Docs</a> · <a href="https://tldraw.dev/examples">Examples</a> · <a href="https://tldraw.dev/starter-kits/overview">Starter kits</a> </p>

Feature highlights

tldraw provides a feature-complete infinite canvas engine designed to be the foundation for any canvas app. Create custom shapes, tools, bindings and UI components for a custom experience. Use the default whiteboarding tool set or use the library's primitives to build entirely new shapes and interactions.

Multiplayer — self-hostable real-time collaboration with @tldraw/sync
Drawing and diagramming — pressure-sensitive drawing, geometric shapes, rich text, arrows, snapping to shapes, edge scrolling, image and video support, image export
Runtime API - drive the canvas at runtime with the Editor API
Fully extensible — custom shapes, tools, bindings, UI components, side effects, and event hooks
AI integrations — canvas primitives for building with LLMs
DOM canvas — web rendering supports anything the browser supports, including embedded websites from YouTube, Figma, GitHub, and more
Broad support — works in any browser across desktop, touch screens, tablets, and mobile devices

Who's using tldraw

The tldraw SDK powers canvas experiences in products from Google, Shopify, BlackRock, Autodesk, ClickUp, Replit, Google Stitch, Luma, Runway, Padlet, Mobbin, Jam, Craft, Honeycomb, SchoolAI, Brisk, CADChat, bigpi, Genio, Pollination, Legendkeeper, Matilda, Aries, Alai, Dirac, and many more.

See our showcase for case studies on how teams build with tldraw.

Quick start

Install the tldraw package:

bash

npm i tldraw

Then, use the <Tldraw /> component in your React app:

tsx

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function App() {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw />
		</div>
	)
}

Starter kits

Starter kits provide the custom shapes, tools, and user interface needed for common applications. Each kit is MIT-licensed. Hack together a prototype, build out an app on top, or reference the code in a larger project.

Start building with:

bash

npx create-tldraw@latest

Multiplayer — self-hosted real-time collaboration powered by @tldraw/sync and Cloudflare Durable Objects, the same stack behind tldraw.com
Agent — AI agents that read, interpret, and modify canvas content
Workflow — drag-and-drop node builder for automation pipelines, visual programming, and no-code platforms
Chat — canvas-powered AI chat where users sketch, annotate, and mark up images alongside conversations
Image pipeline — node-based builder for image generation pipelines
Branching chat — AI chat with visual branching, letting users explore and compare different conversation paths
Shader — WebGL shaders that respond to canvas interactions

Local development

The development server runs the examples app at localhost:5420. You'll need Node.js ^20.0.0. Clone the repo, then enable corepack for the correct yarn version:

bash

npm i -g corepack

Install dependencies and start the dev server:

bash

yarn
yarn dev

Documentation

Documentation for the most recent release can be found on tldraw.dev/docs, including reference docs. Our release notes can be found here.

For more agent-friendly docs, see our LLMs.txt.

From 5.1.x onward, published packages also include a DOCS.md file with the appropriate docs-site content and a generated RELEASE_NOTES.md file with versioned release notes. If you or your coding agent need release notes for your installed version specifically, check these files alongside the source in your node_modules folder.

Community

Discord — questions, feedback, and discussion
Twitter/X — news and updates
Submit an issue — bug reports and feature requests

Contributing

We are not accepting contributions at this time. If you've found a bug or have a feature request, please create an issue and we can discuss it there. See our contributing guide for details.

License

The tldraw SDK is provided under the tldraw license. You can use the SDK freely in development. Production use requires a license key. Visit tldraw.dev to learn more.

Trademarks

Please see our trademark guidelines for info on acceptable usage.

Contributors

Star history

Install

Remote endpoint

Streamable HTTP

Hosted server - connect over the network, no local install.

url

https://tldraw-mcp-app.tldraw.workers.dev/mcp

Add to VS Code Add to Cursor

claude_desktop_config.json

json

{
  "mcpServers": {
    "tldraw": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://tldraw-mcp-app.tldraw.workers.dev/mcp"
      ]
    }
  }
}

Desktop config is stdio-only; this bridges via mcp-remote. Native remote: Settings > Connectors.