tldraw — Infinite Canvas SDK for AI Applications

What it is

tldraw is an open-source infinite canvas library for building whiteboard, diagramming, and design applications. It provides a React component with drawing tools, shape primitives, text, images, and real-time collaboration out of the box.

tldraw is used by AI tools for visual generation, letting users sketch interfaces or diagrams that AI can interpret and convert to code or structured data. The library has over 40,000 GitHub stars and is used in production by multiple companies.

How it saves time or tokens

Building a canvas editor from scratch requires handling pointer events, coordinate transforms, shape rendering, undo/redo, selection, snapping, and multi-user sync. tldraw provides all of this as a single React component. Drop it into your app and you have a working canvas editor.

For AI applications, tldraw's structured shape data means you can export a user's drawing as JSON and feed it to an LLM for interpretation, reducing the need for expensive vision model calls.

How to use

1. Install tldraw:

npm install tldraw

1. Add the canvas to your React app:

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

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

1. Customize tools, shapes, and UI using tldraw's extensibility API.

1. Export canvas state as JSON for processing by AI models or backend services.

Example

import { Tldraw, useEditor } from 'tldraw';

function ExportButton() {
  const editor = useEditor();
  const handleExport = () => {
    const shapes = editor.getCurrentPageShapes();
    console.log(JSON.stringify(shapes, null, 2));
  };
  return <button onClick={handleExport}>Export Shapes</button>;
}

function App() {
  return (
    <Tldraw>
      <ExportButton />
    </Tldraw>
  );
}

Related on TokRepo

• AI Tools for Design — AI-powered design and visual generation tools
• AI Tools for Coding — Tools that convert visual designs to code

Common pitfalls

• Not importing the CSS file. tldraw requires tldraw/tldraw.css for proper rendering. Without it, the canvas renders but tools and menus are unstyled.
• Treating tldraw as a vector graphics editor. It is a canvas SDK for building custom editors, not a replacement for Figma or Illustrator. Use the extensibility API to build the editor your users need.
• Ignoring performance with large shape counts. Canvases with thousands of shapes may need viewport culling and pagination strategies.
• Failing to review community discussions and changelogs before upgrading. Breaking changes in major versions can disrupt existing workflows. Pin versions in production and test upgrades in staging first.