TLComponents • tldraw Docs

Table of contents

ActionsMenu
Background
Brush
Canvas
CollaboratorBrush
CollaboratorCursor
CollaboratorHint
CollaboratorScribble
CollaboratorShapeIndicator
ContextMenu
Cursor
CursorChatBubble
DebugMenu
DebugPanel
Dialogs
ErrorFallback
Grid
Handle
Handles
HelperButtons
HelpMenu
InFrontOfTheCanvas
KeyboardShortcutsDialog
LoadingScreen
MainMenu
MenuPanel
Minimap
NavigationPanel
OnTheCanvas
PageMenu
QuickActions
RichTextToolbar
Scribble
SelectionBackground
SelectionForeground
ShapeErrorFallback
ShapeIndicator
ShapeIndicatorErrorFallback
ShapeIndicators
SharePanel
SnapIndicator
Spinner
StylePanel
SvgDefs
Toasts
Toolbar
TopPanel
ZoomBrush
ZoomMenu
Properties

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

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

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

InFrontOfTheCanvas

optional

from TLEditorComponents

InFrontOfTheCanvas?: ComponentType | null

KeyboardShortcutsDialog

optional

from TLUiComponents

KeyboardShortcutsDialog?: ComponentType<TLUiKeyboardShortcutsDialogProps> | null

LoadingScreen

optional

from TLEditorComponents

LoadingScreen?: ComponentType | null

MainMenu

optional

from TLUiComponents

MainMenu?: ComponentType<TLUiMainMenuProps> | null

MenuPanel

optional

from TLUiComponents

MenuPanel?: ComponentType | null

Minimap

optional

from TLUiComponents

Minimap?: ComponentType | null

NavigationPanel

optional

from TLUiComponents

NavigationPanel?: ComponentType | null

OnTheCanvas

optional

from TLEditorComponents

OnTheCanvas?: ComponentType | null

PageMenu

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

SharePanel

optional

from TLUiComponents

SharePanel?: ComponentType | null

SnapIndicator

optional

from TLEditorComponents

SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null

Spinner

optional

from TLEditorComponents

Spinner?: ComponentType | null

StylePanel

optional

from TLUiComponents

StylePanel?: ComponentType<TLUiStylePanelProps> | null

SvgDefs

optional

from TLEditorComponents

SvgDefs?: ComponentType | null

Toasts

optional

from TLUiComponents

Toasts?: ComponentType | null

optional

from TLUiComponents

Toolbar?: ComponentType | null

TopPanel

optional

from TLUiComponents

TopPanel?: ComponentType | null

ZoomBrush

optional

from TLEditorComponents

ZoomBrush?: ComponentType<TLBrushProps> | null

ZoomMenu

optional

from TLUiComponents

ZoomMenu?: ComponentType<TLUiZoomMenuProps> | null