Multiplayer sync with a custom shape

Sync a custom shape between clients by registering its shape util with the store.

import { useSyncDemo } from '@tldraw/sync'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import { CounterShapeTool, CounterShapeUtil } from './CounterShape'
import { components, uiOverrides } from './ui'

const customShapes = [CounterShapeUtil]
const customTools = [CounterShapeTool]

export default function SyncDemoShapeExample({ roomId }: { roomId: string }) {
	// The store needs the shape utils too, so it can validate and migrate counter shapes that arrive
	// from other clients.
	const store = useSyncDemo({ roomId, shapeUtils: customShapes })
	return (
		<div className="tldraw__editor">
			<Tldraw
				store={store}
				shapeUtils={customShapes}
				tools={customTools}
				overrides={uiOverrides}
				components={components}
				options={{ deepLinks: true }}
			/>
		</div>
	)
}

A synced store validates and migrates records for every shape type it holds, so a custom shape's ShapeUtil has to be passed to useSyncDemo (as shapeUtils) as well as to <Tldraw>. Without it the store rejects the shape when it arrives from another client.

The counter shape here has a count prop with + and - buttons. Open the example in two tabs and click a button; the count updates everywhere because the change is an ordinary editor.updateShape on a synced record.

Is this page helpful?
Prev
Comment clustering
Next
Multiplayer sync with custom people menu