TLInstance

See source code
Table of contents

Extends BaseRecord<'instance', TLInstanceId>.

State that is particular to a single browser tab. The TLInstance record stores all session-specific state including cursor position, selected tools, UI preferences, and temporary interaction state.

Each browser tab has exactly one TLInstance record that persists for the duration of the session and tracks the user's current interaction state.

interface TLInstance extends BaseRecord<"instance", TLInstanceId> {}

Example

const instance: TLInstance = {
  id: "instance:instance",
  typeName: "instance",
  currentPageId: "page:page1",
  cursor: { type: "default", rotation: 0 },
  screenBounds: { x: 0, y: 0, w: 1920, h: 1080 },
  isFocusMode: false,
  isGridMode: true,
};

Properties

brush

brush: BoxModel | null;

cameraState

Whether the camera is currently moving or idle. Used to optimize rendering and hit-testing during panning/zooming.

cameraState: "idle" | "moving";

chatMessage

chatMessage: string;

currentPageId

currentPageId: TLPageId;

cursor

cursor: TLCursor;

devicePixelRatio

devicePixelRatio: number;

duplicateProps

duplicateProps: {
  offset: {
    x: number;
    y: number;
  };
  shapeIds: TLShapeId[];
} | null;

exportBackground

exportBackground: boolean;

followingUserId

followingUserId: null | string;

highlightedUserIds

highlightedUserIds: string[];

id

readonly
from BaseRecord
readonly id: Id;

insets

insets: boolean[];

isChangingStyle

isChangingStyle: boolean;

isChatting

isChatting: boolean;

isCoarsePointer

This is whether the primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen.

isCoarsePointer: boolean;

isDebugMode

isDebugMode: boolean;

isFocused

isFocused: boolean;

isFocusMode

isFocusMode: boolean;

isGridMode

isGridMode: boolean;

isHoveringCanvas

Will be null if the pointer doesn't support hovering (e.g. touch), but true or false otherwise

isHoveringCanvas: boolean | null;

isPenMode

isPenMode: boolean;

isReadonly

isReadonly: boolean;

isToolLocked

isToolLocked: boolean;

meta

meta: JsonObject;

opacityForNextShape

opacityForNextShape: TLOpacityType;

openMenus

openMenus: string[];

screenBounds

screenBounds: BoxModel;

scribbles

scribbles: TLScribble[];

stylesForNextShape

stylesForNextShape: Record<string, unknown>;

typeName

readonly
from BaseRecord
readonly typeName: TypeName;

zoomBrush

zoomBrush: BoxModel | null;
Prev
TLImageShapeProps
Next
TLInstancePageState