Mods for tldraw offline
Custom shapes, tools, and UI for tldraw offline documents. Install any of them into a document with one command.
npx tldraw-mods init
npx tldraw-mods add landmarkHow to use
You need the tldraw offline app and Node 20+. Mods are per document: each .tldraw file carries its own script, assembled in a workspace folder.
- Make a folder and save your document in it.
mkdir my-canvas && cd my-canvas, then File → New in the app and File → Save into that folder. - Set up the workspace, once per folder:
npx tldraw-mods init. Writes the build and asrc/with the shell, and installs dependencies. - Add mods with the document open:
npx tldraw-mods add landmark. Downloads intosrc/mods/, bundles, loads into the open document, saves. The tool appears at the end of the toolbar. - Later:
list,remove browser, orapplyafter editingsrc/. The script is saved inside the.tldrawfile, so the document keeps its mods wherever it is opened.
Document elsewhere? npx tldraw-mods add landmark --doc=/path/to/file.tldraw. Any shadcn GitHub registry works: npx tldraw-mods add owner/repo/item. Only install mods from people you trust; a document script runs with the app's permissions whenever the file is opened.
-
Browser
shapeAn embedded web page. Click to place or drag to size; type a URL in the pill above the frame. Phone, tablet, and desktop viewport presets float above the right edge.
npx tldraw-mods add browser -
Landmark
shapeA hollow dashed named area with a constant-screen-size pin chip. Clicks inside fall through to the shapes it marks; a brush must enclose it fully. Adds a Create landmark command that wraps the selection.
npx tldraw-mods add landmark -
Tool chrome
libShared editing plumbing for box-shaped mods: EditingBoxShapeTool, useShapeEditing, ToolChrome slots, and self-sizing ToolChromeField.
npx tldraw-mods add tool-chrome -
Workspace
workspaceDocument-script workspace for tldraw offline: esbuild + Tailwind build, apply-to-open-document, and a shell that loads every mod in src/mods/.
npx tldraw-mods init