I made a React component that opens and edits DOCX / XLSX / PPTX in the browser. 300k-row sheet in ~300ms, no server, MIT
Repo: p10node/office-engine
Demo (drag your own file in): p10node.github.io
Why: I needed "customer uploads an XLSX, fix a few cells, save it back" inside a React app. OnlyOffice / Collabora mean running a document server in Docker and an iframe talking to it, and a big sheet still sits on a spinner while the server converts it. docx-preview / SheetJS + a grid are view-only or block the main thread on a 20 MB file. Nothing in between, so I built it.
Usage:
import { DocViewer } from '@p10node/office-engine'
<DocViewer src={file} style={{ height: 600 }} />
<DocViewer src="cdn.example.com" />
<DocViewer src={file} editable onSave={(blob, name) => upload(blob, name)} />
src takes File / Blob / ArrayBuffer / URL. CSS is auto-injected, the container just needs a height. There's also a useDocument hook if you want to render your own UI, a vanilla mount(), an <office-viewer> web component, and a single script build.
What makes it not choke on big files:
- ZIP read lazily, HTTP Range requests from a URL, so first rows show before the file finishes downloading
- Streaming XML parser in a Web Worker, main thread only gets rows / paragraphs / slides as they arrive
- Only visible pages, cells, slides are in the DOM
- Save patches the original file instead of re-exporting it, so anything the engine doesn't understand is kept byte for byte
Bundle (gzip): main ~93 KB, worker ~155 KB (loads off the main thread), collab +17 KB optional. The standalone script with React bundled is ~307 KB.
Editing: DOCX text / styles / lists / images / tables, XLSX cells / formulas (134 functions) / formats / rows / columns / sheets, PPTX text / shapes / images / slides. Google Docs style toolbar. Optional real-time collab with cursors; that's the only part needing a backend (a small WebSocket hub, Bun script included).
Not there yet: XLSX charts / pivots / conditional formatting editing, DOCX headers / footers read-only, no PPTX animations. It needs the DOM and a Worker, so in Next.js use a client component / dynamic import with ssr: false.
Fair warning: it's a few days old and a lot of it was written with Claude Code, with me doing architecture, review and the bug hunting on real files. If you throw a file at it and it breaks, open an issue with the file, that's the fastest way it gets fixed.
78 points · 27 comments
I made a React component that opens and edits DOCX / XLSX / PPTX in the browser. 300k-row sheet in ~300ms, no server, MIT
Repo: p10node/office-engine
Demo (drag your own file in): p10node.github.io
Why: I needed "customer uploads an XLSX, fix a few cells, save it back" inside a React app. OnlyOffice / Collabora mean running a document server in Docker and an iframe talking to it, and a big sheet still sits on a spinner while the server converts it. docx-preview / SheetJS + a grid are view-only or block the main thread on a 20 MB file. Nothing in between, so I built it.
Usage:
import { DocViewer } from '@p10node/office-engine'
<DocViewer src={file} style={{ height: 600 }} />
<DocViewer src="cdn.example.com" />
<DocViewer src={file} editable onSave={(blob, name) => upload(blob, name)} />
src takes File / Blob / ArrayBuffer / URL. CSS is auto-injected, the container just needs a height. There's also a useDocument hook if you want to render your own UI, a vanilla mount(), an <office-viewer> web component, and a single script build.
What makes it not choke on big files:
- ZIP read lazily, HTTP Range requests from a URL, so first rows show before the file finishes downloading
- Streaming XML parser in a Web Worker, main thread only gets rows / paragraphs / slides as they arrive
- Only visible pages, cells, slides are in the DOM
- Save patches the original file instead of re-exporting it, so anything the engine doesn't understand is kept byte for byte
Bundle (gzip): main ~93 KB, worker ~155 KB (loads off the main thread), collab +17 KB optional. The standalone script with React bundled is ~307 KB.
Editing: DOCX text / styles / lists / images / tables, XLSX cells / formulas (134 functions) / formats / rows / columns / sheets, PPTX text / shapes / images / slides. Google Docs style toolbar. Optional real-time collab with cursors; that's the only part needing a backend (a small WebSocket hub, Bun script included).
Not there yet: XLSX charts / pivots / conditional formatting editing, DOCX headers / footers read-only, no PPTX animations. It needs the DOM and a Worker, so in Next.js use a client component / dynamic import with ssr: false.
Fair warning: it's a few days old and a lot of it was written with Claude Code, with me doing architecture, review and the bug hunting on real files. If you throw a file at it and it breaks, open an issue with the file, that's the fastest way it gets fixed.
3 points
300k 行的 XLSX
直接在浏览器里打开
首屏大概 330ms
这个 office-engine 是新仓库
不是把文件先传到服务器再等结果
用 Range 请求和 Web Worker 慢慢读
我更想拿它处理客户发来的大表
但 README 里的速度是在 Apple M 系列上测的
换到普通 Windows 机器别直接照抄这个数字
p10node/office-engine
31 views
Show HN: Open a 300k-row XLSX in the browser in ~300ms, no server
17 points · 2 comments
I built an open-source engine that opens DOCX / XLSX / PPTX right in the browser 🚀
300k-row spreadsheet → first paint in ~300ms
Edit, collaborate in real time, save back to the original file
One-line React embed. MIT.
p10node/office-engine t.co
3 likes · 2 reposts · 286 views
マウス操作やコンテキスト認識AIに対応した便利なKubernetes用ターミナルUIツールっぽい
クラスター管理の効率化にすごく使えそうかな
yug1224 starred p10node/k10s
p10node/k10s
60 views
マウス操作やコンテキスト認識AIに対応した便利なKubernetes用ターミナルUIツールっぽい
クラスター管理の効率化にすごく使えそうかな
yug1224 starred p10node/k10s
p10node/k10s
2 likes
GitHub - p10node/k10s: Kubernetes TUI you can click. Instant search, logs/exec/port-forward, 7 themes, context-aware AI. Single Go binary.
p10node/k10s
Kubernetesをターミナルで管理できるTUIツール。k9sという同様のTUIツールを参考にさらに発展したので+1してk10sとなった模様。Go実装
1 like
K10s – A Clickable Kubernetes TUI (Go, Bubble Tea) p10node/k10s
23 views
Mentions
I made a React component that opens and edits DOCX / XLSX / PPTX in the browser. 300k-row sheet in ~300ms, no server, MIT Repo: p10node/office-engine Demo (drag your own file in): p10node.github.io Why: I needed "customer uploads an XLSX, fix a few cells, save it back" inside a React app. OnlyOffice / Collabora mean running a document server in Docker and an iframe talking to it, and a big sheet still sits on a spinner while the server converts it. docx-preview / SheetJS + a grid are view-only or block the main thread on a 20 MB file. Nothing in between, so I built it. Usage: import { DocViewer } from '@p10node/office-engine' <DocViewer src={file} style={{ height: 600 }} /> <DocViewer src="cdn.example.com" /> <DocViewer src={file} editable onSave={(blob, name) => upload(blob, name)} /> src takes File / Blob / ArrayBuffer / URL. CSS is auto-injected, the container just needs a height. There's also a useDocument hook if you want to render your own UI, a vanilla mount(), an <office-viewer> web component, and a single script build. What makes it not choke on big files: - ZIP read lazily, HTTP Range requests from a URL, so first rows show before the file finishes downloading - Streaming XML parser in a Web Worker, main thread only gets rows / paragraphs / slides as they arrive - Only visible pages, cells, slides are in the DOM - Save patches the original file instead of re-exporting it, so anything the engine doesn't understand is kept byte for byte Bundle (gzip): main ~93 KB, worker ~155 KB (loads off the main thread), collab +17 KB optional. The standalone script with React bundled is ~307 KB. Editing: DOCX text / styles / lists / images / tables, XLSX cells / formulas (134 functions) / formats / rows / columns / sheets, PPTX text / shapes / images / slides. Google Docs style toolbar. Optional real-time collab with cursors; that's the only part needing a backend (a small WebSocket hub, Bun script included). Not there yet: XLSX charts / pivots / conditional formatting editing, DOCX headers / footers read-only, no PPTX animations. It needs the DOM and a Worker, so in Next.js use a client component / dynamic import with ssr: false. Fair warning: it's a few days old and a lot of it was written with Claude Code, with me doing architecture, review and the bug hunting on real files. If you throw a file at it and it breaks, open an issue with the file, that's the fastest way it gets fixed.
I made a React component that opens and edits DOCX / XLSX / PPTX in the browser. 300k-row sheet in ~300ms, no server, MIT Repo: p10node/office-engine Demo (drag your own file in): p10node.github.io Why: I needed "customer uploads an XLSX, fix a few cells, save it back" inside a React app. OnlyOffice / Collabora mean running a document server in Docker and an iframe talking to it, and a big sheet still sits on a spinner while the server converts it. docx-preview / SheetJS + a grid are view-only or block the main thread on a 20 MB file. Nothing in between, so I built it. Usage: import { DocViewer } from '@p10node/office-engine' <DocViewer src={file} style={{ height: 600 }} /> <DocViewer src="cdn.example.com" /> <DocViewer src={file} editable onSave={(blob, name) => upload(blob, name)} /> src takes File / Blob / ArrayBuffer / URL. CSS is auto-injected, the container just needs a height. There's also a useDocument hook if you want to render your own UI, a vanilla mount(), an <office-viewer> web component, and a single script build. What makes it not choke on big files: - ZIP read lazily, HTTP Range requests from a URL, so first rows show before the file finishes downloading - Streaming XML parser in a Web Worker, main thread only gets rows / paragraphs / slides as they arrive - Only visible pages, cells, slides are in the DOM - Save patches the original file instead of re-exporting it, so anything the engine doesn't understand is kept byte for byte Bundle (gzip): main ~93 KB, worker ~155 KB (loads off the main thread), collab +17 KB optional. The standalone script with React bundled is ~307 KB. Editing: DOCX text / styles / lists / images / tables, XLSX cells / formulas (134 functions) / formats / rows / columns / sheets, PPTX text / shapes / images / slides. Google Docs style toolbar. Optional real-time collab with cursors; that's the only part needing a backend (a small WebSocket hub, Bun script included). Not there yet: XLSX charts / pivots / conditional formatting editing, DOCX headers / footers read-only, no PPTX animations. It needs the DOM and a Worker, so in Next.js use a client component / dynamic import with ssr: false. Fair warning: it's a few days old and a lot of it was written with Claude Code, with me doing architecture, review and the bug hunting on real files. If you throw a file at it and it breaks, open an issue with the file, that's the fastest way it gets fixed.
300k 行的 XLSX 直接在浏览器里打开 首屏大概 330ms 这个 office-engine 是新仓库 不是把文件先传到服务器再等结果 用 Range 请求和 Web Worker 慢慢读 我更想拿它处理客户发来的大表 但 README 里的速度是在 Apple M 系列上测的 换到普通 Windows 机器别直接照抄这个数字 p10node/office-engine
Show HN: Open a 300k-row XLSX in the browser in ~300ms, no server
I built an open-source engine that opens DOCX / XLSX / PPTX right in the browser 🚀 300k-row spreadsheet → first paint in ~300ms Edit, collaborate in real time, save back to the original file One-line React embed. MIT. p10node/office-engine t.co
マウス操作やコンテキスト認識AIに対応した便利なKubernetes用ターミナルUIツールっぽい クラスター管理の効率化にすごく使えそうかな yug1224 starred p10node/k10s p10node/k10s
マウス操作やコンテキスト認識AIに対応した便利なKubernetes用ターミナルUIツールっぽい クラスター管理の効率化にすごく使えそうかな yug1224 starred p10node/k10s p10node/k10s
GitHub - p10node/k10s: Kubernetes TUI you can click. Instant search, logs/exec/port-forward, 7 themes, context-aware AI. Single Go binary. p10node/k10s
Kubernetesをターミナルで管理できるTUIツール。k9sという同様のTUIツールを参考にさらに発展したので+1してk10sとなった模様。Go実装
K10s – A Clickable Kubernetes TUI (Go, Bubble Tea) p10node/k10s