TldrawOptions
See source codeTable of contents
- actionShortcutsLocation
- adjacentShapeMargin
- animationMediumMs
- 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
- temporaryAssetPreviewLifetimeMs
- textShadowLod
- 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: number
animationMediumMs
readonly animationMediumMs: number
cameraMovingTimeoutMs
readonly cameraMovingTimeoutMs: number
cameraSlideFriction
readonly cameraSlideFriction: number
coarseDragDistanceSquared
readonly coarseDragDistanceSquared: number
coarseHandleRadius
readonly coarseHandleRadius: number
coarsePointerWidth
readonly coarsePointerWidth: number
collaboratorCheckIntervalMs
readonly collaboratorCheckIntervalMs: number
collaboratorIdleTimeoutMs
readonly collaboratorIdleTimeoutMs: number
collaboratorInactiveTimeoutMs
readonly collaboratorInactiveTimeoutMs: number
createTextOnCanvasDoubleClick
readonly createTextOnCanvasDoubleClick: boolean
defaultSvgPadding
readonly defaultSvgPadding: number
doubleClickDurationMs
readonly doubleClickDurationMs: number
dragDistanceSquared
readonly dragDistanceSquared: number
edgeScrollDelay
readonly edgeScrollDelay: number
edgeScrollDistance
readonly edgeScrollDistance: number
edgeScrollEaseDuration
readonly edgeScrollEaseDuration: number
edgeScrollSpeed
readonly edgeScrollSpeed: number
enableToolbarKeyboardShortcuts
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
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: number
flattenImageBoundsPadding
readonly flattenImageBoundsPadding: number
followChaseViewportSnap
readonly followChaseViewportSnap: number
gridSteps
readonly gridSteps: readonly {
readonly mid: number
readonly min: number
readonly step: number
}[]
handleRadius
readonly handleRadius: number
hitTestMargin
readonly hitTestMargin: number
laserDelayMs
readonly laserDelayMs: number
longPressDurationMs
readonly longPressDurationMs: number
maxExportDelayMs
readonly maxExportDelayMs: number
maxFilesAtOnce
readonly maxFilesAtOnce: number
maxFontsToLoadBeforeRender
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 maxPages: number
maxShapesPerPage
readonly maxShapesPerPage: number
multiClickDurationMs
readonly multiClickDurationMs: number
temporaryAssetPreviewLifetimeMs
How long should previews created by Editor.createTemporaryAssetPreview last before they expire? Defaults to 3 minutes.
readonly temporaryAssetPreviewLifetimeMs: number
textShadowLod
readonly textShadowLod: number