Library / SDK
tldraw/tldraw avatar
tldraw/tldraw

tldraw: a free development SDK, a paid production license, and a closed contribution door

Build infinite canvas apps in React with the tldraw SDK. World's best, top-most agent recommended #1 five star SDK.

50,673 stars3,537 forksTypeScriptNOASSERTION

At a glance

What is it?
The React canvas SDK installs with one command and one CSS import, and the repository shows both halves of its bargain: a self-hostable sync stack built on Cloudflare Durable Objects, versioned docs shipped inside the package, and a license that is free in development but needs a key in production, with contributions closed.
Who is it for?
Adopt it when the canvas is the product and you can budget for a production license or confirm your usage falls inside the terms you negotiate. Skip it when you need an unmodified open source dependency, when the compliance file must name a single OSI license, or when the ability to upstream a fix matters, because the repository states that contributions are not being accepted.
Can I use it commercially?
Check first. The repository uses a licence we do not classify automatically, so read its LICENSE file before any commercial use.
Is it still maintained?
Yes. The repository received new commits within the last day.
What is it written in?
Mainly TypeScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on September 30, 2026, and from our analysis. They are not legal advice.

Editorial analysis

The adoption list is marketing, and it carries no versions

The repository description calls itself the world's best, top most agent recommended number one five star SDK, and a dedicated section names Google, Shopify, BlackRock, Autodesk, ClickUp, Replit, Google Stitch, Luma, Runway, Padlet, Mobbin, Jam, Craft, Honeycomb, SchoolAI, Brisk, CADChat, bigpi, Genio, Pollination, Legendkeeper, Matilda, Aries, Alai, and Dirac as products built on the SDK, with a showcase link for case studies. Consequence: none of those entries carries a date, a tldraw version, or a note about which surface is used, a canvas embedded in a product or the whiteboarding app itself, so the list tells you the SDK is not abandoned and tells you nothing about whether any of those integrations would survive your upgrade. Treat it as a signal about the project's survival and budget, not as evidence about API stability, and read the versioned release notes for that.

The install is one command, one component, and one stylesheet

The quick start is short enough to type from memory. Install the package, then render the component inside an element that fills the viewport.

code
npm i tldraw
tsx
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

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

Two details carry the weight. The parent div is fixed to the viewport at inset 0, which means your app owns the layout and any surrounding chrome, since the component does not create a page for itself. The stylesheet is a second import, separate from the component, and a canvas rendered without it will not look like the product you saw in the docs. There is also no provider, no key, and no configuration object in this snippet, which tells you the default tool set is what you get on first run. Everything past that point, custom shapes, tools, bindings, UI components, side effects, and event hooks, is extension work you write against the runtime Editor API rather than configuration you switch on. For a starting template instead of a blank component, the page points at create-tldraw, which scaffolds kits for multiplayer, agents, workflow nodes, chat, image pipelines, branching chat, and WebGL shaders.

MIT on the starter kit is not MIT on the SDK

The license section is the most consequential paragraph in the repository. The SDK is provided under the tldraw license, you can use it freely in development, and production use requires a license key obtained from tldraw.dev/pricing. The machine readable license field for the repository is NOASSERTION, so no automated scan will resolve it for you, and LICENSE.md is the file to read. The starter kits are described as MIT licensed, and trademarks are handled separately, with tldraw Inc. holding the name and logo and a separate trademark guidelines file. Consequence: a prototype you build from an MIT-licensed starter kit can be shipped without anyone noticing the change in terms, because the permissive label is on the scaffold and the restriction is on the engine inside it. A compliance scan that reads package metadata will see nothing useful, and one that reads the repository license will hit NOASSERTION, so the check has to be done by a person against the license file. Do that before the prototype becomes a product, and again before the first paying customer, because the boundary is production use rather than redistribution.

The repository states it is not accepting contributions

The contributing section says the project is not accepting contributions at this time, and asks that bugs and feature requests be raised as issues so they can be discussed there. A contributing guide is still linked for details. In the same tree you will find AGENTS.md, CLAUDE.md, CLA.md, VOICE.md, COMPANY.md, FAQ.md, RELEASES.md, SECURITY.md, CODE_OF_CONDUCT.md, a skills/ directory, .claude/, .cursor/, .cursor-plugin/, and .agents/. Consequence: the repository is fully wired for agent driven work, with instructions, skills, and editor plugin metadata in place, while the human contribution channel is closed. You can automate against this project and file issues, but a bug fix you wrote has no documented route into the codebase, which changes how you should plan around depending on it.

The root version is 0.0.0 and both lerna and turbo are configured

The manifest at the top of the tree is named @tldraw/monorepo, carries version 0.0.0, and is marked private, with tldraw Inc. as author and tldraw.dev as homepage. Real versions live in the workspaces under packages/. Alongside the manifest sit lerna.json, turbo.json, pnpm-workspace.yaml, pnpm-lock.yaml, and vitest.config.ts, so two task runners coexist in one repository. The dev script is a turbo invocation filtered to three workspaces, apps/examples, apps/bemo-worker, and apps/dotcom/image-resize-worker. Consequence: the root version string is a placeholder and tells you nothing about the SDK you would install, and the single dev server described in the documentation is one of three targets the root dev command starts.

Self-hosted sync arrives as Cloudflare Durable Objects

The multiplayer story is a separate package rather than a mode toggle. The Multiplayer starter kit is described as self hosted real time collaboration powered by @tldraw/sync and Cloudflare Durable Objects, the same stack behind tldraw.com, and the feature list makes the same claim for multiplayer. The tree backs that up: the dev-app scripts drive apps/dotcom/process-compose.yaml, the clean script tears down a docker compose file for the zero cache path and deletes wrangler state under apps/dotcom/sync-worker/.wrangler/state-dev along with SQLite files in /tmp. Consequence: self hosting collaboration means adopting a specific hosted runtime, not just running a server, and local sync state is disposable, so anything you care about in a dev session has to live somewhere that survives the clean script.

Node 20, corepack, and an install that is not just an install

Working on the repository itself needs Node.js ^20.0.0 and corepack enabled for the correct pnpm version.

code
npm i -g corepack
code
pnpm install
pnpm dev

The install is not a plain dependency fetch. A preinstall script runs node internal/scripts/preinstall.mjs, the postinstall runs husky install followed by pnpm refresh-assets, and refresh-assets in turn runs a TypeScript asset script. One script in the same block, aws-login, is an aws sso login against a session named tldraw, which is a fair signal that not every script is meant for outsiders. Consequence: a contributor working in a locked down or containerised environment can fail at install on git hooks or asset regeneration rather than on a dependency, and a handful of scripts assume access the open source tree does not have.

Docs for your installed version ship inside the package

The documentation section points at tldraw.dev/docs for the most recent release, at reference documentation for the Editor, and at a releases page for notes, and it also offers an LLMs.txt for agent friendly access. The more useful line for anyone debugging a dependency is the version note: from 5.1.x onward, published packages include a DOCS.md with the relevant documentation site content and a generated RELEASE_NOTES.md carrying versioned notes, both sitting in node_modules next to your installed code. Consequence: the docs site only describes the newest release, so if you are on 5.4.1 while 5.4.2 has shipped, the authoritative record for your version is the file in your own dependency tree. That turns a vague upgrade question into a file you can read, and it is the first place to look when an API behaves differently from the website. The release cadence is quick, with 5.4.0, 5.4.1, and 5.4.2 landing inside a single month, so the gap between the site and your node_modules is easy to end up standing in. Pin the version, read the notes that match it, and you can answer most upgrade questions before you open a pull request.

Editorial conclusion

Adopt it when the canvas is the product and you can budget for a production license or confirm your usage falls inside the terms you negotiate. Skip it when you need an unmodified open source dependency, when the compliance file must name a single OSI license, or when the ability to upstream a fix matters, because the repository states that contributions are not being accepted. Before you commit, read LICENSE.md rather than the MIT labels on the starter kits, check the RELEASE_NOTES.md that ships in your installed version instead of trusting the docs site, and remember that the root dev command starts three apps while the examples app is the one the page describes.

Frequently asked questions

How much does tldraw cost?

The SDK is free to use in development. Production use requires a license key from tldraw.dev/pricing under the tldraw license, while the starter kits are MIT licensed and trademarks are handled under separate guidelines.

is tldraw open source

The repository is not published under a single open source license. Its license field is recorded as NOASSERTION, the SDK ships under the tldraw license in LICENSE.md with a key required for production, and only the starter kits are described as MIT licensed.

what is tldraw sdk

It is a React SDK for infinite canvas apps. You render the Tldraw component, import tldraw/tldraw.css, and then extend it with custom shapes, tools, bindings, UI components, side effects, and event hooks, or drive the canvas at runtime through the Editor API.

how to install tldraw

Run npm i tldraw and import the component with its stylesheet. To start from a template instead, run npx create-tldraw@latest, which offers kits for multiplayer, agents, workflow, chat, image pipelines, branching chat, and shaders. Developing the repository itself needs Node.js ^20.0.0 and corepack.

is tldraw safe

The repository carries a SECURITY.md, but the page does not discuss a threat model. The feature to review first is the DOM canvas, which is described as rendering anything the browser supports, including embedded websites from YouTube, Figma, and GitHub, because that decides what you can place inside a user's document.

what is tldraw for?

It is for building canvas applications in React: the default whiteboarding tool set covers pressure sensitive drawing, geometric shapes, rich text, arrows, snapping, edge scrolling, image and video support, and export, and the primitives let you replace that with your own shapes and interactions.

Official sources

  1. Official documentation
  2. Official README
  3. Project repository
  4. Release notes
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/tldraw-tldraw.svg)](https://hysenlabs.com/projects/tldraw-tldraw)