Canvas export

Skill prateek11rai/tldraw-canvas-kit/skills/canvas-export

Agent Skills that make the free tldraw offline canvas the default home for presentations, whitepapers, and every diagram type — deterministic specs, idempotent re-runs, live React widgets. Works in Claude Code, Cursor, Codex and 70+ agents.

Install

npx -y skills add prateek11rai/tldraw-canvas-kit --skill canvas-export

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

11 days oldThe repository was created 11 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Export the open tldraw offline canvas — the whole page, a selection, or specific frames/slides — to shareable image or vector files (PNG/SVG, and PDF where supported) written next to the .tldraw file. Use when the user wants to share, embed, or publish a diagram, deck, or whitepaper outside tldraw, or asks to "export", "save as PNG/SVG/PDF", or "get an image of this". Produces consistent export naming and location every run.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.2 KB, as published. Nobody here has run it

canvas-export

Turn canvas content into portable files for sharing, alongside the source .tldraw so exports stay version-adjacent.

The canvas is programmable — canvases can carry animated/interactive elements (tick-loop animation, React shape widgets), which export as a static frame. When the user wants the motion or interactivity itself, share the .tldraw file (its document script travels with it) and pair with the canvas-widget skill.

Before you start

Read references/shared/bridge.md (bundled with this skill) and references/shared/conventions.md.
Read ./reference.md — the export API contract (editor.toImageDataUrl / toImage / getSvgString) and the pipeline. The /exec sandbox has NO filesystem: the export call returns a base64 data URL (or SVG string) and YOU decode and write the file. The live app's /readme and api.recipes outrank these notes on newer app versions.

Target & scope

Operate on the focused doc (api.getFocusedDoc). Ask what to export if unclear:

page — everything on the current page,
selection — the user's current selection,
frames/slides — one file per frame (natural for decks: slide-01.png, …).

Output location & naming

Write next to the source file: <same-dir-as-.tldraw>/exports/<basename>/… — except when the .tldraw already sits in its own artifact folder (the dir name equals the file's basename, the presentations convention): then write to <dir>/exports/ directly, no redundant nesting. Naming: <canvas-name>.png / .svg for a whole page; slide-<order>.png per slide; <frame-name>.png per frame. kebab-case, zero-padded orders.

Workflow

Resolve the doc + its filePath; compute the exports/ dir beside it (create if missing).
Export via /exec: editor.toImageDataUrl(ids, { format:'png', scale:2, background:true }) (or getSvgString for vector); for per-frame, iterate frames in meta.order, passing each frame's id.
Decode the returned base64 payload yourself and write the files to the exports dir; return the paths. Verify pixel dimensions = scale × the returned logical size.

Verify (once)

The expected files exist on disk with non-zero size; open one to confirm it rendered (raster) or is valid XML (SVG).

Report

Doc id/name, scope exported, format, and the list of written file paths.

Fallback

api.getScreenshot (JPEG to a temp path) is a throwaway-preview tool, not an export: viewport-bound, lossy, temp-dir. Use it only when the user wants a quick look, never for a saved artifact — and never report an export path you did not confirm exists on disk. PDF export needs the app's built-in Export UI.