tldraw — Infinite Canvas SDK for AI Applications

Key Features

Full Canvas in One Component

<Tldraw />

Includes: freehand drawing, shapes, text, images, arrows, frames, sticky notes, embed, and more.

AI Integration Patterns

Draw-to-Code:

1. User draws a wireframe on tldraw canvas
2. Export as SVG/PNG
3. Send to Claude/GPT-4 Vision
4. AI generates React code from the drawing

Text-to-Diagram:

1. User describes: "API gateway connecting to 3 microservices"
2. AI generates tldraw JSON
3. Diagram appears on canvas

SDK for Custom Apps

import { createTLStore, defaultShapeUtils } from "tldraw";

const store = createTLStore({ shapeUtils: defaultShapeUtils });

// Programmatically add shapes
store.createShapes([
  {
    type: "geo",
    x: 100, y: 100,
    props: { geo: "rectangle", w: 200, h: 100, text: "API Gateway" },
  },
]);

Real-Time Collaboration

import { Tldraw, useSync } from "tldraw";

function CollabCanvas() {
  const store = useSync({ uri: "wss://your-server.com/room/123" });
  return <Tldraw store={store} />;
}

Export Options

• SVG (vector, scalable)
• PNG (raster, screenshots)
• JSON (tldraw format, re-editable)
• Clipboard (paste into other tools)

Used By

• Vercel (internal tools)
• Cal.com (scheduling diagrams)
• AI wireframe tools
• Notion-like apps with drawing features

Key Stats

• 40,000+ GitHub stars
• React component library
• Real-time collaboration
• AI draw-to-code pattern
• SVG/PNG/JSON export

FAQ

Q: What is tldraw? A: An open-source infinite canvas React library for building whiteboard and diagramming applications, used by AI tools for visual generation.

Q: Is tldraw free? A: Yes, open-source under Apache 2.0 for the SDK. tldraw.com (hosted) has free and paid tiers.

Q: Can AI generate tldraw content? A: Yes, AI can generate tldraw JSON shapes programmatically, and tldraw canvas exports can be sent to vision models for analysis.