tldraw-offline

Manipulate tldraw offline canvases via a local HTTP API and embedded JavaScript scripts.

Updated Jun 25, 2026
One-click install
npx skills add https://github.com/Rheasilvia/hermes-desktop --skill tldraw-offline
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tldraw-offline
Source: https://github.com/Rheasilvia/hermes-desktop/tree/main/optional-skills/creative/tldraw-offline
Command: npx skills add https://github.com/Rheasilvia/hermes-desktop --skill tldraw-offline

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tldraw/tlschema, and includes scripts (resource) components.

What problem does it solve?

This Skill solves the limitation of manual whiteboard editing by allowing you to programmatically generate, modify, and add durable behavior to tldraw canvases without manual clicking.

Core Features & Use Cases

  • Programmatic Canvas Control: Use scripts to generate complex diagrams, wireframes, and layouts instantly.
  • Durable Document Scripts: Embed JavaScript directly into .tldraw files to create interactive buttons, reactive shapes, and custom logic that persists across reloads.
  • Use Case: Build an interactive dashboard on a whiteboard where clicking a button updates a counter or triggers a state change, turning a static drawing into a functional local tool.

Quick Start

Use the tldraw-offline skill to generate a new rectangle shape at coordinates 0,0 on the currently 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 automate tldraw canvas manipulation and generate shapes programmatically?

Automating tldraw canvas manipulation requires using a local HTTP API and embedded JavaScript document scripts to programmatically generate and modify shapes. You can execute shell commands to interact with the local control API for instant diagram generation.

Can I embed JavaScript directly into a .tldraw file to create interactive whiteboard elements?

Yes, you can embed JavaScript directly into .tldraw files to create durable document scripts. This allows you to build interactive buttons, reactive shapes, and custom logic that persist across reloads, turning static drawings into functional local tools.

What do I need to run tldraw offline and control its canvas via scripts?

To control tldraw offline via scripts, you need a running tldraw offline instance and the ability to execute shell commands. This environment setup allows you to interact with the local control API for programmatic shape generation and reactive state management.

Does tldraw offline support reactive state management for local whiteboard workflows?

Yes, tldraw offline supports reactive state management for local whiteboard workflows. Through embedded JavaScript document scripts and the local HTTP API, you can trigger state changes, update counters, and build interactive dashboards directly on the canvas.

What is the best way to build an interactive dashboard on a tldraw whiteboard?

The best way to build an interactive dashboard on a tldraw whiteboard is by embedding JavaScript document scripts. This approach enables clicking a button to trigger state changes and update counters, transforming a static drawing into a functional local tool.

Why does scripting a tldraw offline canvas require shell command execution?

Scripting a tldraw offline canvas requires shell command execution to interact with the local control API. This mechanism allows programmatic shape generation, interactive UI development, and reactive state management by sending commands directly to the running local instance.