tldraw-offline

Inspect, edit, and script open tldraw Desktop canvases via its local HTTP API.

3|Updated Apr 8, 2025
One-click install
npx skills add https://github.com/ZanzyTHEbar/dragonarchy --skill tldraw-offline-zanzythebar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tldraw-offline
Source: https://github.com/ZanzyTHEbar/dragonarchy/tree/main/packages/opencode/.config/opencode/skills/tldraw-offline
Command: npx skills add https://github.com/ZanzyTHEbar/dragonarchy --skill tldraw-offline-zanzythebar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working with open tldraw Desktop canvases programmatically is impossible without knowing the app's local HTTP server, its per-launch auth token, and its document model. This Skill teaches an agent how to discover the server, authenticate, read and mutate canvas state, and add durable scripted behavior to .tldraw documents. ## Core Features & Use Cases - Canvas inspection and editing: List open documents, read shapes and bindings, and run JavaScript against a live editor through the /api/search and /api/doc/:id/exec endpoints. - Durable document scripts: Create persistent behaviors (clickable UI, animations, custom shapes via config.js) through the /script-workspace endpoint with watcher status verification. - Screenshots and linting: Capture canvas or window screenshots and run helpers.getLints() to validate diagram connections before reporting completion. - Use Case: Ask the agent to arrange and connect boxes on your open project-plan board; it discovers the doc, creates bound arrows between shapes, lints the result, and saves the local document. ## Quick Start Ask the agent to list my open tldraw canvases and add a labeled rectangle to the focused document.

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 canvas from an AI agent?

The tldraw Desktop app exposes a local HTTP server whose port and bearer token live in ~/.config/tldraw/server.json. Send JavaScript to POST /api/doc/:id/exec with the authorization header to mutate the live editor, then verify with api.getShapes().

How do I find the tldraw server port and auth token?

Read the port and token fields from $XDG_CONFIG_HOME/tldraw/server.json or ~/.config/tldraw/server.json. If the file's pid is dead, the metadata is stale and the app must be restarted before requests will succeed.

Can I add persistent scripts to a tldraw document?

Yes, for locally owned documents. Open POST /api/doc/:id/script-workspace, edit script/main.js on disk, and poll /api/doc/:id/script-status until state is applied. Remote boards have no local script workspace; only the host owns script files.

Why do my tldraw API requests return 401 unauthorized?

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 bundled tq helper which handles authentication automatically.

What is the difference between local and remote tldraw documents?

Local docs expose documentId, filePath, and unsavedChanges and can be saved with helpers.saveDoc(). Remote docs are shared by a host over LAN; edits sync to the host working copy, and you must not save, open script workspaces, or claim the archive was saved.