TldrawOptions
See source codeTable of contents
- actionShortcutsLocation
- adjacentShapeMargin
- animationMediumMs
- branding
- cameraMovingTimeoutMs
- cameraSlideFriction
- coarseDragDistanceSquared
- coarseHandleRadius
- coarsePointerWidth
- collaboratorCheckIntervalMs
- collaboratorIdleTimeoutMs
- collaboratorInactiveTimeoutMs
- createTextOnCanvasDoubleClick
- defaultSvgPadding
- doubleClickDurationMs
- dragDistanceSquared
- edgeScrollDelay
- edgeScrollDistance
- edgeScrollEaseDuration
- edgeScrollSpeed
- enableToolbarKeyboardShortcuts
- exportProvider
- flattenImageBoundsExpand
- flattenImageBoundsPadding
- followChaseViewportSnap
- gridSteps
- handleRadius
- hitTestMargin
- laserDelayMs
- longPressDurationMs
- maxExportDelayMs
- maxFilesAtOnce
- maxFontsToLoadBeforeRender
- maxPages
- maxShapesPerPage
- multiClickDurationMs
- nonce
- 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: booleandefaultSvgPadding
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 | undefinedtemporaryAssetPreviewLifetimeMs
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