Chrome slot reference

Reference every editor chrome slot and its React and Vue toolbar part across default, contextual, menu, dialog, and header or footer surfaces.

Chrome slots are stable control identifiers. Use fixed-command slots with useEditorCommand(), ContextMenu.Slot, or the generic toolbar button. Use named parts for controls that collect a value or open host UI.

Read the tables

The Toolbar part column gives the shared suffix. For example, Bold means DocxEditor.Toolbar.Bold in React and DocxEditorToolbar.Bold in Vue. An em dash means that neither adapter provides a named part.

The Packaged surface column shows where the standard editor places the control. Explicit composition means that you must add its named part to a custom toolbar.

Use the named part for controls that collect a value or open UI, such as FontColor, TableBorderWidth, or ImageProperties. Use Toolbar.Button in React or DocxEditorToolbar.Button in Vue for a fixed-command slot without a named part:

<DocxEditor.Toolbar.Button slotId="format.painter" />

Toolbar.Button, Menu.Item, and ContextMenu.Slot take the slot ID as slotId (slot-id in Vue templates). The slot prop is deprecated. It still works and logs a development warning.

Use Action for a host-owned action without a registry slot. Use Separator only for layout. Use Group to add controls to the preset toolbar as a group that collapses into the More panel, and Slot to replace one slot with your own content. The Button, Action, Separator, Group, and Slot helpers don't add slot IDs.

History, zoom, styles, and font

SlotPackaged surfaceToolbar partPurpose
history.undoDefault toolbarUndoUndo the last document change
history.redoDefault toolbarRedoRedo the last undone change
zoom.levelDefault toolbarZoomChange the viewport zoom
styles.styleDefault toolbarStylePickerApply a paragraph style
font.familyDefault toolbarFontFamilyChoose a font family
font.sizeDefault toolbarFontSizeChoose a font size

Text and script

SlotPackaged surfaceToolbar partPurpose
text.boldDefault toolbarBoldToggle bold
text.italicDefault toolbarItalicToggle italic
text.underlineDefault toolbarUnderlineToggle underline
text.strikeDefault toolbarStrikeToggle strikethrough
text.colorDefault toolbarFontColorChoose and apply text color
text.highlightDefault toolbarHighlightChoose and apply highlight
text.linkDefault toolbarLinkOpen the link editor
script.superDefault toolbarSuperscriptToggle superscript
script.subDefault toolbarSubscriptToggle subscript

Alignment, direction, lists, and formatting

The default toolbar combines the four alignment slots into Alignment. Use the four Align* parts when you want separate controls.

Alignment slots name a physical edge. In a right-to-left paragraph, alignment.right writes the leading edge, which Word spells w:jc="left". The direction slots set the base direction of each selected paragraph and show a mixed selection as neither pressed.

SlotPackaged surfaceToolbar partPurpose
alignment.leftDefault toolbarAlignment, AlignLeftAlign left
alignment.centerDefault toolbarAlignCenterAlign center
alignment.rightDefault toolbarAlignRightAlign right
alignment.justifyDefault toolbarAlignJustifyJustify
direction.ltrDefault toolbarLeftToRightLeft-to-right paragraph
direction.rtlDefault toolbarRightToLeftRight-to-left paragraph
list.bulletDefault toolbarBulletListToggle a bulleted list
list.numberedDefault toolbarNumberedListToggle a numbered list
list.outdentDefault toolbarOutdentDecrease list indent
list.indentDefault toolbarIndentIncrease list indent
list.lineSpacingDefault toolbarLineSpacingSet line spacing
format.painterDefault toolbar—Copy and apply formatting
format.clearDefault toolbarClearFormattingClear direct formatting
paragraph.dialogFormat menu—Open paragraph settings

Review and content controls

For protection settings, password limits, and command examples, see Document protection.

Comments and reviewer filtering require the Pro review module. Content-control slots require the typed content-control capability. The two surface toggles can be composed anywhere; inspector and remove become enabled when the selection supports them.

SlotPackaged surfaceToolbar partPurpose
review.commentsDefault toolbarCommentsShow or hide the comments and changes pane
review.addCommentContext menuAddCommentStart a comment draft on the selection in the review rail
review.paragraphMarksReview menu—Show paragraph-break marks
review.bookmarksReview menu—Show bracket marks at bookmarks
review.protectDocumentReview menu—Toggle document protection
review.simpleMarkupReview menu—Show the proposed result with change bars
review.allMarkupReview menu—Show all revision markup
review.noMarkupReview menu—Show the proposed result
review.revisionMarkupReview menu—Open Track changes options
review.originalReview menu—Show the original document
review.previousChangeReview menu—Go to the previous change
review.nextChangeReview menu—Go to the next change
review.acceptAllChangesReview menu—Accept all document changes
review.rejectAllChangesReview menu—Reject all document changes
review.authorsReview menuReviewersFilter markup by reviewer
review.editingModeDefault toolbarEditingModeSelect editing or review mode
contentControl.showAllExplicit compositionContentControlShowAllShow content-control boundaries
contentControl.formFillExplicit compositionContentControlFormFillToggle form-fill mode
contentControl.inspectorExplicit compositionContentControlInspectorOpen content-control properties
contentControl.removeExplicit compositionContentControlRemoveRemove the selected control

Images and tables

The toolbar shows image controls when you select an image. It shows table border and fill controls when you place the caret or a cell selection in a table. The Insert menu also provides image and table insertion.

SlotPackaged surfaceToolbar partPurpose
image.insertInsert menu, image contextImageInsertInsert an image
image.propertiesImage contextImagePropertiesOpen image properties
image.wrapImage contextImageWrapChoose text wrapping
image.altTextImage contextImageAltTextEdit alternative text
table.insertInsert menuTableInsertInsert a table of the size picked in a 6×6 grid
table.borderTargetTable contextTableBorderTargetChoose which borders to affect
table.borderColorTable contextTableBorderColorChoose and apply border color
table.borderStyleTable contextTableBorderStyleChoose border style
table.borderWidthTable contextTableBorderWidthChoose border width
table.cellFillTable contextTableCellFillChoose and apply cell fill

File and insert

The packaged menus provide file, break, note, and table-of-contents slots. Header/footer options provide page-field slots.

SlotPackaged surfaceToolbar partPurpose
file.openFile menu—Load a document
file.saveFile menuSaveSave a document
file.exportMarkdownFile > Export—Download continuous Markdown through menu.exporters.markdown
file.exportPdfFile > Export—Download PDF through menu.exporters.pdf
file.printFile menu—Print a PDF from menu.exporters.pdf
file.pageSetupFile menu—Open page setup
insert.textBoxInsert menu—Insert an editable text box anchored to a body paragraph
insert.footnoteInsert menu—Insert a footnote
insert.endnoteInsert menu—Insert an endnote
insert.pageNumberHeader/footer options—Insert the current page number
insert.totalPagesHeader/footer options—Insert the document page count
insert.sectionPagesHeader/footer options—Insert the current section page count
insert.pageXofYHeader/footer options—Insert a Page X of Y field pair
insert.pageBreakInsert menu—Insert a page break
insert.sectionBreakNextPageInsert menu—Start a section on the next page
insert.sectionBreakContinuousInsert menu—Start a section on the current page
insert.tocInsert menu—Insert a table of contents
insert.bookmarkInsert menu—Open the Bookmark dialog
insert.goToBookmarkInsert menu—Open the Bookmarks tab of the navigation pane
insert.watermarkInsert menu—Open the Watermark dialog

Use a slot directly

For a fixed-command slot, useEditorCommand(slot) supplies enabled state, active state, the engine's disabled reason, and execute(). Value and dialog controls also need input from your UI. Pass their complete EditorCommand to useEditorCommand(), or use the packaged part or menu. Handle file.open and file.save with the document loading and saving APIs.

For complete signatures, see the core API reference, React API reference, or Vue API reference.

Next steps