Overview

Customize your DOCX editor to fit your application. Start with the contract example, then choose a customization area. Each guide includes a live preview, supported options, and React and Vue reference code.

Design principles

The DOCX editor separates document editing from interface controls. React components use the same editor state and commands as the packaged editor.

Start with the smallest change that fits your application:

• Appearance: Set --doc-* CSS properties on .docx-editor. Use className and data-active to style supported controls.
• Composition: Use DocxEditor.Root, .Toolbar, .Viewport, and .Content to arrange the interface. Keep controls inside Root.
• Individual controls: Use named parts such as DocxEditor.Toolbar.Bold. Replace an icon with icon, or supply your own element through asChild where supported.
• Control sets: Override a toolbar slot in place, use hidden to remove it, or set preset={false} to compose the toolbar.
• Custom behavior: Use useEditorCommand(slotId) for command state and execution. Use useEditorState(selector) for the state your control displays.

Preserve the document selection when you build custom controls. Keep labels, keyboard support, and disabled states accessible. The area guides identify supported parts and show complete examples.

Interface styling changes editor controls. Document styles and fonts change document content and can change pagination.

For the React component API, see Composition and Hooks.

Customization guides

Interface

Review

Document

Choose the API level

Review controls require an EigenPal Pro License. Toolbar, layout, fonts, and labels also work without the review module. For package setup, see Installation. These examples use application arrangements, not packaged visual presets.

For document extensions, see Custom nodes. For shared editing, see Collaboration.

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 preset={false}>
          <DocxEditor.Toolbar.Undo />
          <DocxEditor.Toolbar.Redo />
          <DocxEditor.Toolbar.Bold />
          <DocxEditor.Toolbar.Italic />
          <DocxEditor.Toolbar.EditingMode />
        </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 :preset="false">
        <DocxEditor.Toolbar.Undo />
        <DocxEditor.Toolbar.Redo />
        <DocxEditor.Toolbar.Bold />
        <DocxEditor.Toolbar.Italic />
        <DocxEditor.Toolbar.EditingMode />
      </DocxEditor.Toolbar>
      <DocxEditor.Viewport :style="{ height: '520px' }">
        <DocxEditor.Content />
        <DocxEditor.HyperLink />
        <DocxEditor.ContextMenu />
        <DocxEditorReview />
      </DocxEditor.Viewport>
    </DocxEditor.Root>
  </div>
</template>

More control

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