Screenshots
The Story
tldraw is two things at once: a drawing application at tldraw.com and an SDK that other products use to add a canvas. The SDK is the more consequential half - it is a set of React components and a document model for building an infinite canvas into an application.
The document model is the part that distinguishes it from a plain canvas library. Shapes are records with types and properties, the store is a reactive document, and collaboration is expressed as changes to that document. That structure is what lets an application persist a drawing, sync it between clients, and extend it with custom shape types.
The editor is published as a package, and the hosted application at tldraw.com is a demonstration of what the SDK can build. For a product that needs a whiteboard, a design surface, or an annotation layer, the SDK is the reason to look at it.
Overview
tldraw treats a canvas as a document, not a bitmap.
Shapes are records with a type and a set of properties. The editor holds them in a reactive store, so a change to a shape is a change to the document and every view of that document updates.
That model is what makes persistence and collaboration tractable. A drawing can be serialized, stored, and synced as a set of records rather than as a rendered image, and two clients can reconcile changes to the same store.
Custom shape types extend the editor. A product that needs a domain-specific object - a chart node, a data record, an annotation - defines a shape type and renders it, and the editor's selection, transform, and history behavior apply to it.
Key Features
- Reactive document model
Shapes are records in a store, so a drawing can be persisted and synced rather than only rendered.
- Custom shape types
A product defines its own shape and the editor's selection, transform, and history apply to it.
- React SDK
The editor ships as a React package that mounts into an existing application.
- Open-source core
The source is published in a public repository with a license file.
Where tldraw is a strong choice, and where it is not
Choose tldraw if you are building a product that needs a canvas - a whiteboard, a design surface, an annotation layer - and you want a document model rather than a drawing primitive.
Look elsewhere if you only need a static diagram image, or if you want a finished whiteboard product and not a toolkit to build one.
Getting started
Drawing starts instantly; embedding the editor is where the work begins.
- ImmediateTime to first drawing
Open the site and draw. No account or install is required.
- FreeCost to start
The editor is free to use. A paid plan covers commercial embedding and collaboration.
- NothingPrerequisites
A browser. An npm install if you embed the editor in your own product.
Known limitations
Constraints confirmed from the project's documentation.
- Commercial embedding needs a licence. Using the SDK in a paid product requires a commercial agreement.
- Not a precision design tool. There is no layout grid or typography control.
- Collaboration runs through a hosted service. Real-time sync depends on the vendor's infrastructure.
- Large canvases degrade. A board with thousands of shapes gets slow, as with any browser-rendered scene.
Pick tldraw when you want a canvas inside your own product
The SDK is the product: a canvas that can be embedded and extended rather than only used on a hosted site.
The differentiator is the developer surface, which makes it a building block rather than an end-user app.
If you only need to sketch occasionally, a free whiteboard is enough and the licence question does not arise.
FAQ
What is tldraw?
tldraw is an infinite canvas SDK for building drawing and diagram features into an application, plus a hosted drawing app that demonstrates it.
Is tldraw open source?
Yes. The source is published in a public repository with a license file. Check the repository for current license terms.
Is tldraw free?
tldraw lists a free tier for the SDK alongside paid plans for commercial use and hosting. Check the pricing page for current terms.
Can I add custom shapes to tldraw?
Yes. A product defines a shape type and renders it, and the editor's selection, transform, and history behavior apply to it.
What stack is tldraw built with?
CompassPad records tldraw as a React and TypeScript library, based on the public repository.
What we checked
- LIVESite and primary link
The marketing site resolved and the primary product link reached the product itself.
- PRICINGPricing page
The pricing page resolved and lists the current plans and limits.
- DOCSDocumentation
Public documentation resolved and covers the product's core surfaces.
- SOURCESource page
The linked source page resolved and is reachable without an account.
Discussion
No comments yet. Be the first.
Join the conversation. Sign up to comment.
Sign up free
