tldraw: Infinite Canvas SDK for React

What it is

tldraw is a software development kit (SDK) that provides developers with a fully-featured whiteboard and canvas component for React applications. It is designed for developers and businesses building applications that require interactive drawing, diagramming, or collaborative whiteboarding features, such as productivity tools, educational software, design apps, and knowledge management systems.

Main Features

Core Canvas Functionality

• High-performance canvas rendering in HTML and CSS
• Default tools for selection, drawing, and erasing
• Tools for creating geometric shapes and freehand drawing
• Support for embedded media, GIFs, videos, and websites
• Rich text editing capabilities

Development & Customization

• Built entirely in React, with each shape returning its own React component
• APIs for creating custom tools, interactions, and canvas elements
• Customizable user interface using included primitives
• Runtime API for programmatic control of the canvas

Collaboration & Data

• Built-in collaboration features including cursor chat and viewport following
• tldraw sync module for self-deployed, low-latency multiplayer collaboration
• APIs for connecting custom backend systems
• Systems for undo/redo, copy/paste, and persistence
• Image export functionality

AI Integration

• tldraw ai module for experimenting with language models
• Capabilities for creating prompts and interpreting canvas content
• APIs for driving the canvas with AI

How it works

Integrating into a React Application

Developers install the SDK via npm (npm install tldraw) and import the main Tldraw component and CSS. The canvas can then be rendered directly within their React application's JSX.

Building a Custom Whiteboard Feature

Teams use the SDK's APIs to extend and customize the base canvas. They can create custom tools and shapes specific to their application's domain, modify the user interface to match their product's design, and connect their own persistence or collaboration backend.

Implementing Multiplayer Collaboration

Developers can use the provided tldraw sync module to deploy a backend for real-time collaboration or use the collaboration APIs to integrate with their existing real-time infrastructure, enabling features like simultaneous editing and cursor sharing.

Key Points

• The SDK is feature-complete out of the box but designed for deep customization and extension.
• It is used by major companies across various industries, including Autodesk, ClickUp, and Padlet.
• The project is highly popular, with over 40,000 stars on GitHub.
• It includes built-in support for AI experimentation and integration.
• The default installation includes a made with tldraw watermark, which can be removed with a paid license.

Additional Details

Pricing and Licensing

• Free to use under the default license with a visible watermark.
• Commercial license for businesses: $6,000/year for teams under 10 people.
• Custom pricing available for larger companies requiring support and contract terms.
• License key provided to hide the watermark on authorized domains.

Technical Requirements

• Designed for React applications.
• Requires installation via npm.

Support and Community

• Documentation, examples, and quick start guides available on the website.
• Active community on Discord (8,000+ members), Twitter/X (66,000+ followers), and GitHub.
• Newsletter available for product updates and team insights.
• Direct support available via email (hello@tldraw.com).