Layout

Use Root to own the application frame. Give the viewport a height or a flexible parent with min-height: 0.

Place Toolbar before or after Viewport. Omit it for a document-only workspace. Keep HyperLink, ContextMenu, and review controls under the same root.

Add Navigation for headings and search. Keep application panels outside the painted document surface.

Layout options

Compose the DOCX editor with separate document, navigation, review, and application regions. DocxEditor.Root provides the editor instance. It creates no wrapper element.

Give the viewport a bounded height. In a flex or grid layout, set min-height: 0 on the shrinking document region. Keep the viewport's supplied classes. The editor uses them to find its scroll container. The editor calculates navigation and review spacing. Do not replace those calculations with fixed page offsets.

Navigation configuration

The navigation parts include Toggle, Header, Title, Close, Tabs, Tab, Headings, and Find. Use useNavigationPane, useDocumentOutline, and useDocumentSearch for a custom navigation interface. The navigation pane preserves its search query when closed. On narrow viewports, it overlays the page and closes after a heading or search result selection.

Zoom and responsive layout

Opening navigation or review controls can change the available width for a fit mode. Changing zoom does not change stored page dimensions or margins. Use Tracked changes for review column overflow settings.

Root configuration and lifetime

To enable supported field result editing, set fieldResults: 'editable'. Collaboration refuses this mode. See Edit saved field results.

Keep document bytes and font configuration references stable during ordinary application renders. A new instance resets selection and undo history. Use the existing instance's load operation when your application deliberately replaces its document.

React and Vue reference

Pass your DOCX bytes and loaded fonts to this component. The preview uses a fictional contract.

import { DocxEditor, type DocxEditorRootProps } from '@docx-editor.dev/react';
import { reviewModule, DocxEditorReview } from '@docx-editor.dev/pro/react';
import '@docx-editor.dev/core/styles/editor.css';

const modules = [reviewModule()];

export function ContractEditor({
  bytes,
  fonts,
}: {
  bytes: Uint8Array;
  fonts: DocxEditorRootProps['fonts'];
}) {
  return (
    <div className="docx-editor contract-workspace">
      <DocxEditor.Root
        document={bytes}
        fonts={fonts}
        modules={modules}
        author="Demo reviewer"
        mode="suggesting"
        reviewDisplayMode="all-markup"
      >
        <DocxEditor.Toolbar />
        <DocxEditor.Viewport style={{ height: 520 }}>
          <DocxEditor.Content />
          <DocxEditor.HyperLink />
          <DocxEditor.ContextMenu />
          <DocxEditorReview />
        </DocxEditor.Viewport>
      </DocxEditor.Root>
    </div>
  );
}

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
import { reviewModule, DocxEditorReview } from '@docx-editor.dev/pro/vue';
import type { FontConfigurationFragment } from '@docx-editor.dev/vue';
import '@docx-editor.dev/core/styles/editor.css';

defineProps<{ bytes: Uint8Array; fonts: FontConfigurationFragment }>();
const modules = [reviewModule()];
</script>

<template>
  <div class="docx-editor contract-workspace">
    <DocxEditor.Root
      :document="bytes"
      :fonts="fonts"
      :modules="modules"
      author="Demo reviewer"
      mode="suggesting"
      review-display-mode="all-markup"
    >
      <DocxEditor.Toolbar />
      <DocxEditor.Viewport :style="{ height: '520px' }">
        <DocxEditor.Content />
        <DocxEditor.HyperLink />
        <DocxEditor.ContextMenu />
        <DocxEditorReview />
      </DocxEditor.Viewport>
    </DocxEditor.Root>
  </div>
</template>

Add the navigation pane

Place DocxEditor.Navigation as a direct child of DocxEditor.Viewport, or beside the viewport in a positioned container. Inside the viewport, the pane stays in place while the pages scroll. The pane moves the page only when the margin area beside the page cannot hold it. On a narrow viewport, the pane covers the page instead.

While focus is in the editor, Ctrl+F (Cmd+F on macOS) opens the Find tab. To leave the shortcut to the browser, set findShortcut to false.

<DocxEditor.Viewport style={{ height: 520 }}>
  <DocxEditor.Navigation findShortcut={false} />
  <DocxEditor.Content />
  <DocxEditorReview />
</DocxEditor.Viewport>

<DocxEditor.Viewport :style="{ height: '520px' }">
  <DocxEditor.Navigation :find-shortcut="false" />
  <DocxEditor.Content />
  <DocxEditorReview />
</DocxEditor.Viewport>

The navigation pane and the review pane can be open together. The review pane's overflow setting doesn't change the navigation pane, which stays docked at its side in every mode. For more information, see Tracked changes.

More control

See Composition for supported parts, types, and additional examples.