# Table of Contents
- [The infinite canvas SDK • tldraw](#the-infinite-canvas-sdk-tldraw)
- [Quick Start • tldraw Docs](#quick-start-tldraw-docs)
- [Releases • tldraw Docs](#releases-tldraw-docs)
- [Installation • tldraw Docs](#installation-tldraw-docs)
- [v3.7.0 • tldraw Docs](#v3-7-0-tldraw-docs)
- [v3.6.0 • tldraw Docs](#v3-6-0-tldraw-docs)
- [v3.5.0 • tldraw Docs](#v3-5-0-tldraw-docs)
- [v2.3.0 • tldraw Docs](#v2-3-0-tldraw-docs)
- [v2.1.0 • tldraw Docs](#v2-1-0-tldraw-docs)
- [v3.2.0 • tldraw Docs](#v3-2-0-tldraw-docs)
- [v3.4.0 • tldraw Docs](#v3-4-0-tldraw-docs)
- [v3.1.0 • tldraw Docs](#v3-1-0-tldraw-docs)
- [v3.3.0 • tldraw Docs](#v3-3-0-tldraw-docs)
- [v3.0.0 • tldraw Docs](#v3-0-0-tldraw-docs)
- [v2.2.0 • tldraw Docs](#v2-2-0-tldraw-docs)
- [v2.0.0 • tldraw Docs](#v2-0-0-tldraw-docs)
- [v2.4.0 • tldraw Docs](#v2-4-0-tldraw-docs)
- [Trademark Guidelines • tldraw](#trademark-guidelines-tldraw)
- [tldraw SDK License • tldraw](#tldraw-sdk-license-tldraw)
- [Contributor License Agreement • tldraw](#contributor-license-agreement-tldraw)
- [Introducing Signia • tldraw Blog](#introducing-signia-tldraw-blog)
- [Announcing tldraw's $2.7M seed • tldraw Blog](#announcing-tldraw-s-2-7m-seed-tldraw-blog)
- [make real, the story so far • tldraw Blog](#make-real-the-story-so-far-tldraw-blog)
- [Miro vs. tldraw • tldraw Blog](#miro-vs-tldraw-tldraw-blog)
- [Release Notes – April 14th 2023 • tldraw Blog](#release-notes-april-14th-2023-tldraw-blog)
- [Announcing tldraw sync • tldraw Blog](#announcing-tldraw-sync-tldraw-blog)
- [tldraw raised another $2M • tldraw Blog](#tldraw-raised-another-2m-tldraw-blog)
- [License updates for the tldraw SDK • tldraw Blog](#license-updates-for-the-tldraw-sdk-tldraw-blog)
- [Tldraw's upcoming re-launch • tldraw Blog](#tldraw-s-upcoming-re-launch-tldraw-blog)
- [Release Notes – April 18th 2024 • tldraw Blog](#release-notes-april-18th-2024-tldraw-blog)
- [Release Notes – April 28th 2023 • tldraw Blog](#release-notes-april-28th-2023-tldraw-blog)
- [Release Notes – February 17th 2023 • tldraw Blog](#release-notes-february-17th-2023-tldraw-blog)
- [Release Notes – February 10th 2023 • tldraw Blog](#release-notes-february-10th-2023-tldraw-blog)
- [What's new in tldraw • tldraw Blog](#what-s-new-in-tldraw-tldraw-blog)
- [Release Notes – February 23rd 2023 • tldraw Blog](#release-notes-february-23rd-2023-tldraw-blog)
- [Release Notes – February 3rd 2023 • tldraw Blog](#release-notes-february-3rd-2023-tldraw-blog)
- [Release Notes – January 13th 2023 • tldraw Blog](#release-notes-january-13th-2023-tldraw-blog)
- [Release Notes – February 8th 2024 • tldraw Blog](#release-notes-february-8th-2024-tldraw-blog)
- [Release Notes – June 30th 2023 • tldraw Blog](#release-notes-june-30th-2023-tldraw-blog)
- [Release Notes – January 20th 2023 • tldraw Blog](#release-notes-january-20th-2023-tldraw-blog)
- [Release Notes – January 18th 2024 • tldraw Blog](#release-notes-january-18th-2024-tldraw-blog)
- [Release Notes – January 27th 2023 • tldraw Blog](#release-notes-january-27th-2023-tldraw-blog)
- [Release Notes – June 20th 2024 • tldraw Blog](#release-notes-june-20th-2024-tldraw-blog)
- [Release Notes – March 10th 2023 • tldraw Blog](#release-notes-march-10th-2023-tldraw-blog)
- [Release Notes – March 17th 2023 • tldraw Blog](#release-notes-march-17th-2023-tldraw-blog)
- [Release Notes – March 14th 2024 • tldraw Blog](#release-notes-march-14th-2024-tldraw-blog)
- [Release Notes – March 31st 2023 • tldraw Blog](#release-notes-march-31st-2023-tldraw-blog)
- [Release Notes – June 9th 2023 • tldraw Blog](#release-notes-june-9th-2023-tldraw-blog)
- [Release Notes – March 2nd 2023 • tldraw Blog](#release-notes-march-2nd-2023-tldraw-blog)
- [Release Notes – March 24th 2023 • tldraw Blog](#release-notes-march-24th-2023-tldraw-blog)
- [Release Notes – May 19th 2023 • tldraw Blog](#release-notes-may-19th-2023-tldraw-blog)
- [Editor • tldraw Docs](#editor-tldraw-docs)
- [Tools • tldraw Docs](#tools-tldraw-docs)
- [User interface • tldraw Docs](#user-interface-tldraw-docs)
- [Release Notes – May 2nd 2024 • tldraw Blog](#release-notes-may-2nd-2024-tldraw-blog)
- [Release Notes – May 26th 2023 • tldraw Blog](#release-notes-may-26th-2023-tldraw-blog)
- [Shapes • tldraw Docs](#shapes-tldraw-docs)
- [Assets • tldraw Docs](#assets-tldraw-docs)
- [Persistence • tldraw Docs](#persistence-tldraw-docs)
- [License • tldraw Docs](#license-tldraw-docs)
- [Contributing • tldraw Docs](#contributing-tldraw-docs)
- [Collaboration • tldraw Docs](#collaboration-tldraw-docs)
- [Translations • tldraw Docs](#translations-tldraw-docs)
---
# The infinite canvas SDK • tldraw
We made a cool thing with Google DeepMind. [Read the blog post](https://ai.google.dev/showcase/tldraw)
The infinite canvas SDKinfinite canvas SDK
for React developers
=================================================================
The infinite canvas SDKinfinite canvas SDK for React developers
===============================================================
Use the **tldraw SDK** to add a collaborative whiteboard to your product or create new canvas-based experiences with the SDK's components, APIs, and services.
[Get started](/quick-start)
[GitHub](https://github.com/tldraw/tldraw)
Try it
[Try the full demo at tldraw.com](https://tldraw.com)
[](https://www.autodesk.com/products/forma "Autodesk")
[](https://clickup.com/ "ClickUp")
[](https://www.craft.do/ "Craft")
[](https://jam.dev/ "Jam.dev")
[](https://www.axa.com/ "Axa")
[](https://glean.co/ "Glean")
[](https://ro.am/ "Roam")
[](https://padlet.com/ "Padlet")
[](https://bigbluebutton.org/ "Big Blue Button")
The best product teams build their canvas with tldraw.
------------------------------------------------------
[](https://www.autodesk.com/products/forma "Autodesk")
[](https://clickup.com/ "ClickUp")
[](https://www.craft.do/ "Craft")
[](https://jam.dev/ "Jam.dev")
[](https://www.axa.com/ "Axa")
[](https://glean.co/ "Glean")
[](https://ro.am/ "Roam")
[](https://padlet.com/ "Padlet")
[](https://bigbluebutton.org/ "Big Blue Button")
The best product teams trust their canvas with tldraw.
------------------------------------------------------
features
Made for developers
-------------------
We've designed the tldraw SDK to be a solid foundation for developers: built for the web, packed with table-stakes features, and designed for extensibility.
### React canvas
The tldraw canvas and everything on it is its own React component, rendered in regular HTML and CSS. If you can do it on the web, you can now do it on the canvas too.
### High performance
Create, edit, and manipulate thousands of objects, including images, interactive components, and embedded content. Highly optimized for performance on desktop, tablets, and mobile devices.
### Real-time collaboration
Go live with [tldraw sync](/docs/sync)
or bring your own backend for shared experiences. Built-in support for collaborative editing, live cursors, viewport following and cursor chat.
### Media and more
Drop in images, videos, and even other websites to add them to the canvas. Paste URLs to create interactive bookmarks. Export images and data.
### Customization
Create your own custom elements, tools, interactions, and user interface. Use the runtime [Editor API](/docs/editor)
to control the canvas.
details
Beautiful software
------------------
Thousands of carefully considered details that turn canvas conventions into best-in-class user experience.
### Perfect ink
Create beautiful, pressure-sensitive freehand lines with the pen tool, powered by our custom algorithm for virtual ink.
### Perfect arrows
Linking lines never looked so good. Create beautiful arrows between shapes, notes, and more.
### Dark mode
Switch between full light and dark mode themes that affect menus, shapes, and even image exports.
### Just works
High performance in all modern browsers. Consistent quality across desktop, tablet, and mobile devices.
code
Installation
------------
Install the tldraw package, import the styles, and render the component in your React app.
Terminal
npm install tldraw
App.jsx
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export function App() {
return
}
[Browse examples](/examples)
[Read the quick start guide](/quick-start)
License
Free with Watermark
-------------------
You can use the tldraw SDK for free in your project—even in a commercial project—as long as the "Made with tldraw" watermark is present. See [our standard license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md)
to learn more.
Pricing
Purchase a License
------------------
Remove the watermark and access additional support.
### Startup Lite
$500/month
Annual agreement
[Get started](/buy/startup-lite)
For small teams getting started.
* Up to 10 employees
* * *
* No watermark
### Startup
$1,000/month
Annual agreement
[Get started](/buy/startup)
For small teams who need to speak to us.
* Up to 10 employees
* * *
* No watermark
* Two hours of support per month
### Business
Custom
Value based pricing available
[Contact us](/buy/business)
For larger teams and enterprises.
* No limit on team size
* * *
* No watermark
* Premium support
* Custom agreements
* Dedicated account manager
Community
Friends of the draw
-------------------
36,000 [GitHub stars](https://github.com/tldraw)
. 62,000 followers on [Twitter/X](https://x.com/tldraw)
. Join the 7,500 strong community on [Discord](https://discord.com/invite/SBBEVCA4PG)
.
* [Twitter](https://x.com/tldraw/)
* [Discord](https://discord.com/invite/SBBEVCA4PG)
* [GitHub](https://github.com/tldraw/tldraw)
FAQ
Frequently Asked Questions
--------------------------
Have more questions? [Contact us](mailto:hello@tldraw.com)
and we’ll respond as quickly as possible.
Is the tldraw SDK open source?
How can I get help and support with the SDK?
Where can I find examples of apps built with the tldraw SDK?
How do I request a feature for tldraw?
Can I use tldraw in a commercial application?
How do I get rid of the watermark?
Does the SDK collect diagnostics?
Can I use tldraw in frameworks other than React?
Where can I find the AI stuff?
to action
Get started today
-----------------
Follow our quick start guide and build something today with the tldraw SDK.
[Read the docs](/quick-start)
[Try the app](https://tldraw.com)
### Subscribe to our Newsletter
Team news, product updates and deep dives from the team.
Email-Address
Subscribe
Join 1,000+ subscribers
---
# Quick Start • tldraw Docs
Search docs…
⌘K
Menu
Search docs…
⌘K
Quick Start
===========
Have five minutes? Let's try out the tldraw SDK in a React project. If you're new to React, we recommend using a [Vite template](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
as a starter. We'll assume your project is already running locally.
Prefer to jump straight to some code? Try this [CodeSandbox](https://codesandbox.io/p/sandbox/tldraw-demo-76t444?file=%2Fsrc%2FApp.tsx%3A14%2C2)
.
Getting started
---------------
First, install the `tldraw` package from NPM:
npm install tldraw
Next, in you React project, import the `Tldraw` component and tldraw's CSS styles. Then render the `Tldraw` component inside a full screen container:
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function App() {
return (
)
}
That's pretty much it! At this point, you should have a complete working single-user canvas. You can draw and write on the canvas, add images and video, zoom and pan, copy and paste, undo and redo, and do just about everything else you'd expect to do on a canvas.
You'll be starting from our default [shapes](/docs/shapes)
, [tools](/docs/tools)
, and [user interface](/docs/user-interface)
, but you can customize all of these things for your project if you wish. For now, let's show off a few more features.
Local persistence
-----------------
Let's add local persistence by passing a `persistenceKey` prop to the `Tldraw` component:
export default function App() {
return (
)
}
Using a `persistenceKey` will use your browser's storage to ensure that your project can survive a browser refresh. It will also synchronize the project between other instances that share the same `persistenceKey`—including in other browser tabs! Give it a try by opening your app in a second window.
Real-time collaboration
-----------------------
To add support for multiple users collaborating in realtime, you can use the [**tldraw sync**](/docs/sync)
demo library. This library is a simple way to try out real-time collaboration in tldraw using temporary projects called rooms.
First, install the `@tldraw/sync` package:
npm install @tldraw/sync
Next, import the `useSyncDemo` hook from the `@tldraw/sync` package. Call it in your component with a unique ID and pass the store that it returns to the `Tldraw` component:
import { Tldraw } from 'tldraw'
import { useSyncDemo } from '@tldraw/sync'
import 'tldraw/tldraw.css'
export default function App() {
const store = useSyncDemo({ roomId: 'myapp-abc123' })
return (
)
}
Try it out by opening your project in a second incognito window, or else access it from another device. You should see all of tldraw's multiplayer features: live cursors, user names, viewport following, cursor chat, and more.
If you want to go further with real-time collaboration, be sure to check out our guide to the [**tldraw sync**](/docs/sync)
library.
Controlling the canvas
----------------------
One of the best parts of tldraw is its [editor](/docs/editor)
's runtime JavaScript API. Almost everything that can happen in tldraw can be done programmatically through the [`Editor`](/reference/editor/Editor)
instance.
For simplicity's sake, let's roll back our persistence and sync code. We can then use the `Tldraw` component's `onMount` callback to get access to the [`Editor`](/reference/editor/Editor)
instance. We'll use the editor to create a new shape on the canvas, select it, then slowly zoom to it.
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function App() {
const handleMount = (editor) => {
editor.createShape({
type: 'text',
x: 200,
y: 200,
props: {
text: 'Hello world!',
},
})
editor.selectAll()
editor.zoomToSelection({
animation: { duration: 5000 },
})
}
return (
)
}
The [`Editor`](/reference/editor/Editor)
is tldraw's huge god object for controlling the canvas. Be sure to check out the [`Editor`](/reference/editor/Editor)
API documentation for more information on what you can do with it, as well as our guide on using the [editor](/docs/editor)
.
Next Steps
----------
Now that you've seen how the tldraw canvas works, you can:
* Create your own [shapes](/docs/shapes)
and [tools](/docs/tools)
* Customize the [user interface](/docs/user-interface)
* Learn more about the [editor](/docs/editor)
You can do a lot with the tldraw SDK. In addition to our long-form docs, we have dozens of examples in our [examples section](/examples)
that cover more of its functionality. You can run these locally with the tldraw [GitHub repository](https://github.com/tldraw/tldraw)
.
Remember: if you build something incredible, please share it with us in our [#show-and-tell](https://discord.com/invite/SBBEVCA4PG)
channel on Discord. Good luck!
[Next\
\
Installation](/installation)
---
# Releases • tldraw Docs
Search docs…
⌘K
Menu
Search docs…
⌘K
Releases
========
How tldraw is versioned
-----------------------
Unlike many JavaScript packages distributed on [NPM](https://www.npmjs.com/)
, the tldraw SDK does not follow [semantic versioning](https://semver.org/)
in its release versions. Here's what we do instead:
* Major version bumps are very rare and we reserve them for special changes that signify a paradigm shift of some kind.
* Minor version bumps are released on a regular cadence - approximately monthly. **They may contain breaking changes**. We aim to make breaking changes as minimally disruptive as possible, but tldraw is actively evolving as we add new features. We recommend updating tldraw at a similar pace to our release cadence, and be sure to check the release notes.
* Patch version bumps are for bugfixes and hotfixes that can't wait for the next cadence release.
Current release: [v3.7.0](/releases/v3.7.0)
--------------------------------------------
Welcome to the 3.7.0 release of tldraw. This month's SDK release includes several bug fixes and perf improvements.
#### Improvements
* Add ability to customise what presence data is synced between clients, or disable presence syncing entirely. [#5071](https://github.com/tldraw/tldraw/pull/5071)
#### API changes
* Support expanding the selection outline by different amounts on each side by returning a `Box` from `expandSelectionOutlinePx`. [#5168](https://github.com/tldraw/tldraw/pull/5168)
* Updating shape props to undefined when using editor.updateShape [#5029](https://github.com/tldraw/tldraw/pull/5029)
#### Bug fix
* Fixed a bug during development with React Strict Mode enabled where `store.listen` might end up not calling the listener. [#5133](https://github.com/tldraw/tldraw/pull/5133)
* Restrict Github Gists to a more strict URL format. [#5170](https://github.com/tldraw/tldraw/pull/5170)
* Fixes bugs with Github Gist and Val Town; adds support for pasting `