TldrawBaseProps

Extends TldrawUiProps, TldrawEditorBaseProps, TLExternalContentProps.

interface TldrawBaseProps
  extends TldrawUiProps, TldrawEditorBaseProps, TLExternalContentProps {}

Properties

The mime types of images that are allowed to be handled. When passed to the Tldraw component, this also reconfigures the default ImageAssetUtil to only accept files matching these types. If you only want to accept a subset of image types and want to additionally block videos, pass acceptedVideoMimeTypes={[]}. A file is accepted if its MIME type is in this list, in acceptedVideoMimeTypes, or if any registered asset util accepts it.

acceptedImageMimeTypes?: readonly string[];

The mime types of videos that are allowed to be handled. When passed to the Tldraw component, this also reconfigures the default VideoAssetUtil to only accept files matching these types. A file is accepted if its MIME type is in this list, in acceptedImageMimeTypes, or if any registered asset util accepts it.

acceptedVideoMimeTypes?: readonly string[];

Urls for custom assets.

⚠︎ Important! This must be memoized (with useMemo) or defined outside of any React component.

assetUrls?: TLUiAssetUrlOverrides;

An array of asset utils to use in the editor.

assetUtils?: readonly TLAnyAssetUtilConstructor[];

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;

The editor's color scheme. Defaults to 'light'.

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

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

Overrides for tldraw's components.

⚠︎ Important! This must be memoized (with useMemo) or defined outside of any React component.

components?: TLComponents;

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

deepLinks?: TLDeepLinkOptions | true;

Custom definitions for tldraw's embeds.

⚠︎ Important! This must be memoized (with useMemo) or defined outside of any React component.

embeds?: TLEmbedDefinition[];

Whether to always should the mobile breakpoints.

forceMobile?: boolean;

Whether to hide the user interface and only display the canvas.

hideUi?: boolean;

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

initialState?: string;

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

initialTheme?: TLThemeId;

The license key.

licenseKey?: string;

The locale to use for the editor's UI. When set, this takes priority over both the browser's language preferences (navigator.languages) and the user's locale preference (e.g. via editor.user.updateUserPreferences({ locale: '...' })), giving the application explicit control over the displayed language.

locale?: string;

Example

<Tldraw locale="fr" />;

The maximum size (in bytes) of an asset. Assets larger than this will be rejected. Defaults to 10mb (10 * 1024 * 1024).

maxAssetSize?: number;

The maximum dimension (width or height) of an image. Images larger than this will be rescaled to fit. Defaults to infinity.

maxImageDimension?: number;

Supported mime types for media files.

mediaMimeTypes?: string[];

Called when the editor has mounted.

onMount?: TLOnMountHandler;

Callback for when an event occurs in the UI.

onUiEvent?: TLUiEventHandler;

Options for the editor.

options?: Partial<TldrawOptions>;

An array of overlay utils to use in the editor for canvas overlay UI elements.

overlayUtils?: readonly TLAnyOverlayUtilConstructor[];

Overrides for the UI.

overrides?: TLUiOverrides | TLUiOverrides[];

An array of shape utils to use in the editor.

shapeUtils?: readonly TLAnyShapeUtilConstructor[];

Text options for the editor.

textOptions?: TLTextOptions;

Named themes for the editor.

themes?: Partial<TLThemes>;

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

tools?: readonly TLStateNodeConstructor[];

The user interacting with the editor.

user?: TLCurrentUser;

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;

Additional items to add to the debug menu (will be deprecated)