Simple Office Viewer (SOV) — React

Client-side, high-fidelity .docx / .xlsx / .pptx viewer for React. Renders entirely in the browser via a .NET WebAssembly engine — no upload, no server round-trip. Rendering runs in a dedicated Web Worker, off the main thread.

This package is a React wrapper around OfficeCLI's WASM rendering engine. All the actual OOXML rendering — parsing, layout, formulas, pivot tables, PowerPoint effects — happens in OfficeCLI; this repo only adds the React component and build wiring around it (via the framework-agnostic @simple-office-viewer/core engine this package depends on, shared with @simple-office-viewer/angular). Full credit for fidelity here belongs to OfficeCLI.

Source, engine-pinning details, and the demo app live at github.com/IoannisMaras/simple-office-viewer.

Install

npm install @simple-office-viewer/react

Unlike the Angular package, there's no ng add-style install schematic here yet — copy node_modules/@simple-office-viewer/core/assets into wherever your bundler serves static files from (e.g. Vite's public/) and point assetsBaseUrl at the resulting public path:

{
  "glob": "**/*",
  "input": "node_modules/@simple-office-viewer/core/assets",
  "output": "office-viewer-assets"
}

Usage

import { useState } from 'react';
import { OfficeViewer } from '@simple-office-viewer/react';

function MyComponent() {
  const [file, setFile] = useState<File | null>(null);

  return (
    <OfficeViewer
      file={file}
      assetsBaseUrl="/office-viewer-assets/"
      style={{ height: 600 }}
      onRendered={() => console.log('rendered')}
      onRenderError={(err) => console.error(err)}
    />
  );
}

assetsBaseUrl defaults to office-viewer-assets/; only pass it if you served the assets somewhere else (a CDN, a different public path, ...).

Optional empty/loading placeholders:

<OfficeViewer
  file={file}
  emptyState={<MyEmptyIcon />}
  loadingState={<AppSpinner />}
/>