Build Infinite Canvases with AI: Meet tldraw
If you've ever wanted to add a whiteboard-style infinite canvas to your app, or just play with one that comes with built-in AI capabilities, tldraw is worth a look. It's an open source SDK that gives you a full-featured canvas component, plus starter kits for integrating AI drawing and editing.
No boilerplate, no WebGL headaches. Just drop it into a React app and you've got shapes, arrows, selection, zoom, and an AI assistant that can generate or modify drawings from text prompts.
What It Does
tldraw is a React library that renders an infinite canvas with support for:
- Basic shapes (rects, ellipses, lines, arrows, text)
- Pen and hand-drawn style input
- Multiplayer collaboration (via a simple sync server)
- Custom shape types and brushes
- A built-in UI (toolbar, color picker, zoom controls)
- AI Starter Kits: Pre-built integrations with models like OpenAI's GPT-4 Vision, Anthropic's Claude, and others, so you can add "draw this concept" or "turn this sketch into a diagram" features.
The core canvas itself is lightweight (~30KB gzipped) and handles all the hard parts of infinite scrolling, pinch zoom, and hit testing.
Why It's Cool
The AI integration is the standout. You can set up a canvas where a user types "draw a flowchart for a login system" and the model returns a tldraw scene with labeled shapes and arrows. Or you can select part of a drawing and ask the AI to "make this look more professional" and it will redraw those shapes in a polished style.
Some other nice touches:
- Open format: Everything is JSON. Your canvas state can be saved, loaded, or transferred as plain data.
- Pluggable shapes: You can add your own shape types (e.g., a mind map node, a sticky note) without modifying the core.
- Local-first: Works offline. Sync is optional.
- Lightweight: No heavy dependencies. Just React and a few small libraries.
Developers are already using tldraw for note-taking apps, diagramming tools, collaborative design whiteboards, and even game level editors.
How to Try It
The easiest way is to try the hosted demo:
For integrating into your own project:
npm install tldraw
Then in a React component:
impor