React Office Document Viewer

Open DOCX, XLSX, PPTX, PDF, and other supported documents in React and Next.js without uploading the source file to a conversion service.

Use the framework-independent Viewer in React

DocViewKit exposes a native docviewkit-viewer custom element. React renders that element directly and a ref calls its open(), close(), reveal(), and destroy() methods; no React-specific rendering engine or wrapper package is required.

ConcernReact integration
Document inputPass a File, Blob, ArrayBuffer, or Uint8Array to open().
RenderingThe Viewer parses and renders in browser JavaScript, Workers, and WebAssembly.
PrivacyNormal viewing does not send document bytes to a third-party conversion service.
LifecycleCall close() when replacing a document and destroy() only when permanently removing the Viewer.

React component

sh
npm install @docviewkit/viewer
jsx
import { useEffect, useRef } from 'react';
import '@docviewkit/viewer';

export function OfficeViewer({ file }) {
  const viewer = useRef(null);

  useEffect(() => {
    if (file) void viewer.current?.open(file);
    return () => { void viewer.current?.close(); };
  }, [file]);

  return <docviewkit-viewer ref={viewer} />;
}

Keep the Viewer mounted when switching documents so the host can reuse its initialized runtime. Handle open() errors in the host when the application needs password prompts or task-specific recovery UI.

Next.js client component

The Viewer depends on browser custom-element APIs. In a Next.js App Router project, register it from a client effect so the module is not evaluated during server rendering.

jsx
'use client';

import { useEffect, useRef } from 'react';

export function OfficeViewer({ file }) {
  const viewer = useRef(null);

  useEffect(() => {
    let active = true;
    void import('@docviewkit/viewer').then(() => {
      if (active && file) return viewer.current?.open(file);
    });
    return () => {
      active = false;
      void viewer.current?.close();
    };
  }, [file]);

  return <docviewkit-viewer ref={viewer} />;
}
Self-host production assets

Pin and deploy the Viewer entry, Worker, Wasm, fonts, codecs, and optional format packs together. Do not depend on an unpinned public CDN for production document processing.

Verify the complete integration