TldrawBaseProps

Extends TldrawUiProps, TldrawEditorBaseProps, TLExternalContentProps.

interface TldrawBaseProps
  extends TldrawUiProps,
    TldrawEditorBaseProps,
    TLExternalContentProps {}

Properties

The mime types of images that are allowed to be handled. Defaults to DEFAULT_SUPPORTED_IMAGE_TYPES.

acceptedImageMimeTypes?: readonly string[]

The mime types of videos that are allowed to be handled. Defaults to DEFAULT_SUPPORT_VIDEO_TYPES.

acceptedVideoMimeTypes?: readonly string[]

Urls for custom assets.

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

assetUrls?: TLUiAssetUrlOverrides

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 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

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

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>

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

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

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