TLComponents

See source code
Table of contents

Extends TLEditorComponents, TLUiComponents.

Override the default react components used by the editor and UI. Set components to null to disable them entirely.

interface TLComponents extends TLEditorComponents, TLUiComponents {}

Example

import { TLComponents, Tldraw } from 'tldraw'

const components: TLComponents = {
  Scribble: MyCustomScribble,
}

export function MyApp() {
  return <Tldraw components={components} />
}

Properties

ActionsMenu

optional
ActionsMenu?: ComponentType<TLUiActionsMenuProps> | null

Background

optional
Background?: ComponentType | null

Brush

optional
Brush?: ComponentType<TLBrushProps> | null

Canvas

optional
Canvas?: ComponentType<TLCanvasComponentProps> | null

CollaboratorBrush

optional
CollaboratorBrush?: ComponentType<TLBrushProps> | null

CollaboratorCursor

optional
CollaboratorCursor?: ComponentType<TLCursorProps> | null

CollaboratorHint

optional
CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null

CollaboratorScribble

optional
CollaboratorScribble?: ComponentType<TLScribbleProps> | null

CollaboratorShapeIndicator

optional
CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null

ContextMenu

optional
ContextMenu?: ComponentType<TLUiContextMenuProps> | null

Cursor

optional
Cursor?: ComponentType<TLCursorProps> | null

CursorChatBubble

optional
CursorChatBubble?: ComponentType | null

DebugMenu

optional
DebugMenu?: ComponentType | null

DebugPanel

optional
DebugPanel?: ComponentType | null

ErrorFallback

optional
ErrorFallback?: TLErrorFallbackComponent

Grid

optional
Grid?: ComponentType<TLGridProps> | null

Handle

optional
Handle?: ComponentType<TLHandleProps> | null

Handles

optional
Handles?: ComponentType<TLHandlesProps> | null

HelperButtons

optional
HelperButtons?: ComponentType<TLUiHelperButtonsProps> | null

HelpMenu

optional
HelpMenu?: ComponentType<TLUiHelpMenuProps> | null

InFrontOfTheCanvas

optional
InFrontOfTheCanvas?: ComponentType | null

KeyboardShortcutsDialog

optional
KeyboardShortcutsDialog?: ComponentType<TLUiKeyboardShortcutsDialogProps> | null

LoadingScreen

optional
LoadingScreen?: ComponentType | null

optional
MainMenu?: ComponentType<TLUiMainMenuProps> | null

optional
MenuPanel?: ComponentType | null

Minimap

optional
Minimap?: ComponentType | null

optional
NavigationPanel?: ComponentType | null

OnTheCanvas

optional
OnTheCanvas?: ComponentType | null

optional
PageMenu?: ComponentType | null

QuickActions

optional
QuickActions?: ComponentType<TLUiQuickActionsProps> | null

RichTextToolbar

optional
RichTextToolbar?: ComponentType<TLUiRichTextToolbarProps> | null

Scribble

optional
Scribble?: ComponentType<TLScribbleProps> | null

SelectionBackground

optional
SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null

SelectionForeground

optional
SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null

ShapeErrorFallback

optional
ShapeErrorFallback?: TLShapeErrorFallbackComponent

ShapeIndicator

optional
ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null

ShapeIndicatorErrorFallback

optional
ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent

ShapeIndicators

optional
ShapeIndicators?: ComponentType | null

SharePanel

optional
SharePanel?: ComponentType | null

SnapIndicator

optional
SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null

Spinner

optional
Spinner?: ComponentType | null

StylePanel

optional
StylePanel?: ComponentType<TLUiStylePanelProps> | null

SvgDefs

optional
SvgDefs?: ComponentType | null

Toolbar

optional
Toolbar?: ComponentType | null

TopPanel

optional
TopPanel?: ComponentType | null

ZoomBrush

optional
ZoomBrush?: ComponentType<TLBrushProps> | null

ZoomMenu

optional
ZoomMenu?: ComponentType<TLUiZoomMenuProps> | null

Prev
TLArrowPoint
Next
TldrawBaseProps