VS Code Tldraw Preview Extension

Thumbnail preview images on hover for @kitschpatrol/unplugin-tldraw file paths.

Getting started

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-preview

Now, 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.

Configuration

The extension provides the following settings:

Supported file types

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](https://github.com/microsoft/TypeScript/issues/38638) (e.g. ./sketch.tldr?format=png&tldr) are recognized and stripped before lookup.

Maintainers

kitschpatrol

Contributing

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.

License

MIT © Eric Mika