tldraw-offline

Inspect, edit, and script tldraw Desktop canvases through a local HTTP API.

1|Updated Aug 6, 2025
One-click install
npx skills add https://github.com/azaidrahman/zaid-sani-dotfiles --skill tldraw-offline-azaidrahman
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tldraw-offline
Source: https://github.com/azaidrahman/zaid-sani-dotfiles/tree/main/dot_claude/skills/tldraw-offline
Command: npx skills add https://github.com/azaidrahman/zaid-sani-dotfiles --skill tldraw-offline-azaidrahman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working with open tldraw Desktop documents programmatically is hard because the canvas state lives inside a running app. This Skill exposes the app's local HTTP server so an agent can list documents, read shapes and bindings, execute JavaScript against a live editor, capture screenshots, and install durable document scripts without manual clicking. ## Core Features & Use Cases - Canvas inspection and editing: Discover open documents, read shape records and bindings, and mutate the canvas via the /api/search and /api/doc/:id/exec endpoints. - Durable behavior scripts: Write script/main.js and script/config.js through the script workspace to add clickable UI, animations, custom shapes, bindings, and overlays that persist with the document. - Diagram quality checks: Create properly bound arrows with helpers.createArrowBetweenShapes and run helpers.getLints() before reporting a diagram complete. - Use Case: Ask the agent to build a project plan diagram in a new tldraw document — it creates the file via /api/docs/create, draws labeled boxes with real arrow bindings, lints the result, and saves the document. ## Quick Start Ask the agent to list my open tldraw documents and add a labeled rectangle to the focused canvas.

Frequently Asked Questions about tldraw-offline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I edit an open tldraw document programmatically?

Send JavaScript to the tldraw Desktop local server at POST /api/doc/:id/exec, which runs your code against a live editor scoped to that document. Authenticate with the bearer token from server.json and verify changes afterward with api.getShapes().

How do I create a new tldraw file from a script?

POST to /api/docs/create with a JSON body containing the document name. The app creates the .tldraw file, opens it in a new window, saves it to disk, and returns the new document id for immediate use with other endpoints.

Why do my tldraw API requests return 401 errors?

Each Bash call runs in a fresh shell, so an exported token variable does not persist between calls. Re-read the port and token from server.json at the top of every call, or use the tq helper which handles this automatically.

Can tldraw document scripts add clickable UI or animations?

Yes, durable behavior is added through the script workspace by writing script/main.js, and custom shapes, tools, or overlays require a script/config.js that modifies the editor config before mount. Check script-status for an applied state to confirm success.

What should I do when the target tldraw window closes mid-task?

Do not retry the old document id. Call api.getDocs() fresh and match by document name; if no match exists, stop and report rather than writing to whatever document happens to be open.