Installation — docx-editor Docs | DOCX Editor for React and Vue

Pick a package

Five packages, install what you need. 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
 
# 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

React frameworks

Next.js (App Router)

ProseMirror touches the DOM at mount, so the editor renders client-side. Mark the file "use client":

// app/editor/page.tsx
"use client";
 
import { DocxEditor } from "@eigenpal/docx-editor-react";
import "@eigenpal/docx-editor-react/styles.css";
 
export default function Page() {
  return <DocxEditor documentBuffer={null} />;
}

Wrap the page in a server component if you want the chrome (nav, footer) to SSR; only the editor itself needs "use client". React 19 + Next 15+: no extra config.

Runnable example: examples/nextjs.

Vite

Vite is plain client-rendered React. No SSR caveat.

// src/App.tsx
import { DocxEditor } from "@eigenpal/docx-editor-react";
import "@eigenpal/docx-editor-react/styles.css";
 
export default function App() {
  return <DocxEditor documentBuffer={null} />;
}

Runnable example: examples/vite.

Remix

Same constraint as Next. Render the editor inside a route module client-side, or use Remix's <ClientOnly> helper.

Runnable example: examples/remix.

Astro

React island with client:only="react":

---
import EditorIsland from "./EditorIsland.tsx";
---
<EditorIsland client:only="react" />

client:only skips Astro's SSR step for the island, which is what you want here.

Runnable example: examples/astro.

Vue 3

<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>

Same props as React, same dialogs, same plugin API. See the Vue page for the parity contract.

Runnable example: examples/vue.

Headless / Node

Skip the adapter when you don't need an editor on the page:

import { parseDocx, serializeDocx } from "@eigenpal/docx-editor-core";
 
const tree = await parseDocx(buffer);
// ...mutate the tree...
const outBuffer = await serializeDocx(tree);

For server-side AI review, layer @eigenpal/docx-editor-agents on top:

import { DocxReviewer } from "@eigenpal/docx-editor-agents";
 
const reviewer = await DocxReviewer.fromBuffer(buffer);
await reviewer.addComment({ paraId: "...", text: "..." });

CSS

Each adapter ships a CSS bundle at <pkg>/styles.css. Import once:

import "@eigenpal/docx-editor-react/styles.css";
// or
import "@eigenpal/docx-editor-vue/styles.css";

The editor's styles are scoped (.docx-editor-root and below), so they don't collide with Tailwind utilities or your app's CSS.