# tldraw — Infinite Canvas SDK for AI Applications

> Open-source infinite canvas library for building whiteboard, diagramming, and design applications. React component with real-time collaboration. Used by AI tools for visual generation. 40,000+ stars.

## Install

Save in your project root:

## Quick Use

```bash
npm install tldraw
```

```tsx
import { Tldraw } from "tldraw";
import "tldraw/tldraw.css";

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

A full whiteboard in 5 lines of React code.

---

## Intro

tldraw is an open-source infinite canvas library for building whiteboard, diagramming, and design applications with 40,000+ GitHub stars. Drop a React component into your app and get a full-featured drawing canvas with shapes, text, images, collaboration, and export. AI companies use tldraw for visual generation — draw a wireframe and have AI turn it into code, or generate diagrams from text descriptions. Best for developers building collaborative or visual AI applications. Works with: React, Next.js. Setup time: under 1 minute.

---

## Key Features

### Full Canvas in One Component
```tsx
<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

```typescript
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
```typescript
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.

---

## Source & Thanks

> Created by [tldraw](https://github.com/tldraw). Licensed under Apache 2.0.
>
> [tldraw](https://github.com/tldraw/tldraw) — stars 40,000+

Thanks for making the infinite canvas a React component.

---

<!-- ZH -->

## 快速使用

```bash
npm install tldraw
```

```tsx
import { Tldraw } from "tldraw";
export default function App() {
  return <div style={{ width: "100vw", height: "100vh" }}><Tldraw /></div>;
}
```

---

## 简介

tldraw 是一个开源无限画布 React 库，GitHub 40,000+ stars。一个组件实现完整白板功能。AI 工具用 tldraw 做线框图转代码和文本转图表。适合构建协作或视觉 AI 应用。

---

## 来源与感谢

> Created by [tldraw](https://github.com/tldraw). Licensed under Apache 2.0.
>
> [tldraw](https://github.com/tldraw/tldraw) — stars 40,000+

---
Source: https://tokrepo.com/en/workflows/abe1c221-d226-4a39-83c8-68ceda7885a0
Author: AI Open Source