Build a DOCX viewer in JavaScript and TypeScript

Try the viewer

Choose a local Word file, or use the included project brief. Drag across text to select it. The sample uses evaluation mode and displays a watermark.

Open the 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 application's bundler. The SDK includes TypeScript declarations. The complete sample on GitHub contains JavaScript and TypeScript versions, HTML, styles and run instructions. Evaluation needs no license key. SDK on npm · Release archives.

Render your first DOCX file

Give the SDK a DOM container and a File, ArrayBuffer or Uint8Array. For example, inside your file-picker handler:

import { openDocument } from "@onodocs/sdk/browser";
import { createDocument } from "@onodocs/canvas";

const doc = await openDocument(file);
const canvasDocument = createDocument(doc);
const view = canvasDocument.mount(document.querySelector("#pages"), { zoom: "fit-width" });
await view.whenRendered();

The shared helper below adds error handling, replacement, cancellation and cleanup. In TypeScript, use document.querySelector<HTMLElement>("#pages")! when your HTML guarantees that the container exists.

For documents served by your application, fetch the authorized URL and pass its bytes. Check response.ok, forward the cancellation signal to fetch, and retain your application's access controls. See the shared mount helper for that version.

Open a local file

Add a file picker and an empty document host:

<input id="file" type="file" accept=".docx" aria-label="Open Word file">
<div id="pages"></div>

Use the shared mount helper beside this TypeScript module. Each selection releases the previous document:

import { mountDocument } from "./mount";

const input = document.querySelector<HTMLInputElement>("#file")!;
const host = document.querySelector<HTMLElement>("#pages")!;
let stop = () => {};
input.addEventListener("change", () => {
  const file = input.files?.[0];
  input.value = "";
  if (!file) return;
  stop();
  stop = mountDocument(host, file);
});
window.addEventListener("pagehide", event => {
  if (!event.persisted) stop();
});

Give the scrolling area a usable height. Pass error and status callbacks to the helper to display loading feedback. The complete JavaScript and TypeScript sample includes those controls, cancellation, styles and an included document.

Handle loading, cancellation and cleanup

Create a Canvas document from progress.document once to show early pages while layout continues. onProgress reports the stage; progress.document.pages contains the available pages. The page count can change before loading finishes. Show it as a count of available pages rather than a completion percentage.

Each opening operation owns an AbortController. Choosing another file aborts the previous operation and disposes its preview view and completed document. The signal checks prevent an older operation from overwriting the new status. The Cancel button uses the same cleanup path.

The viewer paints nearby pages as you scroll and releases distant canvases. Parsing and the document model still require memory. Large or complex files can therefore take longer, especially on mobile devices.

Call cleanup when removing the viewer. The standalone sample uses pagehide. In a framework, use the component’s cleanup hook. Use the complete React and TypeScript viewer guide, or see the other framework integration examples.

Select and copy text

The SDK view supplies text selection. Drag through the document, or focus it and use Shift with the arrow keys. Use Ctrl+C on Windows and Linux or Command+C on macOS to copy. Selection can span pages and stays intact as you scroll. Application controls such as the file picker keep their normal keyboard behavior.

Use the text-update APIs to fill templates. For supported editing and DOCX saving, use the Editor workflow.

Match the document's fonts

Fonts affect line wrapping, page count and appearance. Embedded document fonts load automatically. For additional fonts, provide browser-accessible font URLs through the SDK's fonts option and ensure you have permission to distribute them. See fonts and deployment.

Compare your representative documents using the same fonts. Rendering can differ from Word. Convert older binary .doc files and RTF to DOCX before loading.

Preview documents without uploading them

The file picker supplies a browser File. The sample parses, lays out and renders the file on the device. It 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. The bundled example document also needs no document download after the application has loaded.

Loading the webpage still downloads scripts and styles. Your application may separately fetch documents or fonts from URLs you configure. For offline use, serve or cache all required assets locally. The SDK verifies commercial licenses locally without contacting a licensing server.

Common integration problems

Nothing appears

Run the sample through its HTTP server, verify that #pages exists, and give the scrolling area a usable height. An HTML file opened directly from disk is not the supported setup.

A local file will not open

Check that it is a supported Word package. Password-protected documents and old .doc files need to be converted or unlocked first. Keep the error visible and let the user choose another file.

Remote loading fails

Check your HTTP response, authentication and CORS configuration. These belong to the application that retrieves the bytes.

The layout differs from Word

Check fonts first, then test a minimal document. Report reproducible differences with the SDK version and a non-confidential sample through GitHub Issues.

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 viewer

Use the view API for scrolling, page coordinates and selection. Explore custom forms, template filling and document workflows, or read the JavaScript and TypeScript integration guide. Commercial licenses remove evaluation notices for your application.

All guides and samples on GitHub