tldraw

Summary

tldraw is a powerful SDK that provides a complete canvas experience as a React component, allowing developers to customize and build collaborative applications with advanced features.

Type

AI Designers / UIs

URL

https://tldraw.dev/

Our canvas. Your code.

The tldraw SDK provides a complete canvas experience as a React component. Extend, customize, and develop on top.

npm install tldraw

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

export function App() {
  return <Tldraw />
}

Browse examples Open Sandbox

Made with tldraw

The tldraw SDK is used in world-class applications across productivity, education, design, and more.

ClickUp rebuilt their Whiteboard feature. Read the case study.

Autodesk built a board for Forma, the architectural design app.

Padlet built their Sandbox experience for teachers and students. Read the case study.

Jam upgraded their screenshot annotation feature. Read the case study.

Mobbin created internal tools for managing content and training models. Read the case study.

Ro.am shipped a whiteboard for their virtual office.

LegendKeeper built a boards feature for their world-building wiki.

BigBlueButton rebuilt their virtual classroom on tldraw.

Matilda unified their app experience with tldraw.

Opennote added a whiteboard as input to their AI assistant.

Graze created a drag and drop feed designer for Bluesky.

Sublime added a board view to their knowledge management app.

What's inside

Have an idea that uses a canvas? Build it with tldraw.

We bring the canvas, you build the product.

With the tldraw SDK, you get a unified system that includes a high-performance canvas and a runtime API to control it. The canvas itself renders fast in HTML and CSS. It is built entirely in React, with each shape returning its own React component.

A modern canvas written in React. Supports media, interactive content, and even embedded websites.

Feature complete

The SDK comes feature complete with default tools for selection, drawing, erasing, creating geometric shapes, and perfect freehand drawing. It offers dozens of tightly integrated systems for layout, drag and drop, undo and redo, copy and paste, persistence, migration, embedded content, gifs, videos, rich text, image export, cross-tab synchronization, and more.

All of the features and systems you expect from a canvas. Obsessively polished.

Made for developers

Keep what you need, discard the rest, and build your own. The tldraw SDK is built from the start for customization and extension. Use our APIs to create your own tools, interactions, and canvas elements. Change the user interface using our included primitives or build a new one.

Deep customization across the user interface, available elements, and canvas design.

Collaboration

Looking for collaboration? The SDK has you covered. With the tldraw sync module, you can self-deploy a backend and connect for low-latency, highly optimized multiplayer collaboration. Connect your own backend with our collaboration APIs.

The tldraw SDK has built-in collaboration features like cursor chat and viewport following.

Ready for AI

Experimenting with AI? Try the tldraw ai module. Create prompts, interpret content, and drive the canvas with language models. See our experiments: Make Real, Teach, and tldraw computer.

Teach uses an LLM to drive tldraw's runtime API, creating and editing shapes on the canvas.

License & Pricing

Build for free with our watermark. Startup pricing available.

Do I need to buy a license?

You can evaluate the tldraw SDK under its default license, which requires that the "made with tldraw" watermark is present on the canvas at all times. The watermark captures anonymous data about where it is used.

If you are a business using the tldraw SDK in production, you should purchase a license. To use the SDK without the watermark you must purchase a license.

How much does a license cost?

Individuals and teams of less than ten people can purchase a license for $6,000 per year. Larger companies or teams that need support from tldraw can design a package with custom pricing, support, and contract terms.

All customers receive a license key that will hide the "made with tldraw" watermark on your domains. See our FAQ for more information.