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 =
  | (Extract<
      TLStoreWithStatus,
      {
        status: "synced-remote";
      }
    > & {
      readonly objectAccess: TLObjectStoreAccess;
    })
  | Exclude<
      TLStoreWithStatus,
      | {
          status: "not-synced";
        }
      | {
          status: "synced-local";
        }
      | {
          status: "synced-remote";
        }
    >;

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