TLUserStore

Interface for resolving user information in tldraw.

A TLUserStore sits alongside the main TLStore and provides user resolution for attribution labels and display names. Implement this interface to connect tldraw to your auth/user system.

currentUser and resolve are reactive Signals so that the editor can automatically track changes to user data and re-render when a user's name, color, or avatar updates.

Implementations should cache signals returned by resolve — e.g. return the same Signal for repeated calls with the same userId — to avoid unnecessary re-computation.

interface TLUserStore {}

Example

const currentUser = computed("currentUser", () =>
  UserRecordType.create({
    id: createUserId(myAuth.userId),
    name: myAuth.displayName,
    color: myAuth.color,
  }),
);

const userStore: TLUserStore = {
  currentUser,
  resolve(userId) {
    return computed("resolve-" + userId, () => myUserCache.get(userId) ?? null);
  },
};

Properties

A signal resolving to the currently authenticated user, or null for anonymous / unknown. Read when stamping attribution on shape create/update.

currentUser: Signal<null | TLUser>;

Methods

Return a signal resolving an arbitrary user ID to display info. Called when rendering attribution labels for shapes that may have been created or edited by someone else. The signal's value should be null if the user cannot be resolved.

Parameters

string;

Returns

Signal<null | TLUser>;