Build a React Word document viewer with TypeScript

Try the React DOCX viewer

Open a local Word file, or use the included project brief. Try replacing a document during loading, cancelling a large file, and hiding then showing the viewer. Drag over text to select it and use Ctrl+C or Command+C to copy. This example uses evaluation mode with the SDK watermark.

Open the React viewer in a full tab. The complete source is linked below.

Install the SDK

npm install @onodocs/sdk @onodocs/canvas

Use matching SDK and Canvas releases with your React dependencies and bundler. TypeScript declarations are included. The complete React sample includes dependencies, styles and run instructions. Evaluation needs no license key. SDK on npm · Release archives.

Use the viewer component

Copy DocxViewer.tsx and its styles into your application. The component accepts a File, ArrayBuffer or Uint8Array and an optional licenseKey.

import { DocxViewer } from "./DocxViewer";

<DocxViewer source={file} />

file is the selected document. The component opens it after mounting, reports progress and errors, and releases it on replacement or unmount. Keep the source object stable until you intend to open another document. The Next.js sample shows a smaller component using the shared mount helper.

Connect a file picker

import { useState } from "react";
import { DocxViewer } from "./DocxViewer";
import "./style.css";

export function App() {
  const [file, setFile] = useState<File | null>(null);
  return <>
    <header><label>Open Word file <input type="file" accept=".docx" onChange={event => {
      const selected = event.currentTarget.files?.[0];
      event.currentTarget.value = "";
      if (selected) setFile(selected);
    }} /></label></header>
    {file && <DocxViewer source={file} />}
  </>;
}

Changing file replaces the document. The complete application also includes a sample document and controls for hiding and showing the viewer. Local files need no document loader or upload endpoint.

Handle replacement, cancellation and unmounting

Each effect invocation creates a separate abort controller and keeps references to its preview view and completed document. When source or licenseKey changes, cleanup aborts the previous operation and releases its resources. Cleanup also runs on unmount. A document that completes after cancellation is disposed immediately, and aborted operations cannot overwrite the current status.

The Cancel button uses that same cleanup function and leaves the controls available for another file. A rejected load displays an error and releases any preview. The user can then choose another document.

Progress reports stages and available pages, not a percentage. Early page boundaries can change as layout settles. The completed viewer retains canvases near the viewport, but the document model still consumes memory proportional to the content. Mobile devices can take longer to open large documents.

Keep React Strict Mode enabled

React runs an extra effect setup and cleanup cycle in development when Strict Mode is enabled. Each effect invocation has its own abort controller, so cleanup cancels only that invocation’s load. A “run once” ref that suppresses the second setup can leave the viewer empty after cleanup.

The public sample wraps its root in StrictMode. The local development build runs this extra cycle. The production demo uses React's production build. See React's documentation for effect dependencies and cleanup and Strict Mode.

Use the component in Next.js

The viewer begins with "use client" and imports the browser SDK inside its effect. Document loading starts after mounting, while Next.js can still render the initial page on the server. Keep local File values in client state.

"use client";
import { DocxViewer } from "./DocxViewer";

export function Preview({ file }: { file: File }) {
  return <DocxViewer source={file} />;
}

See the complete Next.js application and helper-based integration. For a remote document, fetch its authorized URL with cancellation and pass the bytes, or use the shared mount helper. Your server owns access control and CORS.

Local processing, evaluation and commercial use

Selected documents are parsed, laid out and rendered in the browser. This sample does not upload document contents or filenames or call an AI service. The hosted demo records usage events only with your consent, as described in our privacy policy. The downloadable sample and SDK contain no analytics. Loading the app still downloads JavaScript and CSS. Remote documents and fonts require separate requests. Cache all required assets if your application must work offline.

Evaluation is registration-free and adds a watermark. Supply an issued signed token through licenseKey for a trial or licensed application. Verification happens offline. The license key issued by OnoDocs can be included in your application bundle. Browser verification requires HTTPS or localhost. Sample code and authored documents are MIT-licensed. Editor code is also MIT-licensed. SDK and Canvas use the commercial application license.

Common React integration problems

The document keeps reopening

Do not create a new source byte array in every render. Store it in state, keep a module-level sample, or memoize it from stable inputs. The effect reloads whenever its source identity or license changes.

The viewer is blank or cannot scroll

Give its parent a height and allow the viewport to shrink with min-height: 0. Keep the SDK host empty in your JSX; do not render React children into it.

The layout differs from Word

Check the document's fonts. See font setup and deployment. Rendering can differ from Word. Report differences with minimal fictional examples in GitHub Issues.

A file fails to load

Supported packages include DOCX, DOCM, DOTX and DOTM. Macros are not executed. Password-protected documents and older DOC or RTF files need to be unlocked or converted first. For supported editing and DOCX saving, use the Editor workflow.

Read content without rendering

Use the JavaScript and TypeScript text and table extraction guide to produce JSON from Word content in the browser or Node.js.

Build on the React viewer

Read the JavaScript and TypeScript viewer guide for a framework-free version. Explore view APIs, text and table queries, and forms and template workflows. All guides and runnable samples are on GitHub.