TldrawOptions

See source code
Table of contents

Options for configuring tldraw. For defaults, see defaultTldrawOptions.

interface TldrawOptions {}

Example

const options: Partial<TldrawOptions> = {
  maxPages: 3,
  maxShapesPerPage: 1000,
}

function MyTldrawComponent() {
  return <Tldraw options={options} />
}

Properties

actionShortcutsLocation

readonly
readonly actionShortcutsLocation: 'menu' | 'swap' | 'toolbar'

adjacentShapeMargin

readonly
readonly adjacentShapeMargin: number

animationMediumMs

readonly
readonly animationMediumMs: number

cameraMovingTimeoutMs

readonly
readonly cameraMovingTimeoutMs: number

cameraSlideFriction

readonly
readonly cameraSlideFriction: number

coarseDragDistanceSquared

readonly
readonly coarseDragDistanceSquared: number

coarseHandleRadius

readonly
readonly coarseHandleRadius: number

coarsePointerWidth

readonly
readonly coarsePointerWidth: number

collaboratorCheckIntervalMs

readonly
readonly collaboratorCheckIntervalMs: number

collaboratorIdleTimeoutMs

readonly
readonly collaboratorIdleTimeoutMs: number

collaboratorInactiveTimeoutMs

readonly
readonly collaboratorInactiveTimeoutMs: number

createTextOnCanvasDoubleClick

readonly
readonly createTextOnCanvasDoubleClick: boolean

defaultSvgPadding

readonly
readonly defaultSvgPadding: number

doubleClickDurationMs

readonly
readonly doubleClickDurationMs: number

dragDistanceSquared

readonly
readonly dragDistanceSquared: number

edgeScrollDelay

readonly
readonly edgeScrollDelay: number

edgeScrollDistance

readonly
readonly edgeScrollDistance: number

edgeScrollEaseDuration

readonly
readonly edgeScrollEaseDuration: number

edgeScrollSpeed

readonly
readonly edgeScrollSpeed: number

enableToolbarKeyboardShortcuts

readonly

By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.

readonly enableToolbarKeyboardShortcuts: boolean

exportProvider

readonly

The react provider to use when exporting an image. This is useful if your shapes depend on external context providers. By default, this is React.Fragment.

readonly exportProvider: ComponentType<{
  children: React.ReactNode
}>

flattenImageBoundsExpand

readonly
readonly flattenImageBoundsExpand: number

flattenImageBoundsPadding

readonly
readonly flattenImageBoundsPadding: number

followChaseViewportSnap

readonly
readonly followChaseViewportSnap: number

gridSteps

readonly
readonly gridSteps: readonly {
  readonly mid: number
  readonly min: number
  readonly step: number
}[]

handleRadius

readonly
readonly handleRadius: number

hitTestMargin

readonly
readonly hitTestMargin: number

laserDelayMs

readonly
readonly laserDelayMs: number

longPressDurationMs

readonly
readonly longPressDurationMs: number

maxExportDelayMs

readonly
readonly maxExportDelayMs: number

maxFilesAtOnce

readonly
readonly maxFilesAtOnce: number

maxFontsToLoadBeforeRender

readonly

The maximum number of fonts that will be loaded while blocking the main rendering of the canvas. If there are more than this number of fonts needed, we'll just show the canvas right away and let the fonts load in in the background.

readonly maxFontsToLoadBeforeRender: number

maxPages

readonly
readonly maxPages: number

maxShapesPerPage

readonly
readonly maxShapesPerPage: number

multiClickDurationMs

readonly
readonly multiClickDurationMs: number

temporaryAssetPreviewLifetimeMs

readonly

How long should previews created by Editor.createTemporaryAssetPreview last before they expire? Defaults to 3 minutes.

readonly temporaryAssetPreviewLifetimeMs: number

textShadowLod

readonly
readonly textShadowLod: number

Prev
TldrawEditorWithStoreProps
Next
TLEditorComponents
hey

We use cookies on this website.
Learn more in our Cookie Policy.