mocanvasv4.11.2
DocsDemosLicensing

@mocanvas/editor · interface

TLComponents

interface TLComponents

The chrome override map, passed as components.

## What is *not* here The selection and interaction overlays — brush, zoom brush, scribble, snap indicators, handles, selection foreground/background, shape indicators, collaborator brush/scribble/hint — are **not** component slots. They are drawn onto the canvas itself rather than composed as React elements, so overriding them is a rendering concern, not a chrome concern. The canvas takes its own, much smaller override map (<Canvas components={…}>) for the few of those it does let you replace.

Every slot is optional. A slot's component is rendered with no props unless noted; read the editor with useEditor().

On this page

A11yActionsMenuBackgroundCanvasCollaboratorCursorContextMenuCursorChatBubbleDebugMenuDebugPanelDialogsErrorFallbackFollowingIndicatorGridHelperButtonsHelpMenuImageToolbarInFrontOfTheCanvasKeyboardShortcutsDialogLoadingScreenMainMenuMenuPanelMinimapNavigationPanelOnTheCanvasPageMenuPeopleMenuPeopleMenuAvatarPeopleMenuFacePilePeopleMenuItemQuickActionsRichTextToolbarShapeErrorFallbackShapeWrapperSharePanelSpinnerStylePanelSvgDefsToastsToolbarTooltipTopPanelUserPresenceEditorVideoToolbarZoomMenu

Properties · 44

A11y?: TLUiComponentSlot

The live region the canvas announces selection changes through.

ActionsMenu?: TLUiComponentSlot

The selection actions menu.

Background?: TLUiComponentSlot

Behind the canvas: the page's backdrop plate.

Canvas?: TLUiComponentSlot

The canvas surface itself. Provided so chrome that has to *wrap* the canvas — a right-click menu, which needs the canvas inside its trigger — can render it in place; read it with useEditorComponents.

CollaboratorCursor?: TLUiComponentSlot<TLCursorSlotProps>

Another person's pointer, drawn in the editor.

ContextMenu?: TLUiComponentSlot

The right-click menu.

CursorChatBubble?: TLUiComponentSlot

The chat bubble on the local cursor.

DebugMenu?: TLUiComponentSlot

The debug menu. Shown only in debug mode.

DebugPanel?: TLUiComponentSlot

The frame-statistics / debug chip.

Dialogs?: TLUiComponentSlot

The dialog stack.

ErrorFallback?: TLUiComponentSlot<TLErrorSlotProps>

Rendered in place of the whole editor once it has thrown.

FollowingIndicator?: TLUiComponentSlot

The banner shown while following another person's camera.

Grid?: TLUiComponentSlot<TLGridProps>

Behind the shapes, in page space: a grid, a guide layer.

Rendered only while the editor is in grid mode (instanceState.isGridMode), and given the camera plus the document's grid step — see TLGridProps. It gets the camera as props rather than reading it itself because it is redrawn on every pan and zoom, and a slot that subscribed to the camera on its own would be a second subscription doing the same work.

HelperButtons?: TLUiComponentSlot

The small helper buttons above the toolbar (e.g. "back to content").

HelpMenu?: TLUiComponentSlot

The help menu.

ImageToolbar?: TLUiComponentSlot

The contextual bar shown for a selected image.

InFrontOfTheCanvas?: TLUiComponentSlot

Above the shapes, in container space: pins, badges, floating bars.

KeyboardShortcutsDialog?: TLUiComponentSlot

The keyboard-shortcuts dialog.

LoadingScreen?: TLUiComponentSlot

Shown while the engine is loading.

MainMenu?: TLUiComponentSlot

The top-left menu.

MenuPanel?: TLUiComponentSlot

The top-left menu plate.

Minimap?: TLUiComponentSlot

The minimap inside the navigation panel.

NavigationPanel?: TLUiComponentSlot

The zoom / navigation cluster.

OnTheCanvas?: TLUiComponentSlot

Behind the shapes, in page space, above the grid.

PageMenu?: TLUiComponentSlot

The page picker.

PeopleMenu?: TLUiComponentSlot

The collaborator list.

PeopleMenuAvatar?: TLUiComponentSlot

One collaborator's avatar.

PeopleMenuFacePile?: TLUiComponentSlot

The stacked avatars on the people menu's trigger.

PeopleMenuItem?: TLUiComponentSlot

One row in the collaborator list.

QuickActions?: TLUiComponentSlot

The quick-actions row.

RichTextToolbar?: TLUiComponentSlot

The formatting bar over a text shape being edited.

ShapeErrorFallback?: TLUiComponentSlot<TLErrorSlotProps>

Rendered in place of one shape whose body has thrown.

ShapeWrapper?: TLUiComponentSlot<TLShapeWrapperSlotProps>

The element a shape's DOM body is rendered into.

SharePanel?: TLUiComponentSlot

The top-right panel: share, collaborators.

Spinner?: TLUiComponentSlot

The indeterminate progress mark.

StylePanel?: TLUiComponentSlot

The style panel for the current selection.

SvgDefs?: TLUiComponentSlot

The document-level <defs> a shape can put a shared gradient in.

Toasts?: TLUiComponentSlot

The toast stack.

Toolbar?: TLUiComponentSlot

The tool bar.

Tooltip?: TLUiComponentSlot

The tooltip layer.

TopPanel?: TLUiComponentSlot

The top strip above the menu panel.

UserPresenceEditor?: TLUiComponentSlot

The local person's name and colour editor.

VideoToolbar?: TLUiComponentSlot

The contextual bar shown for a selected video.

ZoomMenu?: TLUiComponentSlot

The zoom menu inside the navigation panel.

All of @mocanvas/editorGuidesDemos
mocanvas
DocsLicensingmocanvas@symbio.agency

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.