Collaboration

The tldraw SDK supports real-time collaboration. Add collaboration to your project with our tldraw sync library, or use our low-level data APIs to integrate other backends.

Quick start

The fastest way to add multiplayer is with the useSyncDemo hook from @tldraw/sync. This connects to a hosted demo server that handles synchronization.

npm install @tldraw/sync

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

function MyApp() {
	const store = useSyncDemo({ roomId: 'my-unique-room-id' })
	return <Tldraw store={store} />
}

Any apps connecting to the same room ID will enter a shared collaboration session. Open your project in an incognito window or different browser to test it out.

The demo server is great for prototyping, but data only lasts 24 hours and rooms are publicly accessible. For production, you'll need to self-host the tldraw sync server—see our full guide on tldraw sync.

Using other backends

While tldraw sync is our recommended solution, the tldraw SDK works with any real-time data backend. For example, Liveblocks offers a tldraw integration, and many teams have connected tldraw to their own infrastructure.

Collaboration involves three concerns:

Synchronizing data — Getting document changes in and out of the store. See Persistence for the basics, or Collaboration for building custom sync.
User presence — Sharing cursor positions, selections, and viewports with other users. See Collaboration for presence APIs and Cursors for customizing how collaborator cursors appear.
Collaboration UI — The visual elements that show other users on the canvas. See UI components for overriding components like CollaboratorCursor, CollaboratorBrush, and SharePanel.

tldraw sync — Our recommended multiplayer solution
Collaboration — Deep dive on presence, sync hooks, and building custom sync
Cursors — Cursor types and collaborator cursor customization
User following — Track collaborator viewports in real-time
Store — Understanding the reactive store
UI components — Override collaboration UI components

Quick start

Using other backends

Related