TldrawEditorBaseProps

Base props for the Tldraw and TldrawEditor components.

interface TldrawEditorBaseProps {}

Properties

The URLs for the fonts to use in the editor.

assetUrls?: {
  fonts?: {
    [key: string]: string | undefined;
  };
};

Whether to automatically focus the editor when it mounts.

autoFocus?: boolean;

An array of binding utils to use in the editor.

bindingUtils?: readonly TLAnyBindingUtilConstructor[];

Camera options for the editor.

cameraOptions?: Partial<TLCameraOptions>;

The component's children.

children?: ReactNode;

A classname to pass to the editor's container.

className?: string;

Overrides for the editor's components, such as handles, collaborator cursors, etc.

components?: TLEditorComponents;

Options for syncing the editor's camera state with the URL.

deepLinks?: TLDeepLinkOptions | true;

Whether to infer dark mode from the user's OS. Defaults to false.

inferDarkMode?: boolean;

The editor's initial state (usually the id of the first active tool).

initialState?: string;

The license key.

licenseKey?: string;

Called when the editor has mounted.

onMount?: TLOnMountHandler;

Options for the editor.

options?: Partial<TldrawOptions>;

An array of shape utils to use in the editor.

shapeUtils?: readonly TLAnyShapeUtilConstructor[];

Text options for the editor.

textOptions?: TLTextOptions;

An array of tools to add to the editor's state chart.

tools?: readonly TLStateNodeConstructor[];

The user interacting with the editor.

user?: TLUser;

Methods

Provides a way to hide shapes.

Hidden shapes will not render in the editor, and they will not be eligible for hit test via Editor.getShapeAtPoint and Editor.getShapesAtPoint. But otherwise they will remain in the store and participate in all other operations.

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;