tldraw-mcp
Provides tools to read, write, and validate tldraw files, enabling interaction with tldraw scenes.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@tldraw-mcpread the drawing from drawing.tldr"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
tldraw-mcp — headless tldraw MCP server
Node-only MCP server exposing read_tldr, write_tldr, and validate_tldr tools.
No browser, no DOM, no React — runs in plain Node v24.
Pinned version
@tldraw/editor 5.1.1
@tldraw/store 5.1.1
@tldraw/tlschema 5.1.1Related MCP server: tldraw MCP
Verified import surface (tldraw 5.1.1)
Symbol | Package | Notes |
|
| Use directly — |
|
| NOT in |
|
| |
|
| |
|
| For reading |
|
| Convert plain text → ProseMirror richText doc |
NEVER import the
tldrawumbrella package at runtime. NEVER callnew Editor()orcreateTLStorefrom@tldraw/editorin read/write/validate paths.@tldraw/tlschemais CJS — load viacreateRequirein.mjsfiles (named ESM imports fail).
Tools exposed
read_tldr— parse a.tldrfile, return records + schema versionwrite_tldr— accept a scene spec, build a.tldrfile envelopevalidate_tldr— validate a.tldrJSON blob against the live schema
Provisioning
Requires Node v24.
npm ci
npm run buildBuilt output: dist/index.js (ESM, produced by tsc).
MCP registration (LOCAL dev form)
Add to your repo's .mcp.json (already committed at repo root):
{
"mcpServers": {
"tldraw": {
"type": "stdio",
"command": "node",
"args": ["tools/tldraw-mcp/dist/index.js"]
}
}
}The universal
npx -y github:jinsoo/tldraw-mcpform (see below) can also be used here once the standalone repo is published.
Upstream tracking
To upgrade to a newer tldraw release:
./track-upstream.shThis bumps @tldraw/* in package.json, re-extracts src/defaults.json
via npm run probe-defaults, vendors a fresh llms-docs.txt, rebuilds,
and runs the full test suite. Do NOT run during active development.
llms-docs.txt
llms-docs.txt is the tldraw LLM reference doc vendored at the pinned version.
It is fetched by track-upstream.sh from https://tldraw.dev/llms-docs.txt.
.tldr file envelope
The correct write shape (do NOT use serializeTldrawJson — needs Editor):
{
tldrawFileFormatVersion: 1,
schema: store.schema.serialize(),
records: store.allRecords() // flat ARRAY, not a map
}schemaVersion is 2 for tldraw 5.1.1.
Universal install (any agent)
Runs straight from GitHub — no npm account, no local checkout:
npx -y github:jinsoo/tldraw-mcpClaude Code (.mcp.json):
{ "mcpServers": { "tldraw": { "type": "stdio", "command": "npx", "args": ["-y", "github:jinsoo/tldraw-mcp"] } } }Any MCP host that registers stdio servers (config.yaml mcp_servers example):
tldraw: { type: stdio, command: npx, args: ["-y", "github:jinsoo/tldraw-mcp"], enabled: true }Tools: read_tldr, write_tldr, validate_tldr.
This server cannot be deployed
Maintenance
Related MCP Connectors
Create, validate, edit, export (markdown/svg/png/mermaid), and search JSON Canvas files.
Design system contracts, docs search, and usage validation for @digitaltableteur components.
JSONPad docs, API, SDK and CLI references, and offline checkers for write rules and flows.
Validate oh-my-posh configurations and segment snippets against the official schema.
Related MCP Servers
- AlicenseAqualityDmaintenanceA minimal MCP server for AI-driven canvas manipulation and visualization using tldraw. It enables AI clients to programmatically create, update, and manage shapes, flowcharts, and frames on a live interactive canvas.92MIT
- AlicenseNot gradedqualityCmaintenanceEnables AI agents to read, write, and search local tldraw (.tldr) files, providing a persistent visual scratchpad for diagramming and note organization. It supports full CRUD operations on canvas shapes and metadata management for local canvas files.15 npm3MIT
- FlicenseAqualityDmaintenanceMinimal MCP server for editing tldraw .tldr files via JSON manipulation. Headless, no browser needed.181-
- AlicenseNot gradedqualityCmaintenanceEnables AI agents to build, edit, organize, and export Excalidraw diagrams (architecture, flowcharts, etc.) entirely headless, producing .excalidraw files, SVG, and PNG renders.2,975 npmMIT