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" /><DocxEditorToolbar.Button slot-id="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
| Slot | Packaged surface | Toolbar part | Purpose |
|---|---|---|---|
history.undo | Default toolbar | Undo | Undo the last document change |
history.redo | Default toolbar | Redo | Redo the last undone change |
zoom.level | Default toolbar | Zoom | Change the viewport zoom |
styles.style | Default toolbar | StylePicker | Apply a paragraph style |
font.family | Default toolbar | FontFamily | Choose a font family |
font.size | Default toolbar | FontSize | Choose a font size |
Text and script
| Slot | Packaged surface | Toolbar part | Purpose |
|---|---|---|---|
text.bold | Default toolbar | Bold | Toggle bold |
text.italic | Default toolbar | Italic | Toggle italic |
text.underline | Default toolbar | Underline | Toggle underline |
text.strike | Default toolbar | Strike | Toggle strikethrough |
text.color | Default toolbar | FontColor | Choose and apply text color |
text.highlight | Default toolbar | Highlight | Choose and apply highlight |
text.link | Default toolbar | Link | Open the link editor |
script.super | Default toolbar | Superscript | Toggle superscript |
script.sub | Default toolbar | Subscript | Toggle 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.
| Slot | Packaged surface | Toolbar part | Purpose |
|---|---|---|---|
alignment.left | Default toolbar | Alignment, AlignLeft | Align left |
alignment.center | Default toolbar | AlignCenter | Align center |
alignment.right | Default toolbar | AlignRight | Align right |
alignment.justify | Default toolbar | AlignJustify | Justify |
direction.ltr | Default toolbar | LeftToRight | Left-to-right paragraph |
direction.rtl | Default toolbar | RightToLeft | Right-to-left paragraph |
list.bullet | Default toolbar | BulletList | Toggle a bulleted list |
list.numbered | Default toolbar | NumberedList | Toggle a numbered list |
list.outdent | Default toolbar | Outdent | Decrease list indent |
list.indent | Default toolbar | Indent | Increase list indent |
list.lineSpacing | Default toolbar | LineSpacing | Set line spacing |
format.painter | Default toolbar | — | Copy and apply formatting |
format.clear | Default toolbar | ClearFormatting | Clear direct formatting |
paragraph.dialog | Format 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.
| Slot | Packaged surface | Toolbar part | Purpose |
|---|---|---|---|
review.comments | Default toolbar | Comments | Show or hide the comments and changes pane |
review.addComment | Context menu | AddComment | Start a comment draft on the selection in the review rail |
review.paragraphMarks | Review menu | — | Show paragraph-break marks |
review.bookmarks | Review menu | — | Show bracket marks at bookmarks |
review.protectDocument | Review menu | — | Toggle document protection |
review.simpleMarkup | Review menu | — | Show the proposed result with change bars |
review.allMarkup | Review menu | — | Show all revision markup |
review.noMarkup | Review menu | — | Show the proposed result |
review.revisionMarkup | Review menu | — | Open Track changes options |
review.original | Review menu | — | Show the original document |
review.previousChange | Review menu | — | Go to the previous change |
review.nextChange | Review menu | — | Go to the next change |
review.acceptAllChanges | Review menu | — | Accept all document changes |
review.rejectAllChanges | Review menu | — | Reject all document changes |
review.authors | Review menu | Reviewers | Filter markup by reviewer |
review.editingMode | Default toolbar | EditingMode | Select editing or review mode |
contentControl.showAll | Explicit composition | ContentControlShowAll | Show content-control boundaries |
contentControl.formFill | Explicit composition | ContentControlFormFill | Toggle form-fill mode |
contentControl.inspector | Explicit composition | ContentControlInspector | Open content-control properties |
contentControl.remove | Explicit composition | ContentControlRemove | Remove 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.
| Slot | Packaged surface | Toolbar part | Purpose |
|---|---|---|---|
image.insert | Insert menu, image context | ImageInsert | Insert an image |
image.properties | Image context | ImageProperties | Open image properties |
image.wrap | Image context | ImageWrap | Choose text wrapping |
image.altText | Image context | ImageAltText | Edit alternative text |
table.insert | Insert menu | TableInsert | Insert a table of the size picked in a 6×6 grid |
table.borderTarget | Table context | TableBorderTarget | Choose which borders to affect |
table.borderColor | Table context | TableBorderColor | Choose and apply border color |
table.borderStyle | Table context | TableBorderStyle | Choose border style |
table.borderWidth | Table context | TableBorderWidth | Choose border width |
table.cellFill | Table context | TableCellFill | Choose 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.
| Slot | Packaged surface | Toolbar part | Purpose |
|---|---|---|---|
file.open | File menu | — | Load a document |
file.save | File menu | Save | Save a document |
file.exportMarkdown | File > Export | — | Download continuous Markdown through menu.exporters.markdown |
file.exportPdf | File > Export | — | Download PDF through menu.exporters.pdf |
file.print | File menu | — | Print a PDF from menu.exporters.pdf |
file.pageSetup | File menu | — | Open page setup |
insert.textBox | Insert menu | — | Insert an editable text box anchored to a body paragraph |
insert.footnote | Insert menu | — | Insert a footnote |
insert.endnote | Insert menu | — | Insert an endnote |
insert.pageNumber | Header/footer options | — | Insert the current page number |
insert.totalPages | Header/footer options | — | Insert the document page count |
insert.sectionPages | Header/footer options | — | Insert the current section page count |
insert.pageXofY | Header/footer options | — | Insert a Page X of Y field pair |
insert.pageBreak | Insert menu | — | Insert a page break |
insert.sectionBreakNextPage | Insert menu | — | Start a section on the next page |
insert.sectionBreakContinuous | Insert menu | — | Start a section on the current page |
insert.toc | Insert menu | — | Insert a table of contents |
insert.bookmark | Insert menu | — | Open the Bookmark dialog |
insert.goToBookmark | Insert menu | — | Open the Bookmarks tab of the navigation pane |
insert.watermark | Insert 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.