RemoteTLStoreWithStatus • tldraw Docs

A store wrapper specifically for remote collaboration that excludes local-only states. This type represents a tldraw store that is synchronized with a remote multiplayer server.

Unlike the base TLStoreWithStatus, this excludes 'synced-local' and 'not-synced' states since remote stores are always either loading, connected to a server, or in an error state.

type RemoteTLStoreWithStatus = Exclude<
  TLStoreWithStatus,
  | {
      status: 'not-synced'
    }
  | {
      status: 'synced-local'
    }
>

Example

function MyCollaborativeApp() {
  const store: RemoteTLStoreWithStatus = useSync({
    uri: 'wss://myserver.com/sync/room-123',
    assets: myAssetStore,
  })

  if (store.status === 'loading') {
    return <div>Connecting to multiplayer session...</div>
  }

  if (store.status === 'error') {
    return <div>Connection failed: {store.error.message}</div>
  }

  // store.status === 'synced-remote'
  return <Tldraw store={store.store} />
}