FAQ

The tldraw SDK is a set of components and modules that you can use to bring a canvas into any product. It is source available on GitHub. The SDK is commercially licensed.

tldraw is a London-based startup, founded in 2022 by Steve Ruiz, to develop the tldraw SDK.

Learn more on our company page, our social media, or browse our videos. See our side projects on our showcase page.

In development, yes. In production, mostly no. To use the SDK in production, you will need to have a free trial license, a commercial license, or a free hobby license. You do not need a license to use the SDK in development.

No, the tldraw SDK is commercially-licensed software. However, the SDK is source available: you can view the source code on GitHub.

Yes. See our showcase for examples of companies building with the tldraw SDK.

tldraw.com is our flagship demo of the tldraw SDK, designed to be a very good free whiteboard. We ship early versions of the SDK to tldraw.com for testing and evaluation.

We collect anonymous usage information in two ways: from requests for our static assets (such as our default fonts, icons and watermark), and from our hobby license watermark in production. If you self-host all static assets on a normal license then no external requests are made.

Nope! We map all relevant domains you plan to host the SDK on to a single license.

The best place for community support is either GitHub or Discord.

Custom support agreements are available as part of our business licenses. See the Pricing page for further details.

Follow our quick-start guide. You will learn about the SDK's components, how to access the Editor, and even set up collaboration with tldraw sync.

Prefer to dive into code? Visit the sandbox, try our starter kits, or run npm create tldraw@latest to browse templates.

tldraw's canvas is a React component that renders shapes with HTML and CSS. You can put any regular website content onto the canvas, including buttons, videos, even other tldraws.

You're free to combine technologies. The SDK uses canvas elements for indicators and its minimap. Our shader starter kit shows how to use a WebGL background. Get creative!

Yes. The SDK's main export is a regular React component. To render it in a different framework, you would use your framework's regular method of rendering React components. For example, in Vue you would use a Vue connector, as demonstrated in our Vue template. In Angular, you would use an Angular wrapper component.

Yes. The SDK works within mobile browsers but you can also embed the SDK in a WebView to use it within a native app. Multi-touch controls and stylus inputs are fully supported, and the UI adapts to vertical screen sizes. Here’s an example for adjusting the canvas to a mobile display.

You can post a Bug Report, Example Request or a Feature Request on this page.

You can request features through our GitHub or in our Discord.

We have a MCP app available for Claude desktop and web and for Cursor. Support for ChatGPT is coming soon. MCP apps are MCP servers with a sandboxed HTML component and are only available for certain agents.

We don’t yet have a broader MCP server for tools like Claude Code! If you’re interested in this, we would love to know what you plan on building with it, hop by our Discord and come chat!

Yes, we maintain an LLMs.txt file that contains links to all of our docs pages at tldraw.dev/llms.txt.

We also maintain markdown versions of our docs and examples, and everything combined.

Try adding one or more of these files to your AI assistant's context window for a better experience when developing with the tldraw SDK.

Yes, refer to the PDF Editor example to see one possible implementation.

To create a custom shape, define a custom shape util and pass it to the tldraw component. Find out how to do this by reading the Custom shapes section of our docs, or by exploring the custom shapes examples.

Anything that can run a browser will be able to run a tldraw canvas.

For improved performance, you can configure limits on number of shapes per page (with maxShapesPerPage) and number of users in a room if you want to impose different constraints. See our performance article for more suggestions.

For Version 2.x and above:
Migrating to tldraw 4.0 from version 3.x or 2.x will be straightforward as their underlying architectures are the same. If you're using tldraw as a drop-in whiteboard without much customisation, it is likely that you will not need to change anything. If you have made some customizations, you might find small API tweaks, or places where deprecated APIs have been removed. Details of those (and alternatives you can switch to) are documented in our release notes for each version.

tldraw has a built-in data migration system, so if you are using editor snapshots or tldraw sync, your data will automatically be migrated to the latest version the next time it's loaded. If you get stuck at any point, please reach out to our engineers on Discord.

For Version 1.x:
tldraw 2.0 and onwards is a complete rewrite from 1.0. It comes with greater customization, performance, and entirely new features and systems such as tldraw sync. For cases of light customization, migration should be fairly straightforward. For heavy customization, you'll need to adapt to modern versions of tldraw. The biggest challenge will be migrating data from the 1.0 format to 2.0. Reach out on Discord for help with that.

Yes, though we recommend using tldraw sync, which is purpose-built for canvas collaboration.

tldraw sync is our library for fast, fault-tolerant shared document syncing—it's battle-tested in production on tldraw.com and receives continuous updates.

You can get a prototype up and running fast with our multiplayer starter kit.

We opted to develop and maintain tldraw sync since yjs isn't designed for canvas data. If you prefer to use yjs, the SDK provides integration points to do so.

Yes. While tldraw doesn't currently provide a dedicated server-side rendering library, you can use headless browser automation tools like Playwright or Puppeteer to load tldraw in a browser and generate the images.

The tldraw SDK is built with low-level APIs to share and receive data about the document and users.

While you can use these APIs to integrate any collaboration backend with tldraw, our recommended solution is tldraw sync, a self-hosted solution that we use for collaboration on tldraw.com.

Yes, the tldraw component uses an offline store by default. Check out the Persistence docs page to learn how to save and load a board's contents entirely offline.

Yes. We have a guide on setting up a local development server here.

Yes. The easiest way to do this would be to use editor.getSnapshot() and store the result in an object store like S3. A good option is to use tldraw sync to write it to your object store.

We have a basic permissions system that allows switching a room to be either 'guests can read/write' or 'guests can read only' mode. We implement that by telling the room Durable Object about changes to the file database row. User permissions (e.g read/write) can be individually set when accepting socket connections.

The editor's state is managed by our custom signals library. To access values from the editor reactively, check out the signals example or read the reference pages.

Explore our Showcase page, check out the #show-and-tell channel on our Discord community, or follow us on X.

Find them on our Showcase page. We've released Teach, Make Real, Computer, and Fairies so far! Let us know what you think on our Discord.

We also provide some starter kits for building AI apps, such as the agent and branching chat starters.

Find the code for Make Real in its public repo, or fork and clone the make real starter. The repo has been archived since February 2026.

The code for Computer and Fairies is not publicly available, but you can build your own agentic workflow app using our workflow starter.

The code from Teach moved into our agent starter.

We took down Draw Fast but you can still run it locally by cloning its code from the public repo.