Installation

Install the DOCX editor in React, Next.js, Vite, Remix, Astro, Vue 3, or Nuxt. Styles import, SSR setup, and peer dependency notes.

Requirements: React ^18 || ^19 (React adapter) or Vue ^3.3 (Vue adapter).

Pick a package

The framework adapters pull -core and -i18n in transitively, so for most apps it's one install.

# React
npm install @eigenpal/docx-editor-react

# Vue 3
npm install @eigenpal/docx-editor-vue

# Nuxt 3 & 4 (module wrapping the Vue adapter)
npm install @eigenpal/nuxt-docx-editor

# Headless / server-side (no UI)
npm install @eigenpal/docx-editor-core

# Agent toolkit (layer on top of an adapter)
npm install @eigenpal/docx-editor-agents

Mount it

Import the component and the stylesheet once. documentBuffer takes a File, Blob, ArrayBuffer, or Uint8Array (null mounts an empty document).

import { DocxEditor } from '@eigenpal/docx-editor-react';
import '@eigenpal/docx-editor-react/styles.css';

export default function App() {
  return <DocxEditor documentBuffer={null} />;
}

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

<template>
  <DocxEditor :document-buffer="null" />
</template>

Without the stylesheet the editor works but the toolbar renders unstyled. Its styles are scoped under .ep-root and don't leak into your app.

The editor measures text in the DOM at mount, so it must render client-side. Client-rendered apps (Vite, plain Vue) need nothing special; SSR frameworks need one client-only boundary. Each guide is a complete walkthrough backed by a runnable example:

Next.js

dynamic() with ssr: false; fixes 'window is not defined'.

Vite

Client-rendered React setup with no SSR boundary.

Remix

Mount check + React.lazy.

Astro

React island with client:only.

Nuxt

Official module, SSR-safe by default.

Peer dependencies

ProseMirror packages are peerDependencies to avoid duplicate editor state packages. npm 7+ installs them automatically; strict installers (pnpm with peer auto-install disabled, Yarn PnP) need them explicitly:

npm i prosemirror-commands prosemirror-dropcursor prosemirror-history \
      prosemirror-keymap prosemirror-model prosemirror-state \
      prosemirror-tables prosemirror-transform prosemirror-view

Headless / Node

No editor on screen needed: parseDocx reads a .docx into the document model, and repackDocx writes it back, preserving every part it didn't change.

import { parseDocx, repackDocx } from '@eigenpal/docx-editor-core';

const doc = await parseDocx(buffer);
// ...inspect or mutate the document model...
const out = await repackDocx(doc);

For server-side AI review, see DocxReviewer.

Next steps

Quickstart: load, edit, and save a .docx
Quickstart: AI: add an agent panel in two files
Word fidelity: feature support and round-trip behavior
React props and the API reference