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;

Canvas

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

ContextMenu

optional
from TLUiComponents
ContextMenu?: ComponentType<TLUiContextMenuProps> | 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;

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;
optional
from TLUiComponents
PageMenu?: ComponentType | null;

PeopleMenu

optional
from TLUiComponents
PeopleMenu?: ComponentType | null;

PeopleMenuAvatar

optional
from TLUiComponents
PeopleMenuAvatar?: ComponentType<TLUiPeopleMenuAvatarProps> | null;

PeopleMenuFacePile

optional
from TLUiComponents
PeopleMenuFacePile?: ComponentType<TLUiPeopleMenuFacePileProps> | null;

PeopleMenuItem

optional
from TLUiComponents
PeopleMenuItem?: ComponentType<TLUiPeopleMenuItemProps> | null;

QuickActions

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

RichTextToolbar

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

SelectionBackground

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

ShapeErrorFallback

optional
from TLEditorComponents
ShapeErrorFallback?: TLShapeErrorFallbackComponent;

ShapeWrapper

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

SharePanel

optional
from TLUiComponents
SharePanel?: ComponentType | 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;

UserPresenceEditor

optional
from TLUiComponents
UserPresenceEditor?: ComponentType | null;

VideoToolbar

optional
from TLUiComponents
VideoToolbar?: ComponentType | null;

ZoomMenu

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