{"id":21046382,"url":"https://github.com/kitschpatrol/tldraw-cli","last_synced_at":"2026-01-30T02:55:24.199Z","repository":{"id":217200838,"uuid":"743273691","full_name":"kitschpatrol/tldraw-cli","owner":"kitschpatrol","description":"A CLI tool and TypeScript library for exporting tldraw sketches to PNG or SVG images.","archived":false,"fork":false,"pushed_at":"2026-01-20T02:13:09.000Z","size":5292,"stargazers_count":30,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-20T09:18:02.136Z","etag":null,"topics":["cli","diagram","drawing","export","npm-package","sketch","tldr","tldraw"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kitschpatrol.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-14T20:55:06.000Z","updated_at":"2026-01-20T02:13:12.000Z","dependencies_parsed_at":"2024-02-22T11:26:13.881Z","dependency_job_id":"f6cce178-1452-4a5b-8638-fc8860f07ddc","html_url":"https://github.com/kitschpatrol/tldraw-cli","commit_stats":null,"previous_names":["kitschpatrol/tldraw-cli"],"tags_count":93,"template":false,"template_full_name":null,"purl":"pkg:github/kitschpatrol/tldraw-cli","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitschpatrol%2Ftldraw-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitschpatrol%2Ftldraw-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitschpatrol%2Ftldraw-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitschpatrol%2Ftldraw-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitschpatrol","download_url":"https://codeload.github.com/kitschpatrol/tldraw-cli/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitschpatrol%2Ftldraw-cli/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28897592,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T21:06:44.224Z","status":"online","status_checked_at":"2026-01-30T02:00:06.810Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","diagram","drawing","export","npm-package","sketch","tldr","tldraw"],"created_at":"2024-11-19T14:29:23.123Z","updated_at":"2026-01-30T02:55:24.193Z","avatar_url":"https://github.com/kitschpatrol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--+ Warning: Content inside HTML comment blocks was generated by mdat and may be overwritten. +--\u003e\n\n\u003c!-- title --\u003e\n\n# @kitschpatrol/tldraw-cli\n\n\u003c!-- /title --\u003e\n\n\u003c!-- badges --\u003e\n\n[![NPM Package @kitschpatrol/tldraw-cli](https://img.shields.io/npm/v/@kitschpatrol/tldraw-cli.svg)](https://npmjs.com/package/@kitschpatrol/tldraw-cli)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n\u003c!-- /badges --\u003e\n\n\u003c!-- description --\u003e\n\n**A CLI tool and TypeScript library for exporting tldraw sketches to PNG or SVG images.**\n\n\u003c!-- /description --\u003e\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e The tldraw project and website are rapidly evolving, and time is not always available to keep `tldraw-cli`'s abstractions up to date, particularly for commands that interface directly with sketch URLs. Working with local `.tldr` files should be relatively stable, but caveat emptor.\n\n\u003c!-- table-of-contents { maxDepth: 2 } --\u003e\n\n## Table of contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Usage](#usage)\n - [CLI](#cli)\n - [API](#api)\n - [Common workflows](#common-workflows)\n- [Background](#background)\n- [Implementation notes](#implementation-notes)\n- [The future](#the-future)\n- [Maintainers](#maintainers)\n- [Contributing](#contributing)\n- [License](#license)\n\n\u003c!-- /table-of-contents --\u003e\n\n## Overview\n\nA CLI app to automate conversion and export of [tldraw](https://tldraw.dev) URLs and `.tldr` files into SVG or PNG image formats, exposing a number of options along the way. It also provides commands for opening tldraw files in either local or remote instances of the tldraw editor website.\n\nThis could be useful in the context of a content publishing pipeline where you want to use a `.tldr` file (perhaps under version control) as the \"source of truth\" for assets to be embedded elsewhere, and you don't want to manage the export of that diagram manually.\n\n_For `.tldr` file import support in Vite projects, please see [@kitschpatrol/vite-plugin-tldraw](https://github.com/kitschpatrol/vite-plugin-tldraw)._\n\n## Installation\n\nInvoke directly:\n\n```sh\nnpx @kitschpatrol/tldraw-cli export some-file.tldr\n```\n\n...or install locally:\n\n```sh\nnpm install --save-dev @kitschpatrol/tldraw-cli\n```\n\n...or install globally:\n\n```sh\nnpm install --global @kitschpatrol/tldraw-cli\n```\n\n## Usage\n\n### CLI\n\n\u003e [!NOTE]\n\u003e As of version 4.5.0, command line functionality is aliased to both `tldraw` and `tldraw-cli`.\n\u003e\n\u003e **The less verbose `tldraw` command is preferred.** The `tldraw-cli` alias is deprecated and will be removed in the next major version.\n\n\u003c!-- cli-help --\u003e\n\n#### Command: `tldraw`\n\nCLI tools for tldraw.\n\nThis section lists top-level commands for `tldraw`.\n\nUsage:\n\n```txt\ntldraw \u003ccommand\u003e\n```\n\n| Command | Argument | Description |\n| -------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `export` | `\u003cfiles-or-urls..\u003e` | Export a local tldraw \".tldr\" file or a tldraw\\.com URL to an svg, png, or tldr file. Prints the absolute path(s) to the exported image(s) to stdout. |\n| `open` | `[files-or-urls..]` | Open a tldraw `.tldr` file or tldraw\\.com URL in your default browser with either the official tldraw\\.com site or a locally-hosted instance of the editor. Call `open` without an argument to open a blank sketch. Sketches opened via URL with the `--local` flag will be temporarily copied to the local system, and will not be kept in sync with tldraw\\.com. This process does not exit until the browser is closed. Warning: Passing a local .tldr file without the `--local` option will upload and share the sketch on tldraw\\.com. |\n\n| Option | Description | Type |\n| ------------------- | ------------------- | --------- |\n| `--help`\u003cbr\u003e`-h` | Show help | `boolean` |\n| `--version`\u003cbr\u003e`-v` | Show version number | `boolean` |\n\n_See the sections below for more information on each subcommand._\n\n#### Subcommand: `tldraw export`\n\nExport a local tldraw \".tldr\" file or a tldraw\\.com URL to an svg, png, or tldr file. Prints the absolute path(s) to the exported image(s) to stdout.\n\nUsage:\n\n```txt\ntldraw export \u003cfiles-or-urls..\u003e\n```\n\n| Positional Argument | Description | Type |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| `files-or-urls` | The tldraw sketch to export. May be one or more paths to local `.tldr` files, or tldraw\\.com sketch URLs. Accepts a mix of both file paths and URLs, and supports glob matching via your shell. Prints the absolute path(s) to the exported image(s) to `stdout`. _(Required.)_ | `array` |\n\n| Option | Description | Type | Default |\n| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------- |\n| `--format`\u003cbr\u003e`-f` | Output image format. | `\"png\"` `\"svg\"` `\"tldr\"` | `\"svg\"` |\n| `--output`\u003cbr\u003e`-o` | Output image directory. | `string` | `\"./\"` |\n| `--name`\u003cbr\u003e`-n` | Output image name (without extension). | `string` | The original file name or URL id is used. |\n| `--frames` | Export each sketch \"frame\" as a separate image. Pass one or more frame names or IDs to export specific frames, or pass the flag without the arguments to export all frames. By default, the entire first page is exported with all frames. | `array` | `false` |\n| `--pages` | Export each sketch \"page\" as a separate image. Pass one or more page names or IDs to export specific page, or pass one or more page index numbers (from 0), or pass the flag without the arguments to export all pages. By default, only the first page is exported. | `array` | `false` |\n| `--transparent`\u003cbr\u003e`-t` | Export an image with a transparent background. | `boolean` | `false` |\n| `--dark`\u003cbr\u003e`-d` | Export a dark theme version of the image. | `boolean` | `false` |\n| `--padding` | Set a specific padding amount around the exported image. | `number` | `32` |\n| `--scale` | Set a sampling factor for raster image exports. | `number` | `1` |\n| `--strip-style` | Remove `\u003cstyle\u003e` elements from SVG output, useful to lighten the load of embedded fonts if you intend to provide your own stylesheets. Applies to SVG output only. | `boolean` | `false` |\n| `--print`\u003cbr\u003e`-p` | Print the exported image(s) to stdout instead of saving to a file. Incompatible with `--output`, and disregards `--name`. PNGs are printed as base64-encoded strings. | `boolean` | `false` |\n| `--verbose` | Enable verbose logging. All verbose logs and prefixed with their log level and are printed to `stderr` for ease of redirection. | `boolean` | `false` |\n| `--help`\u003cbr\u003e`-h` | Show help | `boolean` | |\n| `--version`\u003cbr\u003e`-v` | Show version number | `boolean` | |\n\n#### Subcommand: `tldraw open`\n\nOpen a tldraw `.tldr` file or tldraw\\.com URL in your default browser with either the official tldraw\\.com site or a locally-hosted instance of the editor. Call `open` without an argument to open a blank sketch. Sketches opened via URL with the `--local` flag will be temporarily copied to the local system, and will not be kept in sync with tldraw\\.com. This process does not exit until the browser is closed. Warning: Passing a local .tldr file without the `--local` option will upload and share the sketch on tldraw\\.com.\n\nUsage:\n\n```txt\ntldraw open [files-or-urls..]\n```\n\n| Positional Argument | Description | Type |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |\n| `files-or-urls` | The `.tldr` file(s) or tldraw\\.com sketch URL(s) to open. Omit the argument to open a blank sketch. Supports glob matching via your shell. Prints the URL of the local server to `stdout`. | `array` |\n\n| Option | Description | Type | Default |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |\n| `--local`\u003cbr\u003e`-l` | Open the file or URL in a local instance of tldraw, instead of tldraw\\.com. | `boolean` | `false` |\n| `--verbose` | Enable verbose logging. All verbose logs and prefixed with their log level and are printed to `stderr` for ease of redirection. | `boolean` | `false` |\n| `--help`\u003cbr\u003e`-h` | Show help | `boolean` | |\n| `--version`\u003cbr\u003e`-v` | Show version number | `boolean` | |\n\n\u003c!-- /cli-help --\u003e\n\n#### Examples\n\n##### Basic `.tldr` file image export\n\nTo export the file `your-drawing.tldr` to an SVG named `your-drawing.svg` in the current working directory, run the following command. Note that the default output format is SVG, and the default export location is the current working directory.\n\n```sh\ntldraw export your-drawing.tldr\n```\n\nThe file will retain its original name, e.g. `your-drawing.svg`\n\n##### Basic tldraw\\.com image download\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_JsxJk8dag6QsrqExukis4\n```\n\nThe tldraw\\.com URL's id (e.g. `v2_c_JsxJk8dag6QsrqExukis4`) will be used for the file name.\n\nThis is approximately equivalent to clicking the tldraw\\.com \"☰ → Edit → Export As → SVG\" menu item.\n\n##### Export a remote tldraw\\.com image to a local .tldr file\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_JsxJk8dag6QsrqExukis4 --format tldr\n```\n\nThis is approximately equivalent to clicking the tldraw\\.com \"☰ → File → Save a copy\" menu item.\n\nNote that using `--format tldr` with a _file path_ instead of a _URL_ will still send the file through the pipeline, but it's effectively a no-op. (Except perhaps in rare edge cases where tldraw performs a file format version migration).\n\n##### Export to a specific image / file format\n\n```sh\ntldraw export your-drawing.tldr --format png\n```\n\nThis is approximately equivalent to clicking the tldraw\\.com \"☰ → Edit → Export As → PNG\" menu item.\n\n##### Export with a transparent background\n\n```sh\ntldraw export your-drawing.tldr --transparent --format png\n```\n\nThis is approximately equivalent to checking the tldraw\\.com \"☰ → Edit → Export As → ☐ Transparent\" menu item.\n\n##### Export to a specific destination\n\n```sh\ntldraw export your-drawing.tldr --output ~/Desktop\n```\n\nExports to `~/Desktop/your-drawing.svg`\n\n##### Export to a specific destination and filename\n\n```sh\ntldraw export your-drawing.tldr --output ~/Desktop --name not-your-drawing\n```\n\nExports to `~/Desktop/not-your-drawing.svg`\n\n##### Export all frames from a tldraw\\.com URL\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw --frames\n```\n\nThe exported files will be suffixed with their frame name, e.g.:\n\n`v2_c_FI5RYWbdpAtjsy4OIKrKw-frame-1.png`\n`v2_c_FI5RYWbdpAtjsy4OIKrKw-frame-2.png`\n`v2_c_FI5RYWbdpAtjsy4OIKrKw-frame-3.png`\n\nThe frame name will be slugified.\n\nIt's possible in tldraw to give multiple frames in a single sketch the same name. In these cases, the frame ID is used in addition to the name to ensure unique output file names.\n\n##### Export a specific frame from a tldraw\\.com URL\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw --frames \"Frame 3\"\n```\n\n##### Export multiple frames from a tldraw\\.com URL\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw --frames \"Frame 1\" \"Frame 3\"\n```\n\n##### Export a specific page by name from a tldraw\\.com URL\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_L_RFQ3mJA_BWHejdH2hlD --pages \"Page 3\"\n```\n\n##### Export a specific page by index from a tldraw\\.com URL\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_L_RFQ3mJA_BWHejdH2hlD --pages 0 2\n```\n\n##### Export each page as its own SVG from a tldraw\\.com URL\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_L_RFQ3mJA_BWHejdH2hlD --pages\n```\n\n##### Write an SVG to stdout\n\n```sh\ntldraw export https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw --print\n```\n\n##### Open a tldraw\\.com URL\n\n```sh\ntldraw open https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw\n```\n\nThe remote sketch is copied to a locally-hosted instance of tldraw, which is then opened in your default browser.\n\n### API\n\nThe `tldraw-cli` command line functionality is also provided in module form for programmatic use in TypeScript or JavaScript Node projects.\n\nThe library exports two async function, `tldrawToImage`, and `tldrawOpen`.\n\n#### `tldrawToImage`\n\nThis mirrors the `tldraw export` CLI command.\n\nIt takes an options argument mirroring the arguments available via the command line. Here's the full type signature of the function. The same default values from the CLI apply:\n\n```ts\ntype TldrawToImageFn = (\n tldrPathOrUrl: string,\n options: {\n dark?: boolean\n format?: 'png' | 'svg' | 'tldr'\n frames?: boolean | string[]\n name?: string\n output?: string\n padding?: number\n pages?: boolean | number[] | string[]\n print?: boolean\n scale?: number\n stripStyle?: boolean\n transparent?: boolean\n },\n) =\u003e Promise\u003cstring[]\u003e\n```\n\nThe function exports the image in the requested format and returns an array of the output image(s) or file(s).\n\nGenerally, a single file is returned — but the `string[]` return type also accommodates invocations with `frame: true` where multiple images will be generated.\n\nAssuming you've installed `@kitschpatrol/tldraw-cli` locally in your project, it may be used as follows:\n\n```ts\n// Tldraw-cli-api-test.ts\n\nimport { tldrawToImage } from '@kitschpatrol/tldraw-cli'\n\n// Convert a local file to PNG\nconst [imagePath] = await tldrawToImage('./some-file.tldr', { format: 'png', output: './' })\nconsole.log(`Wrote image to: \"${imagePath}\"`)\n\n// Convert a remote tldraw.com URL to SVG\nawait tldrawToImage('https://www.tldraw.com/s/v2_c_JsxJk8dag6QsrqExukis4')\n\n// Convert all frames from a single tldraw.com URL to separate SVGs\n// When the `frames` option is set, the function returns an array\n// of resulting file paths, instead of a solitary string\nconst framePathsArray = await tldrawToImage('https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw', {\n frames: true,\n})\nconsole.log(`Wrote frames to: \"${framePathsArray}\"`)\n\n// Convert a specific frame from a tldraw.com URL to a PNG\nawait tldrawToImage('https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw', {\n format: 'png',\n frames: ['Frame 3'],\n})\n\n// You can also use the frame id instead of the frame name, if you're into that sort of thing\n// It will work with or without the `shape:` prefix\nawait tldrawToImage('https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw', {\n frames: ['shape:x8z3Qf7Hgw4Qqp2AC-eet'],\n})\n```\n\nBy default, the Node API only logs warnings and errors. If you want to log the equivalent of the `--verbose` flag from the command line version, then you can set a flag on a logging object exported from the library:\n\n```ts\n// Tldraw-cli-api-verbose-test.ts\n\nimport { log, tldrawToImage } from '@kitschpatrol/tldraw-cli'\n\n// This will log extra info\nlog.verbose = true\nawait tldrawToImage('https://www.tldraw.com/s/v2_c_JsxJk8dag6QsrqExukis4')\n\n// Now we'll only log errors and warnings\nlog.verbose = false\nawait tldrawToImage('https://www.tldraw.com/s/v2_c_JsxJk8dag6QsrqExukis4')\n```\n\n#### `tldrawOpen`\n\nMirrors the `tldraw open` CLI command.\n\n\u003e [!IMPORTANT]\n\u003e Due to recent tldraw\\.com requirements to login before sharing a sketch, opening a _local_ .tldr file with the `location: 'remote'` option is no longer supported.\n\n```tsx\nasync function tldrawOpen(\n tldrPathOrUrl?: string,\n options?: Partial\u003c{\n location: 'local' | 'remote'\n }\u003e,\n): Promise\u003c{\n browserExitPromise: Promise\u003cChildProcess\u003e\n openedSketchUrl: string\n}\u003e\n```\n\nIt's important to note that the returned result includes `browserExitPromise`, which resolves when the user has completely exited the web browser used to open the tldr file or url.\n\nYou _must_ await the `browserExitPromise` (or somehow keep script's process alive) if you're opening a tldr file with the \\`location: 'local'\\`. This prevents the local server from closing prematurely, which would interfere with any server-dependent actions in tldraw.\n\nExample of opening a local file:\n\n```ts\nimport { tldrawOpen } from 'tldraw-cli'\n\nconst { browserExitPromise } = await tldrawOpen('./sketch.tldr', {\n location: 'local',\n})\n\n// Wait for the browser to close to keep\n// the local tldraw instance running!\nawait browserExitPromise\n```\n\nWhile opening the file remotely on tldraw\\.com is more casual:\n\n```ts\nimport { tldrawOpen } from 'tldraw-cli'\n\nawait tldrawOpen('./sketch.tldr', {\n location: 'remote',\n})\n```\n\n### Common workflows\n\nIf you're working with .tldr files and `tldraw-cli` locally, it's often convenient to automatically export image files from your sketches whenever they've changed.\n\nDepending on your workspace and particularly use-cases, there are several approaches that can work well to trigger re-export on change:\n\n#### A pure CLI workflow\n\nThe [`chokidar-cli`](https://www.npmjs.com/package/chokidar-cli) tool (which wraps the [Chokidar](https://github.com/paulmillr/chokidar) library) makes quick work of this:\n\n```sh\nnpx chokidar-cli \"**/*.tldr\" -c \"npx @kitschpatrol/tldraw-cli export ${path}\"\n```\n\nThis will watch for changes to .tldr files anywhere in or below the current directory, and then export an SVG every time they change. Pass [additional flags](#subcommand-tldraw-export) to `tldraw-cli export` if you need particular export settings.\n\n#### VS Code tldraw extension workflow\n\nThe [tldraw extension for VS Code](https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode) allows you to edit local .tldr files directly from a tab in your editor. This combines well with the [File Watcher](https://marketplace.visualstudio.com/items?itemName=appulate.filewatcher) extension to trigger re-exports after making edits in a tldraw tab:\n\nInstall the extensions (assuming you have `code` in your path):\n\n```sh\ncode --install-extension tldraw-org.tldraw-vscode\ncode --install-extension appulate.filewatcher\n```\n\nThen configure your workspace's `.vscode/settings.json` file to include the following:\n\n```json\n{\n \"filewatcher.commands\": [\n {\n \"match\": \"\\\\.tldr\",\n \"isAsync\": true,\n \"cmd\": \"cd ${workspaceRoot} \u0026\u0026 npx @kitschpatrol/tldraw-cli export ${file}\",\n \"event\": \"onFileChange\"\n }\n ]\n}\n```\n\n#### Vite / static-site workflow\n\nIf you're using one of the many [Vite](https://vitejs.dev/)-powered web frameworks out there, the [`@kitschpatrol/vite-plugin-tldraw`](https://github.com/kitschpatrol/vite-plugin-tldraw) plugin can help you treat .tldr as regular importable / linkable assets in your site by automating conversion to a web-friendly format during both development and production builds of your site.\n\nSee the [plugin's readme](https://github.com/kitschpatrol/vite-plugin-tldraw/blob/main/readme.md) for details, but the gist is that it lets you import and use .tldr files as if they were already SVGs:\n\n```ts\nimport tldrFile from './test-sketch.tldr'\n\ndocument.body.innerHTML = `\u003cimg src=\"${tldrFile}\"\u003e`\n```\n\nWill render:\n\n```html\n\u003cimg src=\"./test-sketch.svg\" /\u003e\n```\n\n## Background\n\nThe potential utility of a tldraw CLI app has received mention a few times.\n\nOn GitHub:\n\n- [\\[Feature\\]: CLI export application #1491](https://github.com/tldraw/tldraw/issues/1491)\n- [AWS Lambda-based approach](https://gist.github.com/steveruizok/c30fc99b9b3d95a14c82c59bdcc69201)\n- [Added exporting of shapes and pages as images](https://github.com/tldraw/tldraw/pull/468)\n- [\\[feature\\] Copy/Share as PNG](https://github.com/tldraw/tldraw-v1/issues/361)\n\nOn Discord:\n\n- [@jorisjh in #ideas_old](https://discord.com/channels/859816885297741824/859816885801713730/1156880056501665802)\n- [@Nitsuj in #ideas_old](https://discord.com/channels/859816885297741824/859816885801713730/1020352607920869406)\n\n## Implementation notes\n\nThis tool is not a part of the official tldraw project.\n\nDue to the architecture of tldraw, export depends on functionality provided by a web browser. So, behind the scenes, this app serves a local instance of tldraw, then loads a `.tldr` and invokes the export download via the [Puppeteer](https://pptr.dev) headless browser automation tool.\n\nThis can be a bit slow (exporting usually takes a second or two), but in the context of a statically-generated content pipeline it's not the end of the world.\n\nIn terms of Puppeteer vs. Playwright and other headless browser automation tools, it [looks like](https://www.checklyhq.com/blog/puppeteer-vs-selenium-vs-playwright-speed-comparison/) Puppeteer's performance likely compares favorably. (Though I have not tested and benchmarked the alternatives in the specific context of `tldraw-cli`.)\n\nThe local instance of tldraw includes its assets dependencies, so the tool should work correctly without internet access.\n\nTrack the [tldraw releases](https://github.com/tldraw/tldraw/releases).\n\n## The future\n\nEventually, I think it would make sense for some kind of CLI tool like this one to be part of the core tldraw project. (Similar to how [tldraw-vscode](https://github.com/tldraw/tldraw/tree/main/apps/vscode) is currently integrated.)\n\nI'm consciously releasing this tool under the `@kitschpatrol` namespace on NPM to leave the `tldraw-cli` package name available to the core tldraw project.\n\n## Maintainers\n\n[@kitschpatrol](https://github.com/kitschpatrol)\n\n\u003c!-- footer --\u003e\n\n## Contributing\n\n[Issues](https://github.com/kitschpatrol/tldraw-cli/issues) and pull requests are welcome.\n\n## License\n\n[MIT](license.txt) © Eric Mika\n\n\u003c!-- /footer --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitschpatrol%2Ftldraw-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitschpatrol%2Ftldraw-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitschpatrol%2Ftldraw-cli/lists"}