Thumbnail preview images on hover for @kitschpatrol/unplugin-tldraw file paths.
This extension assumes you have VS Code installed and are working in a project that uses the unplugin-tldraw build-tool plugin. That plugin renders local tldraw .tldr files into SVGs or bitmaps at build time via tldraw-cli.
Install the extension from the Marketplace, or run the following in VS Code's command palette:
ext install kitschpatrol.tldraw-previewNow, when you hover over a .tldr link in your code, you should see a live preview thumbnail of the referenced drawing.
For now, this extension does not itself resolve or fetch images; it only provides thumbnail previews for cached tldraw URLs that have already been resolved by unplugin-tldraw via tldraw-cli.
This extension is extremely niche and is not a part of the official tldraw project. If you want an extension to actually edit .tldr files in VS Code, then you want the official tldraw extension.
The extension provides the following settings:
| Setting | Default | Description |
|---|---|---|
tldraw-preview.manifestPath |
node_modules/.cache/tldraw/.tldraw-plugin-cache.json |
Path to the unplugin-tldraw cache manifest file. Absolute, or relative to the workspace root. |
tldraw-preview.maxWidth |
300 |
Maximum width for image previews (points) |
Hover previews work in the following file types: JavaScript, TypeScript, JSX, TSX, Markdown, MDX, HTML, Astro, and Svelte.
Query parameters on .tldr references (e.g. ./sketch.tldr?dark=true) are matched against variant entries in the manifest. The &tldr and &tldraw suffix workarounds for TypeScript issue #38638 (e.g. ./sketch.tldr?format=png&tldr) are recognized and stripped before lookup.
Issues are welcome and appreciated.
Please open an issue to discuss changes before submitting a pull request. Unsolicited PRs (especially AI-generated ones) are unlikely to be merged.
This repository uses @kitschpatrol/shared-config (via its ksc CLI) for linting and formatting, plus MDAT for readme placeholder expansion.