useSync

useSync 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 useSync(
  opts: UseSyncOptions & TLStoreSchemaOptions
): RemoteTLStoreWithStatus

Example

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

Parameters

UseSyncOptions & TLStoreSchemaOptions

Returns

RemoteTLStoreWithStatus