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} />;
}