apps/vscode

Purpose

apps/vscode/ is the tldraw extension for VS Code. It registers a custom editor for .tldr files so users can edit tldraw documents inside the editor.

Directory layout

apps/vscode/
├── DOCS.md
├── README.md
├── messages.ts            # message types between extension host and webview
├── editor/                # the React app loaded into the webview
└── extension/             # the VS Code extension code (activation, commands, file ops)

The extension and the webview talk over postMessage. messages.ts is the typed contract.

How it works

graph LR
    File[.tldr file] -->|open| VSCode
    VSCode -->|register custom editor| Extension[apps/vscode/extension]
    Extension -->|spawn| Webview[apps/vscode/editor]
    Webview -->|postMessage| Extension
    Webview -->|<Tldraw />| SDK[tldraw]
    Extension -->|read/write| File

The webview hosts a <Tldraw /> instance backed by an in-memory store. Saving the file serializes the store via Editor.getStoreSnapshot(). Loading replays the snapshot through Store.loadSnapshot(), which runs migrations.

Publishing

.github/workflows/publish-vscode-extension.yml packages and publishes the extension to the VS Code Marketplace. .github/workflows/publish-editor-extensions.yml covers the editor-side dependency.

Integration points

• Imports. tldraw, @tldraw/store, plus the VS Code extension API.
• External. Reads/writes .tldr files on disk.

Related

• @tldraw/tldraw
• File formats and export