Building with tldraw offline
Last week, we launched tldraw offline, a desktop app for tldraw’s infinite canvas. It works with files, works with WiFi off, and doesn’t require a login.
One of the cool things about tldraw offline is that the application supports scripting — code that can interact with your canvas and change how it works. You can write this code by hand if you wish, but if you use coding agents like Claude Code or Codex, they can write the code, too.
And it turns out they’re quite good at it.
We’ve seen lots of fun tools, sketches, and experiments over the weekend. Here’s a collection of projects that we’ve made and that we’ve seen shared on the internet.
Have an idea? Download the app here.
Data visualizer
Ani, a tldraw Product Engineer, created an interactive globe to see where Earthquakes are most frequent and easily visualise their magnitude. This tool was made using a Claude agent and tldraw offline to visualise a local CSV file.
“The globe itself has all geoshapes and drawshapes, and script.js has the math for the interaction. While custom shapeutils add more power on top of this, you can do quite a lot even with the existing shapeutils in tldraw's SDK + arbitrary JS,” says Ani.
It’s easy to make this concept work with your own dataset. Try different data sources and ask your agent of choice for whatever visualisation option makes the most sense for your use case.
Presentation mode
Tim, tldraw Product Manager, turned tldraw offline into a slide deck tool by creating presentation mode. Draw diagrams, slides, workflows, and wireframes, then present them to your team without leaving the app.
“The camera controls, frames, and slide content are all from built-in pieces of the tldraw SDK, which got us most of the way there. But then it was easy to add in a few react components to handle the slide menu,” says Tim.
You and your agents could extend this file to support common presentation tool options like templates, themes, or transitions.
Kanban board
Build a Kanban board to track the progress of your projects without leaving the canvas. Cards will turn green when moved into the ‘Done’ column, and you can ask an agent to create summaries of the board.
We made this template pretty by drawing a Kanban board and asking an agent to change the colors of the cards when they’re moved.
You could have your agent connect to your actual issue tracking system or pull in live data from GitHub. Or add or tweak the status options. Or make it so each task has its own page you could link to dig into more information.
Color palette selector
Drop an image on the board and an ‘extract palette’ button will appear. The script in this file reads the image’s main colors and places a swatch card with hex codes next to it, plus a plain text line of the codes for copying. Clicking again replaces the card.
This script is editable, so you can ask an agent to change how many colors are in the palette, or even change your diagrams to match the palette.
Remix this example to find combined color palettes of multiple images or to make it easy to apply styles from one image to another.
Task tracker
Max, a tldraw Product Engineer, already uses tldraw.com as a task tracker.
“I wanted to have this custom behavior of dragging the dates out onto tasks while still having the tldraw as the main interface. I could do that with tldraw offline because you have the tldraw base and can like add special behavior to it with agents.
To create this, she used tldraw offline to sketch a UI and asked an agent to implement it.
You could extend this example by asking an agent to create a priority list of your tasks based on their dates, or a round of everything you need to complete on a certain day.
Local Model Playground
Play around with different AI models’ answers to prompts, visualised on the canvas. This was an experiment to see whether it was possible to run LLMs with just a .tldraw file. The .tldraw template ships an LLM inference engine; the open-source project https://github.com/mlc-ai/web-llm, which leverages WebGPU and supports a bunch of local models out of the box. Each model requires an initial download step, but after that, it is cached and can run offline.
“Because WebLLM does most of the heavy lifting for us, the rest of it is fairly straightforward: the model generates ideas as text, a lenient parser turns that text into a list, and then each list item is placed on the canvas as a normal tldraw shape wired up with arrows. Tada!” Says Jess, a tldraw project engineer, who built this one.
If you wanted to take this further, you could add more models, or turn it into a multi-model conversation.
Here are a few of our favourite demos from the community so far:
If you’ve made something cool with tldraw offline, show us on X or join our discord community.
