Announcing tldraw sync

A new real-time collaboration engine for the tldraw SDK, available now. Build multi-player whiteboards in minutes with our demo server or go to production with a self-hosted backend.

Hey, this is Steve Ruiz from tldraw with an update about the tldraw SDK, our TypeScript library for building whiteboards and other infinite canvas experiences on the web.

Today we’re announcing the release of tldraw sync, our new real-time collaboration product designed specifically for the tldraw SDK. If you’re a developer building with the SDK, then tldraw sync provides a perfect way to synchronize a canvas between multiple users.

We originally built tldraw sync for tldraw.com, our flagship whiteboard product, after struggling to find an existing solution that could keep up with the canvas. Since then, the engine has powered collaboration for more than 400,000 users across 200,000 shared projects. Now, after months of iteration and improvement, we’re excited to share tldraw sync with our developer community as the SDK’s first add-on module.

• Try a live demo on Codesandbox

• Read the tldraw sync docs

• Learn more about the tldraw SDK

How it works

We’ve designed tldraw sync to be self-hosted.

To use tldraw sync in production, first deploy the sync server on your backend of choice, configure it to work with your storage solution, and then connect to the server from your client application.

• We recommend starting from our Cloudflare template

• For Node or Bun runtimes, check out our generic server template

While we don’t offer a hosted version of tldraw sync for production, we do host a demo server that you can connect to immediately from any tldraw project. It’s our recommended way to explore collaboration in tldraw, develop your own multi-user features, and compare tldraw sync with alternative backends.

Demo server demo

Let’s use the tldraw sync demo server in a React app. Feel like watching a video instead? Click here. Want to try it live? Check out the CodeSandbox!

Imagine you have a React project that is already using the tldraw SDK.

import { Tldraw } from 'tldraw'

function MyApp() {
  return <Tldraw />
}

To make this project collaborative, first install the @tldraw/sync library:

npm install tldraw @tldraw/sync

Next, import the useSyncDemo hook from @tldraw/sync, then call it with a unique roomId, and finally pass the store that it returns to the Tldraw component.

import { Tldraw } from 'tldraw'
import { useSyncDemo } from '@tldraw/sync'

function MyApp() {
  const store = useSyncDemo({ roomId: 'MY_ROOM_ID' })
  return <Tldraw store={store} />
}

Your tldraw canvas is now connected to any other instance using the same roomId.

If you’re running your code locally, you can open an incognito window to test. If your project is online (such as with our CodeSandbox example), you can send the URL to a friend to collaborate instantly.

The demo server supports the full range of tldraw’s built-in collaboration features, including live cursors, user names, viewport following, and cursor chat. It also supports static assets like bookmarks, videos, and images, which can be dropped or pasted onto the canvas. All data on our demo server is wiped after 24 hours.

What’s special?

tldraw sync is fast, easy, and stable. We maintain it as a first-party module in the tldraw SDK. It’s built specifically for tldraw’s canvas and is designed to work alongside existing data layers. If you already have a license for tldraw, then tldraw sync is included at no additional charge.

Fast

Speed is critical to real-time collaboration on a canvas. When designing tldraw sync as the backend for tldraw.com, we wanted a solution that would match the speed of our high-performance canvas. In practice, this meant sending the minimal number of essential updates as quickly as possible, resolving conflicts with minimal overhead, and working closely with the client to avoid duplication.

The result is a system that can send and receive updates extremely quickly and cheaply among dozens of collaborators. When paired with edge compute technology like Cloudflare Workers, it’s also a system that can scale easily while providing ultra-low latency updates to any number of concurrent projects.

Easy

While speed is critical, we also wanted tldraw sync to be easy to adopt. After more than a year of helping developers through integrations with other collaborative backends, we had a good sense for the pain points. We designed tldraw sync to be as close to a “drop in” solution as we could, working seamlessly with existing projects and addressing numerous complex issues, such as migrations and version skew, which are best handled from within the SDK.

First-party

And because we rely on tldraw sync ourselves for tldraw.com, you can count on its production-worthiness, stability, and continued maintenance as a critical member of the tldraw SDK. As with the rest of the SDK, we stage updates first on tldraw.com and only release to downstream users once we’re confident in our changes.

Made (just) for tldraw

It’s important that tldraw sync is not a general purpose real-time data solution. For application developers, we expect tldraw sync to work alongside your existing data layers, providing a high-performance experience optimized for the canvas that shares information with other systems. For example, if you are using a real-time database like Supabase Realtime to manage live updates to a workspace, you might use tldraw sync to handle canvas collaboration while periodically saving snapshots to your primary database.

License and pricing

tldraw sync is covered by the tldraw SDK’s existing license. If you are using the tldraw SDK in a non-commercial context, such as a personal project or in education, then you are free to use tldraw sync alongside the rest of the SDK. If you have purchased a commercial license, then you can begin using tldraw sync under your existing license at no additional charge.

Continued support for other backends

While we are confident that tldraw sync is the best solution for managing real-time collaboration with the tldraw SDK, we’re also committed to supporting other real-time solutions. Our tldraw sync engine uses the same public APIs that you can use instead to connect other backends like Yjs, Replicache, Liveblocks, or your own custom-built solution.

And more

Our aim with the tldraw SDK is to lower the barrier to entry for teams working with whiteboards and other canvas-style apps. With tldraw sync, we hope to make canvas collaboration easier, too. Going forward, you can expect more add-on modules that build on the SDK’s foundation and that fill in the patterns and conventions in this exciting space.

Give tldraw sync a try and let us know what you think. If you’d like to learn more, connect with tldraw on Discord, follow us on X, or reach out at hello@tldraw.com.