Multiplayer sync

Connect to a shared room with useSyncDemo for instant multiplayer.

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

export default function SyncDemoExample({ roomId }: { roomId: string }) {
	const store = useSyncDemo({ roomId })
	return (
		<div className="tldraw__editor">
			<Tldraw store={store} options={{ deepLinks: true }} />
		</div>
	)
}

useSyncDemo returns a store connected to a demo sync backend that tldraw hosts, so you can prototype multiplayer without running a server. Pass the store to <Tldraw> and every client with the same roomId edits the same document. Data on the demo server is wiped after one day.

Open the example in two tabs to see cursors and edits sync. For a self-hosted backend, see the useSync hook in @tldraw/sync and the sync template.

Is this page helpful?
Prev
Commenting
Next
Commenting sidebar