One shared editor
A Word-style ribbon, title bar, File backstage, and status bar live in one web component, with undo/redo, find and replace, zoom, and a read-only mode. Bindings add no UI of their own.
ArchitectureSkip to content.docx editing,
.docx editing,
made embeddable.
A browser Word editor for React, Vue, Angular, Svelte, Solid, and vanilla JavaScript. One document model and one ProseMirror-backed <docx-editor> web component do the work; the framework adapters only wire up lifecycle and events.
install
npm install docx-react-viewerPublished to npm. Each framework package is self-contained: it bundles the editor and brings docx-core with it.
Try it right here.
What exists today.
Print Layout
A paginated view with line breaking, widow/orphan and keep rules, columns, table row splitting, repeating headers, footnote placement, and printing. It is this editor’s own approximation, not Word’s pagination.
Support roadmapDocument structure
Styles, numbered and bulleted lists, tables, sections and columns, headers and footers, footnotes, and fields including TOC. Inline text boxes, a header watermark, and page borders can be inserted.
Outstanding workTracked changes and comments
Track Changes mode, accept and reject, next and previous revision, and a comments pane with replies and resolve. Comments are written back to comments.xml.
Editing textCareful preservation
A no-op save returns the original bytes. Supported edits preserve package parts outside the model, and edits that would damage unsupported content are rejected instead of dropped.
Model and savingLegacy .doc
Word 97-2003 files load through the shared ole2 codecs. Main-body text imports, and constrained edits to existing paragraphs save back as .doc. Formatting and structural changes are rejected.
Support roadmapCollaboration protocol
A transport-neutral protocol exchanges validated ProseMirror steps through an authority, with transient presence. Your application owns networking, identity, permissions, and storage.
CollaborationLocalization
The editor interface ships in English, French, German, Spanish, and Simplified Chinese through one locale option. It translates interface text only, never document content.
BindingsHonest about what is not done.
This is an early implementation. It is not Microsoft Word parity: pagination is approximate, many features are not rendered with Word fidelity, password-protected files are unsupported, and Export DOCX cannot recover content the model omits. The support roadmap and outstanding-work pages list the gaps in detail.
Support roadmapimport { loadDocument } from 'docx-vanilla-viewer';
// Any editor package bundles this loader; it detects DOCX or legacy DOC from the bytes.
const loaded = await loadDocument(bytes);
console.log(loaded.model.blocks.length);
// Returns bytes in the original format. An untouched
// document comes back byte-for-byte; unsafe edits reject.
const output = await loaded.save(loaded.model);Mount an editor in a few lines.
import { useState } from 'react';
import { createDocument } from 'docx-core';
import { WordEditor } from 'docx-react-viewer';
export function Editor() {
const [model, setModel] = useState(() => createDocument());
return (
<WordEditor
documentModel={model}
readOnly={false}
onDocumentChange={setModel}
/>
);
}Build from source
Framework guide: ReactTo run the demos or work on the editor itself, clone the repository. Bun is required.
bun install
bun run demoCommon questions.
Can I install it from npm?+
Yes. docx-core and one self-contained editor package per framework are on npm, for example npm install docx-react-viewer. Each package is versioned on its own. Release policy
Is it free to use commercially?+
The repository is Apache-2.0 licensed.
Is this Word parity?+
No. Pagination is an approximation, many features are not rendered with Word fidelity, and Export DOCX creates a new document from supported visible content. Parity is tracked separately for import, layout, editing, export, preservation, and accessibility. Support roadmap
Do edited files reopen in Word?+
Supported edits are written back into the original package, and unsafe edits reject instead of silently degrading it. That is a design goal checked by regression tests, not a claim of lossless export. Architecture
Which frameworks are supported?+
React, Vue 3, Angular, Svelte 5, SolidJS, and plain JavaScript. They share one editor and model; each adapter only handles mounting, property updates, and event forwarding. Bindings
Does collaboration need a server?+
The protocol is transport-neutral and ships an in-memory reference authority. Networking, authentication, persistence, and permissions are your application’s responsibility. Collaboration
Can it open old .doc files?+
Yes, with limits. Main-body text imports and constrained edits to existing paragraphs save back as .doc; formatting and structural changes are rejected.
What about password-protected files?+
Unsupported today.
.docx in. .docx out.
Read the architecture, pick your framework guide, and try the demo with a document of your own. Apache-2.0 licensed, strict TypeScript, and honest about the gaps.
© 2026 ChristopherVR · Apache-2.0docx-viewer · an early Word editor for the web