react-docxodus-viewer

A React component for viewing DOCX documents in the browser, powered by Docxodus. All document processing happens entirely in the browser using WebAssembly - no server required.

Live Demo | Docxodus Engine | npm

Features

• 📄 DOCX to HTML conversion - View Word documents directly in the browser
• 🔄 Web Worker support - Non-blocking conversion in background thread (enabled by default)
• 📊 Progressive loading - Page placeholders show while documents convert
• 📝 Tracked changes - View insertions, deletions, moves, and formatting changes
• 💬 Comments - Multiple rendering modes (endnotes, inline, margin)
• 📑 Pagination - PDF.js-style page view with smooth scrolling
• ⚙️ Customizable - CSS variables for theming, configurable height

Installation

npm install react-docxodus-viewer docxodus

Quick Start

import { DocumentViewer } from 'react-docxodus-viewer';
import 'react-docxodus-viewer/styles.css';

function App() {
  return (
    <DocumentViewer
      placeholder="Select a DOCX file to view"
    />
  );
}

Props

Prop	Type	Default	Description
file	File | null	-	Controlled file input
html	string | null	-	Controlled HTML output
onFileChange	(file: File | null) => void	-	Called when file changes
onConversionComplete	(html: string) => void	-	Called when conversion finishes
onError	(error: Error) => void	-	Called on conversion error
settings	ViewerSettings	-	Controlled viewer settings
defaultSettings	Partial<ViewerSettings>	-	Initial settings (uncontrolled)
toolbar	'top' | 'bottom' | 'none'	'top'	Toolbar position
showSettingsButton	boolean	true	Show settings gear icon
showRevisionsTab	boolean	true	Show tracked changes tab
placeholder	string	'Open a DOCX file to view'	Empty state message
useWorker	boolean	true	Use Web Worker for conversion
wasmBasePath	string	-	Custom WASM file location
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles

Viewer Settings

interface ViewerSettings {
  commentMode: 'disabled' | 'endnote' | 'inline' | 'margin';
  annotationMode: 'disabled' | 'above' | 'inline' | 'tooltip' | 'none';
  paginationScale: number; // 0.3 - 2.0
  showPageNumbers: boolean;
  renderFootnotesAndEndnotes: boolean;
  renderHeadersAndFooters: boolean;
  renderTrackedChanges: boolean;
  showDeletedContent: boolean;
  renderMoveOperations: boolean;
}

CSS Customization

Override CSS variables to customize the viewer:

.rdv-viewer {
  /* Height constraints */
  --rdv-height: 80vh;
  --rdv-min-height: 400px;
  --rdv-max-height: 90vh;

  /* Colors */
  --rdv-background: #525659;
  --rdv-toolbar-bg: #323639;
  --rdv-btn-bg: #474c50;
  --rdv-btn-color: #d4d4d4;
}

Controlled Mode

For full control over state:

function ControlledViewer() {
  const [file, setFile] = useState<File | null>(null);
  const [html, setHtml] = useState<string | null>(null);

  return (
    <DocumentViewer
      file={file}
      html={html}
      onFileChange={setFile}
      onConversionComplete={setHtml}
    />
  );
}

Browser Support

• Chrome 89+
• Firefox 89+
• Safari 15+
• Edge 89+

Requires WebAssembly SIMD support.

Privacy

All document processing happens locally in your browser. Files are never uploaded to any server.

Related

• Docxodus - The WebAssembly engine powering this viewer
• Live Demo - Try it out

License

MIT