Installation

Install packages

Install one adapter and the engine. Each adapter declares @docx-editor.dev/core as a peer and needs one shared copy.

npm install @docx-editor.dev/react @docx-editor.dev/core

npm install @docx-editor.dev/vue @docx-editor.dev/core

Add optional packages as your app needs them:

Check runtime requirements

Text measurement needs a text shaper. On an older Node.js version the shaper does not start, and the engine reports the Node.js version as the cause. Browser-only apps do not need Node.js.

Add styles and a container

Import the stylesheet once and give the parent a height:

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

export default function App() {
  return (
    <div style={{ height: '100vh' }}>
      <DocxEditor document="blank" />
    </div>
  );
}

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

<template>
  <div style="height: 100vh">
    <DocxEditor document="blank" />
  </div>
</template>

• The stylesheet is required. The Vue stylesheet imports the same core stylesheet that React uses.
• <DocxEditor> fills its parent. A parent without a height collapses, and the editor does not appear.
• Your app does not need Tailwind or an icon font. The precompiled CSS uses the .docx-editor scope.

For a complete load and save flow, see the quickstart.

Choose a framework setup

The editor uses the DOM to measure text, so it renders on the client only. Server-rendered frameworks need a client-only boundary.

Test a canary build

Canary builds publish each night from main when it has unreleased changes that passed CI. They have no support guarantee. Use the canary tag on every @docx-editor.dev package in your app:

npm install @docx-editor.dev/react@canary @docx-editor.dev/core@canary

• A canary version looks like 2.35.0-canary.20261103032300.sha-b20ba9f: next release, UTC build time, and source commit.
• The packages of one canary pin each other to that exact version. Install every package from the same tag.
• Version ranges such as ^2.34.0 never select a canary.

Next steps

• Quickstart: Load, edit, and save a .docx.
• Fonts and measurement: Load fonts for accurate line and page breaks.
• Editing API: Edit documents without a browser.