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 and . 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)