useMultiplayerSync

useMultiplayerSync creates a store that is synced with a multiplayer server.

The store can be passed directly into the <Tldraw /> component to enable multiplayer features. It will handle loading states, and enable multiplayer UX like user cursors and following.

To enable external blob storage, you should also pass in an assets object that implements the interface. If you don't do this, adding large images and videos to rooms will cause performance issues at serialization boundaries.

function useMultiplayerSync(
  opts: UseMultiplayerSyncOptions & TLStoreSchemaOptions
): RemoteTLStoreWithStatus

function MyApp() {
  const store = useMultiplayerSync({
    uri: 'wss://myapp.com/sync/my-test-room',
    assets: myAssetStore,
  })
  return <Tldraw store={store} />
}

UseMultiplayerSyncOptions &
  TLStoreSchemaOptions

RemoteTLStoreWithStatus