UseSyncOptionsWithConnectFn

Extends UseSyncOptionsBase.

interface UseSyncOptionsWithConnectFn extends UseSyncOptionsBase {}

Properties

Asset store implementation for handling file uploads and storage.

Required for production applications to handle images, videos, and other media efficiently. Without an asset store, files are stored inline as base64, which causes performance issues with large files.

The asset store must implement upload (for new files) and resolve (for displaying existing files) methods. For prototyping, you can use inlineBase64AssetStore but this is not recommended for production.

assets: TLAssetStore;

Example

const myAssetStore: TLAssetStore = {
  upload: async (asset, file) => {
    const url = await uploadToCloudStorage(file);
    return { src: url };
  },
  resolve: (asset, context) => {
    return getOptimizedUrl(asset.src, context);
  },
};

Create a connection to the server. Mostly you should use UseSyncOptionsWithUri.uri instead, but this is useful if you want to use a custom transport to connect to the server, instead of our default websocket-based transport.

connect: UseSyncConnectFn;

uri?: never;

User store for identity, presence and attribution.

Both methods return reactive Signals. currentUser provides the current user's identity (used for both presence broadcasting and shape attribution) and optionally resolve(userId) looks up other users by ID. If not provided, a default implementation backed by localStorage user preferences is used, with resolve falling back to presence records in the store.

users?: TLUserStore;

Methods

A reactive function that returns a TLInstancePresence object.

This function is called reactively whenever the store state changes and determines what presence information to broadcast to other clients. The result is synchronized across all connected clients for displaying cursors, selections, and other collaborative indicators.

If not provided, uses the default implementation which includes standard cursor position and selection state. Custom implementations allow you to add additional presence data like current tool, view state, or custom status.

See getDefaultUserPresence for the default implementation of this function.

Example

getUserPresence: (store, user) => {
  return {
    userId: user.id,
    userName: user.name,
    cursor: { x: 100, y: 200 },
    currentTool: "select",
    isActive: true,
  };
};

Parameters

TLStore;

TLUser;

Returns

null | TLPresenceStateInfo;

Presence state to broadcast to other clients, or null to hide presence

Handler for receiving custom messages sent through the multiplayer connection.

Use this to implement custom communication channels between clients beyond the standard shape and presence synchronization. Messages are sent using the TLSyncClient's sendMessage method.

Example

onCustomMessageReceived: (data) => {
  if (data.type === "chat") {
    displayChatMessage(data.message, data.userId);
  }
};

Parameters

any;

Returns

void;