TLEditorOptions

interface TLEditorOptions {}

Properties

An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.

assetUtils?: readonly TLAnyAssetUtilConstructor[];

Whether to automatically focus the editor when it mounts.

autoFocus?: boolean;

An array of bindings to use in the editor. These will be used to create and manage bindings in the editor.

bindingUtils: readonly TLAnyBindingUtilConstructor[];

Options for the editor's camera.

cameraOptions?: Partial<TLCameraOptions>;

The editor's color scheme preference, controls the default color mode. Defaults to 'light'.

• 'light' - Always use light mode. - 'dark' - Always use dark mode. - 'system' - Follow the OS color scheme preference.

colorScheme?: "dark" | "light" | "system";

fontAssetUrls?: {
  [key: string]: string | undefined;
};

The editor's initial active tool (or other state node id).

initialState?: string;

The id of the initially active theme. Defaults to 'default'.

initialTheme?: TLThemeId;

licenseKey?: string;

Additional configuration options for the tldraw editor.

options?: Partial<TldrawOptions>;

An array of shapes to use in the editor. These will be used to create and manage shapes in the editor.

shapeUtils: readonly TLAnyShapeUtilConstructor[];

The Store instance to use for keeping the editor's data. This may be prepopulated, e.g. by loading from a server or database.

store: TLStore;

Text options for the editor.

textOptions?: TLTextOptions;

Named theme definitions for the editor. Each theme contains shared properties (font size, line height, stroke width) and color palettes for both light and dark modes.

themes?: Partial<TLThemes>;

An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.

tools: readonly TLStateNodeConstructor[];

A user defined externally to replace the default user.

user?: TLCurrentUser;

Methods

Should return a containing html element which has all the styles applied to the editor. If not given, the body element will be used.

Provides a way to hide shapes.

Example

getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'}

• 'inherit' | undefined - (default) The shape will be visible unless its parent is hidden. - 'hidden' - The shape will be hidden. - 'visible' - The shape will be visible.

Parameters

TLShape;

Editor;

Returns

"hidden" | "inherit" | "visible" | null | undefined;