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

Asset URL override.

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

components?: TLComponents

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

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

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

renderDebugMenuItems?: () => React.ReactNode

An array of shape utils to use in the editor.

shapeUtils?: readonly TLAnyShapeUtilConstructor[]

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

tools?: readonly TLStateNodeConstructor[]

The user interacting with the editor.

user?: TLUser