Skip to content
ClaudeListedTier: partner

tldraw

Draw and diagram while you work with tldraw + Claude. Ask for a flowchart, architecture diagram, wireframe, or mind map and it appears. Edit it, and the AI sees your changes in real time, building on them, refining them, or using them as a starting point for other tasks.

First seen 2 Oct 2026. Evidence as of 2 Oct 2026.

6
Tools
From an anonymous probe
3
Source listings
Each with its own history
0
Recorded changes
Since first seen

Tools

ToolDescriptionBehaviour
_exec_callbackApp-only: widget calls this to resolve a pending exec request.Changes data
_get_canvas_stateApp-only: get the latest checkpoint for a canvas by its canvasId.Read-only
execExecute 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' })Changes data
read_checkpointApp-only: read shapes from a checkpoint by ID.Read-only
save_checkpointApp-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings.Changes data
searchSearch 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")Read-only

Change history

No changes since the first observation. The first snapshot is the baseline.

Source listings
SourceListingFirst seenLast seenVersions
Claude directory (Anthropic subregistry)02795770-2c02-42fe-888f-26769ca324a02 Oct 20262 Oct 20261
claude.com listing page02795770-2c02-42fe-888f-26769ca324a02 Oct 20262 Oct 20261
MCPTop directory snapshotanthropic:02795770-2c02-42fe-888f-26769ca324a02 Oct 20262 Oct 20261