Tldraw is a free, open-source TypeScript and React SDK for building infinite-canvas applications — the engine behind tldraw.com — aimed at developers who need whiteboarding, diagramming, or real-time canvas collaboration embedded inside their own product rather than hosted as a separate destination site.

What it is

Tldraw lives in the JavaScript and TypeScript ecosystem, ships as an npm package named tldraw, and renders inside React applications. It provides a feature-complete infinite canvas engine that developers extend with their own shapes, tools, bindings, and interface components. The project publishes an SDK plus a set of MIT-licensed starter kits, and it is distributed publicly through GitHub, where the repository carries the TypeScript language tag and sits in the Productivity and Utilities / Design and Visualization category. Documentation, examples, and starter kits are collected on tldraw.dev.

The concrete problem it solves is the cost of building a canvas from nothing. Drawing surfaces, hit testing, arrow routing, text layout, snapping, undo stacks, and multiplayer sync are individually difficult and collectively expensive, and most teams that need a whiteboard are not in the business of writing one. Tldraw replaces the bespoke canvas engine — and, for teams that would otherwise adopt a hosted whiteboard product as a destination site — with an embeddable component that runs inside the application the team already owns.

Key capabilities

• Self-hostable real-time collaboration through @tldraw/sync, so multiplayer sessions run on infrastructure the operator controls.
• Drawing and diagramming primitives: pressure-sensitive drawing, geometric shapes, rich text, arrows, snapping to shapes, edge scrolling, image and video support, and image export.
• A runtime Editor API that drives the canvas programmatically rather than only through user input.
• Fully extensible architecture: custom shapes, tools, bindings, UI components, side effects, and event hooks.
• AI integrations, exposing canvas primitives for building with LLMs.
• A DOM-based canvas that renders anything the browser renders, including embedded YouTube, Figma, and GitHub content.
• Broad device support across desktop, touch screens, tablets, and mobile browsers.

Who uses it and how

• Product teams embedding a collaborative board inside an existing application, where the canvas is a feature and not the whole product.
• Companies named in the project's own showcase, including Google, Shopify, BlackRock, Autodesk, ClickUp, Replit, Runway, Padlet, Craft, and Honeycomb, which have built canvas experiences on the SDK.
• Teams that want the tldraw.com multiplayer stack on their own hosting, since the Multiplayer starter kit pairs @tldraw/sync with Cloudflare Durable Objects.
• Builders of specialised canvases — the Agent, Workflow, Chat, Image pipeline, Branching chat, and Shader starter kits cover AI agents, node-based automation, annotated chat, image generation pipelines, and WebGL shaders respectively.
• Small teams prototyping first: each starter kit is MIT-licensed and can be run as a prototype, built on directly, or mined for reference code.

Getting started

Install the package with npm i tldraw, then render the Tldraw component in a React app alongside the tldraw/tldraw.css stylesheet. For a richer starting point, run npx create-tldraw@latest; local development of the repository itself serves the examples app at localhost:5420 and requires Node.js ^20.0.0 with corepack enabled for the project's yarn version.

How it compares

No competing registry entries or paid alternatives are named in the facts supplied here, so tldraw stands alone in this registry rather than being ranked against a peer set. The only comparison the source material supports is internal: the SDK is the library, tldraw.com is the product built on it, and the starter kits are the MIT-licensed sample applications layered on top.

When to use it — and when not to

A self-hoster takes on the canvas application, its React toolchain, and — for collaboration — the sync backend and whatever infrastructure @tldraw/sync is deployed against, along with Node.js ^20.0.0 and corepack for repository development. Teams that want a finished whiteboard with no code, or that are not building in React, should look elsewhere, because the SDK is a library rather than an end-user product. One caveat worth checking before committing: the repository metadata records the licence as NOASSERTION rather than a recognised identifier, so the main project terms should be confirmed from the repository itself even though the starter kits are stated as MIT-licensed.

npm i tldraw

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

export default function App() {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw />
		</div>
	)
}

npx create-tldraw@latest

npm i -g corepack

yarn
yarn dev