Chrome and toolbars

Every piece of UI the SDK draws around the document is optional, and everything those controls do is reachable from the handle. The rule: the SDK owns the document, not your product.

What is optional

Chrome	Prop	Default	Drive it yourself with
Tab strip	`showTabs`	off	`documents`
Title bar	`showTitleBar`	on	`view`
Ribbon	`toolbarMode`	`"native"`	`toolbar`
Editing/Suggesting toggle	`showDocumentModeToggle`	off	`view.setDocumentMode()`
Comments panel	—	—	`view.setCommentsOpen()`

The comments panel has no built-in button at all: comment chips render inline next to the page, and the host opens or closes the panel wherever its own UI calls for it. Set toolbarMode="none", subscribe to toolbar state, and render whatever you like:

const [state, setState] = useState<ReviseToolbarState | null>(null);
const editor = useRef<ReviseEditorHandle | null>(null);

<ReviseEditor
  initialDocuments={docs}
  toolbarMode="none"
  showTitleBar={false}
  onReady={(handle) => {
    editor.current = handle;
    handle.toolbar.subscribe(setState);
  }}
/>;

<button
  aria-pressed={state?.formatting.bold ?? false}
  disabled={!state?.ready}
  onClick={() => editor.current?.toolbar.toggleBold()}
>
  Bold
</button>;

ReviseToolbarState publishes everything a toolbar needs to render itself: ready, readOnly, documentMode, hasSelection, canUndo/canRedo, the formatting marks at the caret, heading, alignment, lineSpacing, fontSizePt, the current blockType, and a review summary.

Subscribe once and let the returned unsubscribe function run on unmount. State is published on every selection change, so buttons stay in sync with the caret without polling.

Clipboard and history

undo, redo, copy, copyAs("plaintext" | "markdown" | "html"), cut, paste, pasteTextOnly, pasteFormattingOnly

Inline formatting

toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleDoubleStrikethrough, toggleSmallCaps, toggleAllCaps, toggleCode, toggleLatex, toggleSuperscript, toggleSubscript, clearFormatting, setFontFamily, setFontSize, setLetterSpacing, setTextColor, setHighlightColor

Paragraph and block

setHeading, setAlignment, setLineSpacing, toggleList, createLink, increaseIndent, decreaseIndent

Insertion

insertTable, insertImage, insertContainer, insertCodeBlock, insertMathBlock, insertDiagram, insertFootnote, insertPageNumber, insertPageBreak, insertSectionBreak

Review

openReview, closeReview, reviewPrevious, reviewNext, acceptCurrent, rejectCurrent, acceptAll, rejectAll, setShowRemovals, setSuggestionViewMode

Commands return false when they cannot apply — read-only documents, no selection, nothing to undo — so you can drive disabled states from the return value as well as from state.

Title, mode, and review

The view controller carries the chrome the title bar used to own:

const { title, documentMode, commentsOpen, reviewOpen, reviewTargetCount } =
  editor.view.getState();

editor.view.setTitle("Master Services Agreement");
editor.view.setDocumentMode("suggesting");
editor.view.setReviewOpen(true);
editor.view.setCommentsOpen(true);

A single Editing/Suggesting button is usually all a host needs:

const suggesting = view?.documentMode === "suggesting";

<button
  data-active={suggesting}
  onClick={() =>
    editor.current?.view.setDocumentMode(suggesting ? "editing" : "suggesting")
  }
>
  {suggesting ? "Suggesting" : "Editing"}
</button>;

Built-in tabs

If you would rather not build a file switcher, turn on the native one:

<ReviseEditor
  showTabs
  onNewTab={() => openBlankDocument()}
  initialDocuments={docs}
/>

Without an onNewTab callback no ”+” button renders — document creation stays the host’s decision.

Focus

The editor takes keyboard focus when a document becomes active. On a page where the editor is one element among many — a preview, a marketing surface, a split view the user did not ask for — turn that off and let a click do it:

<ReviseEditor autoFocus={false} initialDocuments={docs} />

Getting started

Guides

API reference

What is optional

Title, mode, and review

Built-in tabs

Focus

​What is optional

​A host-rendered toolbar

​What the toolbar controller covers

​Title, mode, and review

​Built-in tabs

​Focus

What is optional

A host-rendered toolbar

What the toolbar controller covers

Title, mode, and review

Built-in tabs

Focus