Productivity

tldraw

by tldraw

Overview

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.

Tools

_exec_callback

Claude

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

_get_canvas_state

Claude

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

create_shapes

Claude

delete_shapes

Claude

diagram_drawing_read_me

Claude

exec

Claude

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' })

read_checkpoint

Claude

save_checkpoint

Claude

search

Claude

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")

update_shapes

Claude

Links

Documentation ↗Privacy Policy ↗

App Stats

Tools

Prompts

Mar 13, 2026

First seen

Claude

Platforms