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.
Architecture →Skip to content.docx editing,
Early implementation · Apache-2.0 · TypeScript
.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.
Live demo
Try it right here.
This is the real editor running in your browser: the demo app built from this repository for each framework adapter, embedded live. Open the sample document, or split the view to see two local peers share one document.
Features
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 roadmap →Document 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 work →Tracked 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 text →Careful 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 saving →Legacy .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 roadmap →Collaboration protocol
A transport-neutral protocol exchanges validated ProseMirror steps through an authority, with transient presence. Your application owns networking, identity, permissions, and storage.
Collaboration →Localization
The editor interface ships in English, French, German, Spanish, and Simplified Chinese through one locale option. It translates interface text only, never document content.
Bindings →Status
Honest 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 roadmap →import { 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);Getting started
Mount an editor in a few lines.
Every adapter mounts the same <docx-editor>. Pass a document model, listen for changes, and give the container a height.
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: React →To run the demos or work on the editor itself, clone the repository. Bun is required.
bun install
bun run demoFAQ
Common 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.
Get started
.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