React DOCX viewer
Render a paginated Word document inside a React application, then switch it to editing mode.
Read the guide→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.
Read the guide→Word-faithful document preview
Render styles, lists, tables, images, content controls (SDTs), headers, and footers. Add Pro for review markup.
Read the guide→/ 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.
Legal
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
Healthcare
Clinical document portals
Display forms, letters, and policies inside your application.
- Preview generated letters
- Review formatted policies
- Keep documents inside your application
Quality
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
Markdown Converter
Convert Word (.docx) files to paginated Markdown for agents and retrieval-augmented generation (RAG). Keep page references with body text and read headers and footers separately.
Explore Markdown Converter→PDF converter
Convert DOCX files to PDF on your Node.js server. Use the same fonts and layout settings as the editor to keep page breaks consistent.
Explore PDF converter→Custom UI
Build a DOCX editor interface in React or Vue with your own components and CSS. Replace toolbars, comment threads, and tracked-change controls. Public hooks and chrome slots connect your UI to the editor's state and commands.
Explore Custom UI→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.
Explore DOCX agents→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.
Explore Programmatic document editing API→Collaborative editor
Let several people edit one DOCX file together. Show live carets and selections, keep each person's undo history separate, and merge offline edits after reconnection.
Explore Collaborative editor→