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'
import 'tldraw/tldraw.css'

export default function App() {
	const store = useSyncDemo({ roomId: 'my-company-my-unique-room-id' })
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw store={store} />
		</div>
	)
}

Any apps connecting to the same room ID will enter a shared collaboration session. The room ID namespace is shared by everyone using the demo server, so prefix it with your company or project name. Open your project in an incognito window or different browser to test it out.

The demo server is great for prototyping, but data is deleted after about a day and rooms are publicly accessible. For production, you'll need to self-host the tldraw sync server. See our full guide on tldraw sync.

Comments

Collaborators can also leave anchored comments on the canvas. The @tldraw/commenting package provides a comment tool and pins that stick to points and shapes. Each pin opens a thread popover with replies, mentions, reactions, and resolving, and a sidebar lists every thread.

import {
	CanvasComments,
	CommentAuthor,
	commentToolOverrides,
	commentTools,
} from '@tldraw/commenting'
import { useSync } from '@tldraw/sync'
import { commentSchemaRecords, TLComponents, Tldraw } from 'tldraw'
import '@tldraw/commenting/commenting.css'

// Your app's user directory, however you already hold it.
const AUTHORS: Record<string, CommentAuthor> = {
	'user-123': { name: 'You', color: '#EC5E41' },
}

const components: TLComponents = {
	InFrontOfTheCanvas: () => (
		<CanvasComments currentUserId="user-123" resolveAuthor={(id) => AUTHORS[id]} />
	),
}

function MyApp() {
	const store = useSync({
		uri: 'wss://your-server.com/sync/my-room',
		assets: myAssetStore,
		records: commentSchemaRecords,
	})

	return (
		<Tldraw
			store={store}
			tools={commentTools}
			overrides={[commentToolOverrides]}
			components={components}
		/>
	)
}

Comment records are opt-in, so register commentSchemaRecords on your server's schema too, and list the comment record types in the room's objectTypes (see Comments and the object-store lane). Commenting is a licensed feature. See the commenting overview for an introduction, or the commenting reference for anchors, options, and server setup.

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.

A custom backend has to handle a few things. Document changes need to get in and out of the store; see Persistence for the basics and the collaboration deep dive for building custom sync. Presence (cursor positions, selections, viewports) is shared through presence records, covered in the same deep dive; Cursors explains how to customize collaborator cursors, and User following covers tracking another user's viewport.

The visual side is handled by the default UI. Override components like SharePanel through UI components. The OverlayUtil system renders collaborator cursors, brushes, scribbles, and selection indicators; see Overlay utils.