@neo-office/renderer

WASM-based Office document renderer for the browser. Parses and renders DOCX, PPTX, and XLSX entirely client-side via WebAssembly — no server required.

Installation

npm install @neo-office/renderer

How It Works

The Rust engine (neo-office-wasm) is compiled to WASM and runs inside a Web Worker so the main thread is never blocked. WorkerClient is the async TypeScript interface to that worker.

Usage

import { WorkerClient } from '@neo-office/renderer';

// Point at the bundled worker file
const workerUrl = new URL('@neo-office/renderer/worker', import.meta.url);
const worker = new Worker(workerUrl, { type: 'module' });
const client = new WorkerClient(worker);

// 1. Initialise the WASM engine
await client.init();

// 2. Load a file
const bytes = new Uint8Array(await file.arrayBuffer());
const docId = await client.loadDocument(bytes);

// 3. Inspect the document
const summary  = await client.openPackage(docId);   // format, part counts
const metadata = await client.getMetadata(docId);    // author, title, …
const parsed   = await client.parseDocument(docId);  // full typed model JSON

// 4. Get page dimensions
const pages = await client.allPageInfo(docId);
// [{ width: 9144000, height: 5143500 }, …]  (EMU units for PPTX)

// 5. Render a page to an ImageData bitmap
const imageData = await client.renderPage(docId, 0, 1280, 720, 0);
// → ImageData — draw directly onto a <canvas>

// 6. Clean up
client.dispose();

API

WorkerClient

| Method | Returns | Description | |---|---|---| | init() | Promise<void> | Load and initialise the WASM engine | | loadDocument(bytes) | Promise<string> | Store raw bytes; returns a document ID | | openPackage(id) | Promise<object> | Format detection and OPC summary | | getMetadata(id) | Promise<object> | Title, author, creation date, … | | parseDocument(id) | Promise<object> | Full OOXML model as JSON | | allPageInfo(id) | Promise<PageInfo[]> | Page/slide dimensions | | layoutDocument(id) | Promise<object> | DOCX page-break layout | | renderPage(id, pageIndex, w, h, priority) | Promise<ImageData> | Rasterise one page via WASM | | cancelRender(reqId) | void | Cancel a pending render | | dispose() | void | Terminate the worker |

PageInfo

interface PageInfo {
  width: number;   // EMU for PPTX, points for DOCX
  height: number;
  name?: string;   // slide name if present
}

Bundler Notes

The worker script at @neo-office/renderer/worker must be served as a separate chunk. With Vite:

new URL('@neo-office/renderer/worker', import.meta.url)
// Vite automatically code-splits this into its own chunk

With webpack use /* webpackChunkName */ or a dynamic import.

License

MIT