Open-source WYSIWYG DOCX editor for React. Open, edit, and save .docx files entirely in the browser — no server required. Try the live demo.
Installation
npm install @eigenpal/docx-js-editor
Quick Start
import { useRef } from 'react' ; import { DocxEditor , type DocxEditorRef } from '@eigenpal/docx-js-editor' ; import '@eigenpal/docx-js-editor/styles.css' ; function Editor ( { file } : { file : ArrayBuffer } ) { const editorRef = useRef < DocxEditorRef > ( null ) ; const handleSave = async ( ) => { const buffer = await editorRef . current ?. save ( ) ; if ( buffer ) { await fetch ( '/api/documents/1' , { method : 'PUT' , body : buffer } ) ; } } ; return ( < > < button onClick = { handleSave } > Save < DocxEditor ref = { editorRef } documentBuffer = { file } onChange = { ( ) => { } } /> ) ; }
Next.js / SSR: The editor requires the DOM. Use a dynamic import or lazy useEffect load to avoid server-side rendering issues.
Props
Prop Type Default Description documentBuffer ArrayBuffer — .docx file contents to load document Document — Pre-parsed document (alternative to buffer) readOnly boolean false Read-only preview (no caret/selection) showToolbar boolean true Show formatting toolbar showRuler boolean false Show horizontal ruler showZoomControl boolean true Show zoom controls showVariablePanel boolean true Show template variable panel initialZoom number 1.0 Initial zoom level onChange (doc: Document) => void — Called on document change onSave (buffer: ArrayBuffer) => void — Called on save onError (error: Error) => void — Called on error
Ref Methods
const ref = useRef < DocxEditorRef > ( null ) ; await ref . current . save ( ) ; // Returns ArrayBuffer of the .docx ref . current . getDocument ( ) ; // Current document object ref . current . setZoom ( 1.5 ) ; // Set zoom to 150% ref . current . focus ( ) ; // Focus the editor ref . current . scrollToPage ( 3 ) ; // Scroll to page 3 ref . current . print ( ) ; // Print the document
... continue reading