tldraw

By tldraw

Get New App Alerts

Open in ChatGPT

Open in Claude

Overview

tldraw puts an infinite canvas in Codex and ChatGPT. Have your agent diagram your codebase or any process. Sketch a wireframe and have Codex turn it into an app. Pull in screenshots, annotate them, and ask your agent to update your project. Bring in your data and have ChatGPT visualise it on the canvas. And everything links to your files on tldraw.com.

Tools

_dotcom_boards

ChatGPT

Internal: the view lists the signed-in user's tldraw.com boards, one page at a time.

_dotcom_sync_url

ChatGPT

Internal: the view gets a socket address for a live tldraw.com board.

_dotcom_thumbnail

ChatGPT

Internal: the view reads the image for one board card on its home page.

_dotcom_upload

ChatGPT

Internal: the view gets where to put a file for a live tldraw.com board.

_dotcom_zero

ChatGPT

Internal: the view syncs the file list and workspaces with tldraw.com.

_import_image

ChatGPT

Internal: exec fetches an image from the web to add to the open board.

create_board

ChatGPT

Create a new, empty tldraw.com board and return its boardId and url. The board goes in your personal workspace unless you name another workspace you belong to and can add boards to — a name or id from list_workspaces, or the workspaceName search_boards reports. If the workspace you name is not one of those, the error lists the ones you can use. The new board is shared by link for editing, the same as a board created on tldraw.com.

exec

ChatGPT

Run JavaScript against an open board, named by its boardId from open_board, list_open_boards or the model context. The code receives the full editor API, helpers (createShapeId, toRichText, createArrowBetweenShapes, createMermaidDiagram, getComments, addComment), and signal. Use search to discover APIs. Return small JSON. Document edits commit atomically as one undo step; addComment posts as the signed-in user, outside that undo step; always await asynchronous work and do not retain editor references or perform external side effects. Returns the actual result, not an acknowledgement. Does not open another app view; if the view is still loading after open_board, this waits for it. On an unknown outcome, inspect the board before retrying.

get_profile

ChatGPT

The tldraw.com account this session is signed in as: a stable id, and the name and email when known. Takes no arguments.

list_open_boards

ChatGPT

List the boards the user has open in tldraw views, in any of their chats or the sidebar: IDs and editability. Only open boards can be edited. An empty list can mean the side panel is still loading.

list_workspaces

ChatGPT

List the tldraw.com workspaces this account belongs to, including its personal workspace. Each workspace comes with its id, name, whether it is the personal one, and this account’s role in it. create_board accepts any of them as workspace.

open_board

ChatGPT

Open a live tldraw.com board in the side panel: action="open" with a boardId from search_boards or list_open_boards. After the view opens, call exec with this boardId to edit it; do not call open_board for each edit.

rename_board

ChatGPT

Rename a tldraw.com board and return its new and previous names. You can rename boards in your own workspace and boards owned by a workspace you belong to; a board only shared with you by link cannot be renamed.

screenshot

ChatGPT

Explicitly request a PNG of an open board, named by its boardId. Does not open another view; exec never takes screenshots automatically.

search

ChatGPT

Query the full tldraw Editor API using JavaScript with a spec object. Return a small result. spec.members contains name, signature, description, category and examples; spec.categories lists categories; spec.types.shapes contains raw SDK shape types and props; spec.helpers documents the helpers available in exec. Example: return spec.members.filter(m => /createShape|alignShapes/.test(m.name)). Example: return spec.types.shapes.find(s => s.shapeType === "geo").

search_boards

ChatGPT

List tldraw.com boards this account can reach: the boards in its own workspace, the boards owned by the workspaces it belongs to, and the boards shared with it by link that it has opened. Searching by name is not available on this deployment, so this tool takes no query and lists boards in order instead. Results are ordered by addedAt — when a board joined this account's boards, which is when it was created for its own boards and when the share link was first opened for shared ones — so a board shared this morning leads the list however old it is. createdAt is when the board itself was made, and updatedAt when it last changed, by anyone. Each board's source says how you reach it: owned for your own, workspace for one owned by a workspace you belong to, and shared for one somebody sent you a link to. Returns up to 20 boards, each with a boardId that get_board_info and the other tools take. If the result carries a nextCursor there are more boards: call again with that cursor to get the next page. An empty result is a normal result, not an error.

search_mentions

ChatGPT

Find boards for the composer @-mention picker.

tldraw_home

ChatGPT

Open the tldraw plugin

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