| name | tldraw-export |
| description | Renders a tldraw canvas or .tldr file to a static image — SVG, PNG, JPEG, or WebP — by driving tldraw's browser-based export APIs from a headless browser, producing a shareable picture from an editable canvas. Use this skill when the user says "export my tldraw file to PNG", "render this .tldr as an SVG", "turn my tldraw canvas into an image", or needs a flat image out of a tldraw document. Not for generating an editable .tldr from a description (see tldraw-diagram), converting Mermaid (see mermaid-to-tldraw), or exporting from the tldraw desktop app's own File menu. |
| license | MIT |
| metadata | {"skillsmith-see-also":"tldraw-diagram, mermaid-to-tldraw","skillsmith-invocation":"user","skillsmith-maturity":"experimental"} |
| user-invocable | true |
tldraw-export
tldraw can export a canvas to SVG, PNG, JPEG, or WebP. The catch that drives the
whole design of this skill: the export APIs are browser-based and require a
DOM — they measure and rasterize real rendered shapes, so they do not run in
plain headless Node. Exporting programmatically therefore means driving a real
browser (Playwright/Chromium) that loads the shapes and calls the export API.
If the user just wants a one-off image and already runs the tldraw desktop app
or web editor, the fastest answer is the app's own Export menu — say so rather
than building a pipeline. When the tldraw-offline agent skill is available, it
can drive that desktop-app export directly; prefer it over a headless build for
a single image. This skill is for scripted or repeatable exports where no app is
running.
Set up the headless pipeline
- Load the shapes into a real page. Mount a tldraw editor in a Playwright
Chromium page, then
loadSnapshot(editor.store, snapshot) from the .tldr
(or use a canvas the user already has open). A DOM-less runtime will fail —
this is the single most common mistake.
- Choose the export call. Use the editor's export API to produce the image:
an SVG string for vector output, or a rasterized blob for PNG/JPEG/WebP. Pass
the shape ids to export (all shapes, or a selection) and options like
background, padding, and scale.
- Persist the bytes. Write the SVG string or the blob to the target path
from the browser context (download or
page.evaluate returning bytes).
See references/headless-export.md for the
concrete Playwright + export-API recipe, format trade-offs, and gotchas.
Choose the format deliberately
- SVG — vector, editable, smallest for diagrams; best default for docs.
- PNG — lossless raster with transparency; use
scale: 2 for crisp output.
- JPEG — smaller, no transparency; only for photo-heavy canvases.
- WebP — small raster where the target supports it.
Match the format to the destination (README, slide, print) instead of
defaulting to PNG every time.
Verify before handing off
- The output file exists, is non-empty, and opens as the claimed format.
- All intended shapes are inside the frame — a cropped export usually means the
export bounds or
padding were wrong, not the shapes.
- For raster output, confirm the resolution matches the requested
scale.
- Report the format, dimensions, and whether the whole canvas or a selection was
exported.
