tldraw/apps/vscode/extension
alex 880f82e658
New vite-based examples app (#1226)
Right now this examples app looks exactly the same as our old examples
app, but there are a couple of tiny differences:
- We use `vite` instead of our own esbuild setup for development and
bundling
- We use `@tldraw/assets` for smart asset hashing instead of copying the
assets to a public folder

You can use `@tldraw/assets` with vite with a bunch of extra config, but
it (plus a bunch of other bundlers) also support a special syntax for
specifying asset urls: `new URL('./my/asset.svg',
import.meta.url).href`. This approach is more standards-complient, but
doesn't work with every bundler just yet. This diff also adds a
url-based version of `@tldraw/assets`, although I'd like to tweak the
entry point - right now you need to import from
`@tldraw/assets/lib/urls`, but i'd like to find a way to get this to
`@tldraw/assets/urls` or something at some point.

There are a couple other extra fixes in here:
- vscode builds were broken, they're fixed now!
- there's also a little tweak to the `getBundlerAssetUrls` API to allow
passing in a function instead of an object for URL formatting
- there are new internal-only functions for injecting asset urls
globally instead of passing them in via react props. this means we can
get the benefits of cacheable URLs without having to clutter our
examples by passing them in
2023-05-05 13:10:36 +00:00
..
.vscode transfer-out: transfer out 2023-04-25 12:01:25 +01:00
assets transfer-out: transfer out 2023-04-25 12:01:25 +01:00
examples transfer-out: transfer out 2023-04-25 12:01:25 +01:00
scripts transfer-out: transfer out 2023-04-25 12:01:25 +01:00
src transfer-out: transfer out 2023-04-25 12:01:25 +01:00
.gitignore transfer-out: transfer out 2023-04-25 12:01:25 +01:00
.vscodeignore transfer-out: transfer out 2023-04-25 12:01:25 +01:00
CHANGELOG.md transfer-out: transfer out 2023-04-25 12:01:25 +01:00
icon.png transfer-out: transfer out 2023-04-25 12:01:25 +01:00
LICENSE transfer-out: transfer out 2023-04-25 12:01:25 +01:00
package.json New vite-based examples app (#1226) 2023-05-05 13:10:36 +00:00
README.md transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tsconfig.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00

Introduction

tldraw is a very good whiteboard for the web. This extension will let you use tldraw inside of VS Code, using offline .tldr files. Create drawings, diagrams, or visual documentation, and then commit the files alongside your code!

A screenshot of tldraw in VS Code

Usage

  • To create a new tldraw file, use the provided command: "tldraw: New tldraw File".

A recording of opening tldraw in VS Code

  • To view an existing tldraw file, open a file with the .tldr extension in VS Code.

Tip: The .tldr files you create with this extension can also be opened in the tldraw web app. You can also use this extension to open .tldr files saved from the web app.

Community

Support

Need help? Please open an issue for support.

Discussion

Want to connect with the developers or users? Visit the Discord channel.