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 { Tldraw, TLComponents } from 'tldraw'

const components: TLComponents = {
  Scribble: MyCustomScribble,
}

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

Properties

A11y

optional
from TLUiComponents
A11y?: ComponentType | null

ActionsMenu

optional
from TLUiComponents
ActionsMenu?: ComponentType<TLUiActionsMenuProps> | null

Background

optional
from TLEditorComponents
Background?: ComponentType | null

Brush

optional
from TLEditorComponents
Brush?: ComponentType<TLBrushProps> | null

Canvas

optional
from TLEditorComponents
Canvas?: ComponentType<TLCanvasComponentProps> | null

CollaboratorBrush

optional
from TLEditorComponents
CollaboratorBrush?: ComponentType<TLBrushProps> | null

CollaboratorCursor

optional
from TLEditorComponents
CollaboratorCursor?: ComponentType<TLCursorProps> | null

CollaboratorHint

optional
from TLEditorComponents
CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null

CollaboratorScribble

optional
from TLEditorComponents
CollaboratorScribble?: ComponentType<TLScribbleProps> | null

CollaboratorShapeIndicator

optional
from TLEditorComponents
CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null

ContextMenu

optional
from TLUiComponents
ContextMenu?: ComponentType<TLUiContextMenuProps> | null

Cursor

optional
from TLEditorComponents
Cursor?: ComponentType<TLCursorProps> | null

CursorChatBubble

optional
from TLUiComponents
CursorChatBubble?: ComponentType | null

DebugMenu

optional
from TLUiComponents
DebugMenu?: ComponentType | null

DebugPanel

optional
from TLUiComponents
DebugPanel?: ComponentType | null

Dialogs

optional
from TLUiComponents
Dialogs?: ComponentType | null

ErrorFallback

optional
from TLEditorComponents
ErrorFallback?: TLErrorFallbackComponent

FollowingIndicator

optional
from TLUiComponents
FollowingIndicator?: ComponentType | null

Grid

optional
from TLEditorComponents
Grid?: ComponentType<TLGridProps> | null

Handle

optional
from TLEditorComponents
Handle?: ComponentType<TLHandleProps> | null

Handles

optional
from TLEditorComponents
Handles?: ComponentType<TLHandlesProps> | null

HelperButtons

optional
from TLUiComponents
HelperButtons?: ComponentType<TLUiHelperButtonsProps> | null

HelpMenu

optional
from TLUiComponents
HelpMenu?: ComponentType<TLUiHelpMenuProps> | null

ImageToolbar

optional
from TLUiComponents
ImageToolbar?: ComponentType | null

InFrontOfTheCanvas

optional
from TLEditorComponents
InFrontOfTheCanvas?: ComponentType | null

KeyboardShortcutsDialog

optional
from TLUiComponents
KeyboardShortcutsDialog?: ComponentType<TLUiKeyboardShortcutsDialogProps> | null

LoadingScreen

optional
from TLEditorComponents
LoadingScreen?: ComponentType | null
optional
from TLUiComponents
MainMenu?: ComponentType<TLUiMainMenuProps> | null
optional
from TLUiComponents
MenuPanel?: ComponentType | null

Minimap

optional
from TLUiComponents
Minimap?: ComponentType | null
optional
from TLUiComponents
NavigationPanel?: ComponentType | null

OnTheCanvas

optional
from TLEditorComponents
OnTheCanvas?: ComponentType | null

Overlays

optional
from TLEditorComponents
Overlays?: ComponentType | null
optional
from TLUiComponents
PageMenu?: ComponentType | null

QuickActions

optional
from TLUiComponents
QuickActions?: ComponentType<TLUiQuickActionsProps> | null

RichTextToolbar

optional
from TLUiComponents
RichTextToolbar?: ComponentType<TLUiRichTextToolbarProps> | null

Scribble

optional
from TLEditorComponents
Scribble?: ComponentType<TLScribbleProps> | null

SelectionBackground

optional
from TLEditorComponents
SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null

SelectionForeground

optional
from TLEditorComponents
SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null

ShapeErrorFallback

optional
from TLEditorComponents
ShapeErrorFallback?: TLShapeErrorFallbackComponent

ShapeIndicator

optional
from TLEditorComponents
ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null

ShapeIndicatorErrorFallback

optional
from TLEditorComponents
ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent

ShapeIndicators

optional
from TLEditorComponents
ShapeIndicators?: ComponentType | null

ShapeWrapper

optional
from TLEditorComponents
ShapeWrapper?: ComponentType<
  TLShapeWrapperProps & RefAttributes<HTMLDivElement>
> | null

SharePanel

optional
from TLUiComponents
SharePanel?: ComponentType | null

SnapIndicator

optional
from TLEditorComponents
SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null

Spinner

optional
from TLEditorComponents
Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null

StylePanel

optional
from TLUiComponents
StylePanel?: ComponentType<TLUiStylePanelProps> | null

SvgDefs

optional
from TLEditorComponents
SvgDefs?: ComponentType | null

Toasts

optional
from TLUiComponents
Toasts?: ComponentType | null

Toolbar

optional
from TLUiComponents
Toolbar?: ComponentType | null

TopPanel

optional
from TLUiComponents
TopPanel?: ComponentType | null

VideoToolbar

optional
from TLUiComponents
VideoToolbar?: ComponentType | null

ZoomBrush

optional
from TLEditorComponents
ZoomBrush?: ComponentType<TLBrushProps> | null

ZoomMenu

optional
from TLUiComponents
ZoomMenu?: ComponentType<TLUiZoomMenuProps> | null
Prev
TLArrowPoint
Next
TLDefaultExternalContentHandlerOpts