README

Build infinite canvas apps in React with the tldraw SDK.



  Docs · Examples · Starter kits


 Feature highlights

tldraw provides a feature-complete infinite canvas engine designed to be the foundation for any canvas app. Create custom shapes, tools, bindings and UI components for a custom experience. Use the default whiteboarding tool set or use the library's primitives to build entirely new shapes and interactions.

- Multiplayer — self-hostable real-time collaboration with @tldraw/sync
- Drawing and diagramming — pressure-sensitive drawing, geometric shapes, rich text, arrows, snapping to shapes, edge scrolling, image and video support, image export
- Runtime API - drive the canvas at runtime with the Editor API
- Fully extensible — custom shapes, tools, bindings, UI components, side effects, and event hooks
- AI integrations — canvas primitives for building with LLMs
- DOM canvas — web rendering supports anything the browser supports, including embedded websites from YouTube, Figma, GitHub, and more
- Broad support — works in any browser across desktop, touch screens, tablets, and mobile devices

 Who's using tldraw

The tldraw SDK powers canvas experiences in products from Google, Shopify, BlackRock, Autodesk, ClickUp, Replit, Google Stitch, Luma, Runway, Padlet, Mobbin, Jam, Craft, Honeycomb, SchoolAI, Brisk, CADChat, bigpi, Genio, Pollination, Legendkeeper, Matilda, Aries, Alai, Dirac, and many more.

See our showcase for case studies on how teams build with tldraw.

 Quick start

Install the tldraw package:

bash
npm i tldraw


Then, use the  component in your React app:

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

export default function App() {
	return (
		
			
		
	)
}


 Starter kits

Starter kits provide the custom shapes, tools, and user interface needed for common applications. Each kit is MIT-licensed. Hack together a prototype, build out an app on top, or reference the code in a larger project.

Start building with:

bash
npx create-tldraw@latest


- Multiplayer — self-hosted real-time collaboration powered by @tldraw/sync and Cloudflare Durable Objects, the same stack behind tldraw.com
- Agent — AI agents that read, interpret, and modify canvas content
- Workflow — drag-and-drop node builder for automation pipelines, visual programming, and no-code platforms
- Chat — canvas-powered AI chat where users sketch, annotate, and mark up images alongside conversations
- Image pipeline — node-based builder for image generation pipelines
- Branching chat — AI chat with visual branching, letting users explore and compare different conversation paths
- Shader — WebGL shaders that respond to canvas interactions

 Local development

The development server runs the examples app at localhost:5420. You'll need Node.js ^20.0.0. Clone the repo, then enable corepack for the correct pnpm version:

bash
npm i -g corepack


Install dependencies and start the dev server:

bash
pnpm install
pnpm dev


 Documentation

Documentation 

Top issues

Latest release

This release introduces ICU MessageFormat and react-intl for translations, action-driven menu gating, and a ThrottledFunction type in @tldraw/utils. It also improves commenting, canvas navigation, and the select tool, and includes a broad set of bug fixes across selection, undo/redo, local persistence, sync, and the store.

 What's new

 ICU MessageFormat and react-intl for translations (8036)

The SDK's UI strings now use ICU MessageFormat, allowing messages to support pluralization, selections, and values interpolation cleanly across languages. We've also added react-intl authoring on top: d