@p10node/office-engine

View + edit DOCX / XLSX / PPTX directly in the browser. Loads progressively like Google Docs, handles heavy files, one-line React embed, saves back to the original format.

npm · Live demo · Docs

The demo has samples, heavy files (300k-row sheet, 305-slide deck), drag & drop your own file, edit and download.

Real-time collaboration

300k-row XLSX open in the browser

DOCX editor	PPTX editor

Install

bun add @p10node/office-engine   # peer: react >= 18, react-dom >= 18

Usage

import { DocViewer } from '@p10node/office-engine'

<DocViewer src={file} style={{ height: 600 }} />                 // File | Blob | ArrayBuffer | Uint8Array
<DocViewer src="https://cdn.example.com/report.xlsx" />          // URL → Range requests
<DocViewer src={file} editable onSave={(blob, name) => upload(blob, name)} />

CSS is auto-injected. Container must have a height.

Without React:

<script src="office-engine.embed.js"></script>   <!-- dist/, bundles React + worker -->
<office-viewer src="/files/report.docx" style="height:600px"></office-viewer>

Docs

Also online at p10node.github.io/office-engine.

• Features: format coverage, editing, saving, limitations
• API: props, custom views, mount(), <office-viewer>, core API, CSP
• Real-time collaboration
• Development: playground, architecture, demo deploy, release

Features

• Progressive loading: lazy ZIP, HTTP Range requests, streaming XML parser in a Web Worker → UI never blocks
• Virtualized views: only visible pages, cells and slides render
• Editing with a Google Docs-style toolbar: DOCX text, styles, lists, images, tables; XLSX cells, formulas (134 functions), formats, borders, rows/columns, sheets; PPTX text, shapes, images, slides, slideshow
• Fast save: only edited parts are regenerated, everything else keeps its original bytes
• File menu: new, open (also CSV / text / Markdown / HTML), import CSV, rename, download as PDF / HTML / text / CSV, document details, print
• Real-time collaboration: live edits, avatars, collaborators' cursors, offline edits sync on reconnect
• Embed anywhere: React component, hook, vanilla mount(), <office-viewer> web component, single <script> file

Full list, format coverage and limitations: Features.

Measured in headless Chromium on Apple M-series.

License

MIT © p10node