Props

Reference for Vue document props, chrome, emits, slots, and the seven ref methods.

<DocxEditor> supplies the packaged host. This page groups its public props by use. See the Vue API reference for generated signatures.

Document and mount state

Use document for the document source.

Prop	Type	Description
`document`	`DocumentSource`	DOCX bytes, `'blank'`, or a `DocumentHandle`.
`author`	`string`	Author for comments and review commands.
`locale`	`string`	Locale passed to the editor.
`mode`	`'edit' \| 'view' \| 'suggesting'`	Opening mode. The sugar host defaults to `'edit'`.
`zoom`	`number`	Numeric display scale.
`zoomMode`	`ZoomMode \| 'auto'`	Zoom source. `'auto'` fits the page width.

DocumentSource accepts Uint8Array, ArrayBuffer, 'blank', or an existing DocumentHandle. Resolve URLs and paths with useDocxSource().

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
</script>

<template>
  <DocxEditor document="blank" mode="edit" zoom-mode="auto" />
</template>

The sugar host rebuilds for a new document identity. It applies later zoom and zoomMode changes through the editor facade.

Modules

modules registers capability modules when the editor is created.

Prop	Type	Description
`modules`	`readonly EditorModule[]`	Modules registered at construction.

Keep the array identity stable.

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
import { reviewModule } from '@docx-editor.dev/pro/vue';

const modules = [reviewModule()];
</script>

<template>
  <DocxEditor :document="bytes" :modules="modules" author="Jess Lin" />
</template>

The review module makes tracked changes and comments actionable. The Vue Pro entry also exports custom-node chip and context-menu chrome.

Chrome and layout

These props control the packaged frame:

Prop	Type	Description
`chrome`	`boolean`	Toggles the packaged frame.
`menu`	`boolean \| DocxEditorMenuProps`	Toggles or configures the menu bar.
`navigation`	`boolean`	Toggles the navigation pane.
`rulers`	`boolean`	Toggles both packaged rulers.
`hyperlinkPopup`	`boolean`	Toggles the hyperlink popover.
`contextMenu`	`boolean \| DocxEditorContextMenuProps`	Toggles or configures the context menu.
`t`	`(key, params?) => string`	Resolves packaged chrome labels.
`i18n`	`Translations`	Supplies a locale catalog to this editor.

Set chrome to false for the bare document surface. You can then build the frame from the composition primitives.

Appearance

Vue calls the appearance prop colorMode.

Prop	Type	Default	Description
`colorMode`	`'light' \| 'dark' \| 'system'`	`'light'`	Sets the chrome theme.

The document canvas remains faithful to the DOCX file. The setting does not change saved or printed output.

<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor } from '@docx-editor.dev/vue';

const colorMode = ref<'light' | 'dark'>('light');
</script>

<template>
  <button type="button" @click="colorMode = colorMode === 'dark' ? 'light' : 'dark'">
    Toggle theme
  </button>
  <DocxEditor :document="bytes" :color-mode="colorMode" />
</template>

See Dark mode for canvas behavior.

Fonts

fonts supplies bytes for text shaping, line wrapping, and pagination.

Prop	Type	Description
`fonts`	`FontConfiguration \| FontConfigurationFragment \| FontResolver`	Font bytes or an on-demand resolver.

Embedded fonts load from the document. Configured fonts extend that set.

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
import { loadDefaultFonts } from '@docx-editor.dev/fonts';

const fonts = await loadDefaultFonts();

function reportFontError(error: { code: string }) {
  report(error.code);
}
</script>

<template>
  <DocxEditor :document="bytes" :fonts="fonts" @font-error="reportFontError" />
</template>

Use useFonts() to keep a resolver identity stable.

<script setup lang="ts">
import { DocxEditor, useFonts } from '@docx-editor.dev/vue';
import { googleFonts } from '@docx-editor.dev/fonts/google';

const fonts = useFonts(googleFonts());
</script>

<template>
  <DocxEditor :document="bytes" :fonts="fonts" />
</template>

See Fonts and measurement for font sources and on-demand loading.

Title bar customization

Use title and the two named slots to customize the title bar.

API	Type	Description
`title`	`string`	Shows the document name.
`@title-change`	`(title: string) => void`	Enables and receives title editing.
`#titleBarLeft`	slot	Adds host content before the title.
`#titleBarRight`	slot	Adds host content after the title.

<DocxEditor :document="bytes" :title="title" @title-change="title = $event">
  <template #titleBarLeft>
    <MyLogo />
  </template>
  <template #titleBarRight>
    <SaveIndicator :dirty="dirty" />
  </template>
</DocxEditor>

The title becomes editable when you listen for @title-change.

Emits

The sugar host emits these six events:

Emit	Payload	Description
`@ready`	`editor: Editor`	The editor and content mount are ready.
`@change`	`change: DocumentChange`	A document mutation completed.
`@save`	none	The packaged Save action ran.
`@open`	none	The packaged Open action ran.
`@title-change`	`title: string`	The editable title changed.
`@font-error`	`error: EditorFontError`	Font resolution failed.

DocumentChange contains revision and identity changes. It does not contain saved bytes.

<DocxEditor
  :document="bytes"
  title="Proposal.docx"
  @ready="onReady"
  @change="reportChange"
  @save="save"
  @open="open"
  @title-change="title = $event"
  @font-error="reportFontError"
/>

DocxEditorRoot emits ready, change, and font-error. File and title events belong to the sugar host.

Ref methods

Capture a DocxEditorRef for imperative document operations.

<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor, type DocxEditorRef } from '@docx-editor.dev/vue';

const editorRef = ref<DocxEditorRef | null>(null);

async function save() {
  const buffer = await editorRef.value?.save();
  if (buffer) await upload(buffer);
}
</script>

<template>
  <DocxEditor ref="editorRef" :document="bytes" />
</template>

The ref exposes seven methods:

Method	Returns	Description
`load(document)`	`void`	Loads bytes, `'blank'`, or a `DocumentHandle`.
`save()`	`Promise<ArrayBuffer \| null>`	Serializes the current document.
`getDocumentHandle()`	`DocumentHandle \| null`	Returns the current handle and revision.
`getEditor()`	`Editor \| null`	Returns the full editor facade.
`focus()`	`void`	Focuses the mounted document surface.
`exec(command, options?)`	`ExecResult`	Runs a typed command in an optional scope.
`snapshot(options?)`	`EditorSnapshot`	Reads state from an optional scope.

Use exec() for commands that must use the same validation as packaged chrome. Use snapshot() for a synchronous state read.