React DOCX viewer
Render a paginated Word document inside a React application, then switch it to editing mode.
Render DOCX files in React and Vue.
Add a React or Vue DOCX viewer with paginated layout and document fonts. Render tables, images, headers, and footers. Add Pro to review comments and tracked changes.
Clinical-policy.docx · Page 1 of 4
Clinical policy
Controlled document
APPROVED
1. Scope
This policy applies to clinical records and approved workflows.
| Owner | Clinical operations |
|---|---|
| Review | 12 months |
Embedded document image and caption
Clinical policy1 / 4
✓Styles
·Tables
·Images
·Headers
Use one DOCX surface for viewing and editing.
Frameworks
React and Vue
Layout
Paginated
Round trip
DOCX output
/ Capabilities
Render Word document structure in React or Vue.
Vue DOCX viewer
Use the Vue adapter with the shared document engine, properties, commands, and DOCX output.
Word-faithful document preview
Render styles, lists, tables, images, content controls (SDTs), headers, and footers. Add Pro for review markup.
/ Implementation
How to build a DOCX viewer in React or Vue.
Use the editor in view mode for a read-only document surface. Keep DOCX bytes available when users need editing.
- 01
Install the React or Vue adapter
Choose the adapter for your application. Both adapters use the shared document engine and DOCX output.
- 02
Load DOCX bytes and configure fonts
Pass the document bytes to the editor. Provide embedded fonts, licensed fonts, or metric-compatible substitutes for accurate wrapping.
- 03
Open editing and review when needed
Start in view mode. Open the document in edit mode, or add Pro for comments, revisions, and suggesting mode.
/ Industry applications
Examples by industry.
You define access, validation, retention, and approval rules. DOCX Editor applies supported document operations.
Contract and evidence preview
Show contracts in your matter or deal workspace while preserving review markup and document layout.
- Preview uploaded contracts
- Show comments and redlines
- Open the file for editing
Clinical document portals
Display forms, letters, and policies inside your application.
- Preview generated letters
- Review formatted policies
- Keep documents inside your application
Procedures and controlled records
Give reviewers a paginated view of procedures and work instructions before approval.
- Review tables and numbered steps
- Display headers and page fields
- Open comments and tracked changes
/ Questions
Common questions
Can I use the viewer in React?+
Yes. The React package renders DOCX files and provides components for your application interface.
Can users edit the preview?+
Yes. The document surface supports read-only, editing, and suggesting modes.
Does the viewer convert DOCX files to PDF?+
No. It renders the DOCX document in the browser and saves DOCX output.
Do comments and tracked changes require Pro?+
Yes. Add the Pro review module to inspect comments, review revisions, and use suggesting mode.
Can I use the DOCX viewer with Next.js?+
Yes. Mount the editor in a client component and load the document after the browser starts.
Do I need Microsoft Word fonts?+
No. Use embedded fonts, licensed font files, or metric-compatible substitutes. Font metrics affect line wrapping and pagination.
Is the React and Vue DOCX viewer open source?+
Yes. The React and Vue editor packages use Apache 2.0. Pro review features use commercial terms.
Add DOCX editing to your application.
Start with the open-source editor. Add commercial review and automation features when your workflow needs them.
More document solutions
DOCX agents
Build AI agents that read, draft, comment, and redline DOCX files through typed document operations. You control the model, tools, permissions, and review steps.
Programmatic document editing API
Read and change Word documents through an Office.js-compatible API. Run these operations in an open editor or against DOCX bytes on a server.