tldraw: An Infinite Canvas SDK for React Applications

tldraw: An Infinite Canvas SDK for React Applications

Summary

tldraw is a powerful open-source SDK for building infinite canvas applications in React. It provides a feature-complete engine for whiteboarding, drawing, and diagramming, supporting real-time collaboration and extensive customization. Developers can leverage its rich API and starter kits to create highly interactive and extensible canvas experiences.

Repository Info

Updated on May 7, 2026
View on GitHub

Tags

canvasreactsdkwhiteboardmultiplayertypescriptfrontenddrawing

Click on any tag to explore related repositories

Introduction

tldraw is a robust SDK designed for creating infinite canvas applications within React. It offers a comprehensive engine for building whiteboards, drawing tools, and diagramming solutions, emphasizing extensibility and real-time collaboration. With tldraw, developers gain access to a powerful foundation for highly interactive web applications.

Installation

Getting started with tldraw is straightforward. You can install the package using npm:

npm i tldraw

Examples

Integrate tldraw into your React application with minimal effort. Here's a basic example:

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

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

For more advanced use cases and pre-built solutions, tldraw offers various starter kits. These kits provide custom shapes, tools, and UI components for common applications like multiplayer whiteboards, AI agents, and workflow builders. You can initialize a new project with a starter kit using:

npx create-tldraw@latest

Why Use tldraw?

tldraw stands out with its rich feature set and flexibility:

  • Multiplayer Capabilities: Easily integrate self-hostable real-time collaboration using @tldraw/sync, enabling shared canvas experiences.
  • Extensive Drawing and Diagramming Tools: Offers pressure-sensitive drawing, geometric shapes, rich text, arrows, snapping, image/video support, and image export.
  • Fully Extensible Architecture: Customize every aspect, including shapes, tools, bindings, and UI components, to fit specific application needs.
  • AI Integrations: Provides canvas primitives specifically designed for building applications with Large Language Models (LLMs).
  • Broad Device Support: Works seamlessly across various browsers, desktop, touch screens, tablets, and mobile devices.

Links