TldrawOptions
See source codeTable of contents
- actionShortcutsLocation
- adjacentShapeMargin
- animationMediumMs
- branding
- cameraMovingTimeoutMs
- cameraSlideFriction
- coarseDragDistanceSquared
- coarseHandleRadius
- coarsePointerWidth
- collaboratorCheckIntervalMs
- collaboratorIdleTimeoutMs
- collaboratorInactiveTimeoutMs
- createTextOnCanvasDoubleClick
- debouncedZoom
- debouncedZoomThreshold
- defaultSvgPadding
- doubleClickDurationMs
- dragDistanceSquared
- edgeScrollDelay
- edgeScrollDistance
- edgeScrollEaseDuration
- edgeScrollSpeed
- enableToolbarKeyboardShortcuts
- exportProvider
- flattenImageBoundsExpand
- flattenImageBoundsPadding
- followChaseViewportSnap
- gridSteps
- handleRadius
- hitTestMargin
- laserDelayMs
- longPressDurationMs
- maxExportDelayMs
- maxFilesAtOnce
- maxFontsToLoadBeforeRender
- maxPages
- maxShapesPerPage
- multiClickDurationMs
- nonce
- spacebarPanning
- temporaryAssetPreviewLifetimeMs
- textShadowLod
- tooltipDelayMs
- uiCoarseDragDistanceSquared
- uiDragDistanceSquared
- Properties
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 actionShortcutsLocation: 'menu' | 'swap' | 'toolbar'adjacentShapeMargin
readonly adjacentShapeMargin: numberanimationMediumMs
readonly animationMediumMs: numberbranding
Branding name of the app, currently only used for adding aria-label for the application.
readonly branding?: stringcameraMovingTimeoutMs
readonly cameraMovingTimeoutMs: numbercameraSlideFriction
readonly cameraSlideFriction: numbercoarseDragDistanceSquared
readonly coarseDragDistanceSquared: numbercoarseHandleRadius
readonly coarseHandleRadius: numbercoarsePointerWidth
readonly coarsePointerWidth: numbercollaboratorCheckIntervalMs
readonly collaboratorCheckIntervalMs: numbercollaboratorIdleTimeoutMs
readonly collaboratorIdleTimeoutMs: numbercollaboratorInactiveTimeoutMs
readonly collaboratorInactiveTimeoutMs: numbercreateTextOnCanvasDoubleClick
readonly createTextOnCanvasDoubleClick: booleandebouncedZoom
Whether to use debounced zoom level for certain rendering optimizations. When true, editor.getDebouncedZoomLevel() returns a cached zoom value while the camera is moving, reducing re-renders. When false, it always returns the current zoom level.
readonly debouncedZoom: booleandebouncedZoomThreshold
The number of shapes that must be on the page for the debounced zoom level to be used. Defaults to 300 shapes.
readonly debouncedZoomThreshold: numberdefaultSvgPadding
readonly defaultSvgPadding: numberdoubleClickDurationMs
readonly doubleClickDurationMs: numberdragDistanceSquared
readonly dragDistanceSquared: numberedgeScrollDelay
readonly edgeScrollDelay: numberedgeScrollDistance
readonly edgeScrollDistance: numberedgeScrollEaseDuration
readonly edgeScrollEaseDuration: numberedgeScrollSpeed
readonly edgeScrollSpeed: numberenableToolbarKeyboardShortcuts
By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
readonly enableToolbarKeyboardShortcuts: booleanexportProvider
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 flattenImageBoundsExpand: numberflattenImageBoundsPadding
readonly flattenImageBoundsPadding: numberfollowChaseViewportSnap
readonly followChaseViewportSnap: numbergridSteps
readonly gridSteps: readonly {
readonly mid: number
readonly min: number
readonly step: number
}[]handleRadius
readonly handleRadius: numberhitTestMargin
readonly hitTestMargin: numberlaserDelayMs
readonly laserDelayMs: numberlongPressDurationMs
readonly longPressDurationMs: numbermaxExportDelayMs
readonly maxExportDelayMs: numbermaxFilesAtOnce
readonly maxFilesAtOnce: numbermaxFontsToLoadBeforeRender
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: numbermaxPages
readonly maxPages: numbermaxShapesPerPage
readonly maxShapesPerPage: numbermultiClickDurationMs
readonly multiClickDurationMs: numbernonce
If you have a CSP policy that blocks inline styles, you can use this prop to provide a nonce to use in the editor's styles.
readonly nonce: string | undefinedspacebarPanning
Whether to allow spacebar panning. When true, the spacebar will pan the camera when held down. When false, the spacebar will not pan the camera.
readonly spacebarPanning: booleantemporaryAssetPreviewLifetimeMs
How long should previews created by Editor.createTemporaryAssetPreview last before they expire? Defaults to 3 minutes.
readonly temporaryAssetPreviewLifetimeMs: numbertextShadowLod
readonly textShadowLod: numbertooltipDelayMs
readonly tooltipDelayMs: numberuiCoarseDragDistanceSquared
readonly uiCoarseDragDistanceSquared: numberuiDragDistanceSquared
readonly uiDragDistanceSquared: number