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:

https://www.tldraw.com

For integrating into your own project:

npm install tldraw

Then in a React component:

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

function App() {
  return <div style={{ width: '100vw', height: '100vh' }}>
    <Tldraw />
  </div>
}

To add AI, check the AI starter kits in the docs.

For multiplayer, spin up the sync server:

git clone https://github.com/tldraw/tldraw
cd tldraw/examples/multiplayer
npm install
npm run dev

Final Thoughts

tldraw hits a sweet spot. It's not trying to be Figma or Excalidraw. It's a solid, extensible canvas SDK that happens to come with AI magic baked in. If you need a blank canvas for users to draw on, or you want to experiment with AI-generated diagrams, this is probably the fastest way to get there.

The docs are clear, the API is clean, and the open source community is active. Worth bookmarking.

Follow us on X: @githubprojects