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