tldraw: Build Infinite Canvas Apps in React

Overview

tldraw is a React SDK for building infinite-canvas applications, from whiteboards and diagramming tools to custom visual interfaces. It combines a ready-to-use canvas and editor API with primitives for creating custom shapes, tools, bindings, and UI, so developers can adapt the experience instead of building canvas infrastructure from scratch.

It is a good fit when a product needs interactive visual workspaces, particularly when users need to draw, arrange content, or collaborate. The SDK also supports AI-driven canvas interactions and browser-rendered embeds. Production use requires a license key, so check the licensing details before choosing it for a commercial product.

Key Features

• React canvas component with an Editor API for controlling the canvas at runtime.
• Drawing and diagramming primitives, including pressure-sensitive drawing, shapes, rich text, arrows, snapping, images, and video.
• Extension points for custom shapes, tools, bindings, UI components, side effects, and event hooks.
• Optional real-time multiplayer collaboration through @tldraw/sync.
• Browser-based rendering that can support embedded websites and other browser content.
• Canvas primitives for applications that use LLMs to interpret or modify canvas content.
• Support for desktop, touch screens, tablets, and mobile browsers.

Use Cases

• Product teams building a collaborative whiteboard can start with the supplied drawing tools and add multiplayer with @tldraw/sync.
• Developers creating workflow or visual programming products can build custom node shapes, interactions, and bindings on the canvas.
• Teams building design or diagramming software can combine rich text, arrows, snapping, and custom tools in a tailored editor.
• Developers adding visual interfaces to AI products can use the canvas primitives to let agents read and modify visual content.

Getting Started

Install the package:

npm i tldraw

Then add the Tldraw component and import tldraw/tldraw.css in your React app. See the README and quick-start guide for setup details.

Considerations

• Production use requires a tldraw license key; development use is available without one. Review the pricing and license information before adopting it.
• The SDK is a substantial toolkit for developers building a canvas product, rather than just a standalone whiteboard application.
• Local development requires Node.js ^20.0.0 and pnpm, according to the README.
• The project says it is not accepting contributions at this time. Bug reports and feature requests can be submitted through GitHub issues.