Tldraw Offline — Drive and script tldraw offline canvases with an agent
Tldraw Offline — Drive and script tldraw offline canvases with an agent
Start with meaning, then move to detail.
This lesson explains Tldraw Offline — Drive and script tldraw offline canvases with an agent as part of extending Hermes and connecting external tools. You will learn what it does, when it matters, and the smallest safe test that proves it works.
If you are new, do not memorize names. Focus on three questions: what problem does this solve, what access does it need, and how can you verify the result?
For practice, inspect the first example, identify its effects, run it on test data, and compare the result with the source claim.
For advanced readers, inspect Skill metadata, Reference: full SKILL.md, When to Use, then verify failure modes and version compatibility.
Complete installation and one successful task before adding new capabilities.
A clear outcome before you read.
- Understand Tldraw Offline — Drive and script tldraw offline canvases with an agent without assumed prior knowledge.
- Separate the source description from what still needs testing in your environment.
- Read the first command and identify its inputs and outputs before copying it.
Short definitions before the details.
- Skill
- An instruction bundle that teaches Hermes a repeatable workflow without necessarily adding an external service.
Drive and script tldraw offline canvases with an agent
What does the source say, and in what order?
- 01Skill metadata
Start here to understand the core idea or structure.
- 02Reference: full SKILL.md
Read this after the foundation, then connect it to the previous step.
- 03When to Use
Read this after the foundation, then connect it to the previous step.
- 04Prerequisites
Read this after the foundation, then connect it to the previous step.
- 05How to Run
Read this after the foundation, then connect it to the previous step.
- 06Quick Reference
Read this after the foundation, then connect it to the previous step.
- 07Interactive UI (clickable buttons that drive state)
Read this after the foundation, then connect it to the previous step.
- 08Shipping a self-running scripted .tldraw
Read this after the foundation, then connect it to the previous step.
- 09Procedure
Read this after the foundation, then connect it to the previous step.
- 10Shape props (validated against tldraw SDK v5 schema)
Finish here to verify the result and special cases.
Copy only after you understand the effect.
BASE=http://localhost:7236
TOKEN=$(python3 -c "import json;print(json.load(open('$HOME/.config/tldraw/server.json'))['token'])")
# find the focused document id
DOC=$(curl -s "$BASE/api/search" -X POST -H 'content-type: application/json' \
-H "Authorization: Bearer $TOKEN" \
-d '{"code":"return (await api.getFocusedDoc()).id"}' | python3 -c "import sys,json;print(json.load(sys.stdin)['result'])")
# run code with the live `editor` + `helpers` in scope
curl -s "$BASE/api/doc/$DOC/exec" -X POST -H 'content-type: application/json' \
-H "Authorization: Bearer $TOKEN" \
-d '{"code":"const {cr# get the live script file path for the doc
curl -s "$BASE/api/doc/$DOC/script-workspace" -X POST \
-H "Authorization: Bearer $TOKEN" # -> result.mainJsPath, result.isDefaultScript
# edit result.mainJsPath with read_file / patch / write_file (see scripts/main.js)
# then confirm the watcher applied it:
curl -s "$BASE/api/doc/$DOC/script-status" -H "Authorization: Bearer $TOKEN"- `ctx.editor` — the live `Editor` (`createShape`, `updateShape`, `deleteShapes`,
`getCurrentPageShapes`, `getShape`, `getBindingsFromShape`, `zoomToFit`,
`on('tick'|'event', fn)`, `run(fn, { history: 'ignore' })`).
- `ctx.helpers` — `createShapeIfMissing`, `createShapesIfMissing`,
`createArrowBetweenShapes(from, to, { arrowheadEnd })`, `translateShapes`,
`onShapeTranslate(id, fn, { signal })`, `richTextToPlainText`, `boxShapes`,
`getLints`.
- `ctx.signal` — `AbortSignal`; attach every listener/interval teardown to it.
- `config.js` (separate file) registers custom shape/tool/componeRead the first command and identify its inputs and outputs before copying it.
Match every command to your installed Hermes version, review the files and accounts it can reach, and use non-sensitive data for the first test. If this explanation differs from the source, the official source wins.