# office-engine: 서버 없이 브라우저에서 큰 오피스 파일 열기
# office-engine: opening large Office files in the browser without a server

- Site: https://select1.dev/2026-11-04 (English), https://select1.dev/ko/2026-11-04 (Korean)
- Entry: 025
- Published: 2026-11-04 (KST). Launch date: 2026-11-03
- Pick: office-engine <https://github.com/p10node/office-engine> (source: Show HN)
- Verified: ran
- What: office-engine 은 DOCX, XLSX, PPTX 파일을 브라우저 안에서 열고 편집하는 프로덕트다. 파일을 서버로 보내지 않는다. 큰 파일은 읽은 부분부터 화면에 보여 준다.
- What (en): office-engine is a product that opens and edits DOCX, XLSX and PPTX files inside the browser. Files are not sent to a server. Large files appear on screen as they are read.
- Why: 오늘의 픽으로 선정한 이유는 웹 앱에 문서 편집기를 넣을 때 변환 서버가 필요 없기 때문이다.
- Why (en): It is today’s pick because a web app can embed an Office editor without a conversion server.
- Verdict: 작동한다. 300,000행 XLSX 가 0.23초 안에 열렸다.
- Verdict (en): It works. A 300,000-row XLSX opened within 0.23 seconds.
- Tags: office, xlsx, docx, browser, react, ai-built

## Checked against the README

- [pass] 300,000행 × 12열 XLSX 의 첫 화면은 약 330 ms 에 나타난다(XLSX 300k rows × 12 cols, first paint ~330 ms) — 저장소의 스크립트로 README 측정표에 나온 것과 같은 300,000행 XLSX(24.8 MB)를 만들어, 데모 페이지의 프로덕션 빌드에서 세 번 열었다. 데모는 파일을 열기 시작한 때부터 뷰어가 준비될 때까지 걸린 시간을 표시한다. 그 시간은 156~225 ms 였다
- [unknown] 300,000행 XLSX 의 전체 로딩은 약 2초다(fully loaded ~2s) — 세 번 모두 로딩 표시는 파일이 열린 뒤 4.1~4.4초 만에 사라졌다. README 의 수치는 Apple M 계열 컴퓨터에서 측정한 값이다. 오늘은 4코어 가상 머신에서 측정했다
- [pass] 화면에 보이는 셀만 그린다(2D virtualized grid, only cells in viewport render) — 300,000행 시트를 다 읽은 뒤 표 안의 요소는 829개, 셀 요소는 336개였다. 셀은 모두 360만 개다

## Measured

- 데모 페이지(프로덕션 빌드)가 표시하는 열기 시간. headless Chromium, 4코어 가상 머신, 세 번: XLSX 300,000행 156~225 ms, DOCX 문단 20,000개 93~113 ms, PPTX 305장 68~95 ms (Playwright 로 데모 URL 의 ?src= 파라미터에 시험 파일을 지정해 열고, 화면에 표시된 opened in … ms 를 읽었다)

## 한국어

## 무엇이 문제인가

웹 앱에서 사용자가 올린 Word, Excel, PowerPoint 파일을 보여 주려면 파일을 읽어 화면에 그려야 한다. 행이 수십만 개인 스프레드시트는 끝까지 읽는 데 시간이 오래 걸린다. 다 읽은 뒤에 화면을 그리면 사용자는 그동안 기다려야 한다.

Google Drive 도움말에 따르면 Google Sheets 형식의 스프레드시트는 셀 20,000,000개나 100 MB 를 넘을 수 없다.

## 어떻게 해결했나

office-engine 은 2026년 11월 3일 Hacker News 에 Show HN 글로 올라왔다. 웹 앱에 office-engine 의 React 컴포넌트를 넣으면 DOCX, XLSX, PPTX 를 브라우저에서 열고 편집할 수 있다. 파일은 서버로 보내지 않고 브라우저에서 읽는다.

큰 파일은 끝까지 읽기 전에 화면을 그린다. DOCX, XLSX, PPTX 파일은 여러 XML 파일을 ZIP 으로 묶어 만든다. office-engine 은 그 가운데 화면에 보여 줄 시트나 슬라이드의 XML 파일부터 압축을 풀어 읽는다. XML 은 웹 워커에서 파싱해 화면이 멈추지 않게 한다. 화면에는 보이는 셀과 페이지만 그린다. 제작자에 따르면 저장할 때는 편집한 부분만 다시 생성하고, 나머지 부분은 원본 바이트를 그대로 유지한다.

## 무엇이 다른가

첫째, 파일을 처리하는 곳이 다르다. Google Sheets 에서는 파일을 Google Drive 에 올린 뒤 Sheets 형식으로 변환해 편집한다. office-engine 은 브라우저 안에서 원래 형식 그대로 읽고 저장한다. 트레이드오프는 여는 속도가 사용자 컴퓨터의 성능에 따라 달라진다는 점이다.

둘째, 큰 파일을 여는 방식이 다르다. office-engine 은 파일을 끝까지 읽기 전에도 이미 읽은 행과 문단부터 화면에 보여 준다.

## 어떻게 만들었나

- 커밋 21개는 2026년 11월 2일과 3일에 개발자 한 명이 작성했다. 그중 19개에 Claude 와 함께 작성했다는 Co-authored-by 트레일러가 있다.
- 큰 시험 파일은 저장소에 넣지 않고, Python 스크립트로 만든다.
- Bun 으로 실행하는 테스트와 브라우저에서 실행하는 테스트가 있다.

## 실행해 보니

Bun 1.4.2 로 저장소의 의존성을 설치하고, 4코어 가상 머신의 headless Chromium 에서 데모 페이지를 열었다.

1. 설치. `bun install` 은 3초 만에 끝났다.
2. 시험 파일. 저장소의 Python 스크립트로 300,000행 × 12열 XLSX(24.8 MB), 문단 20,000개 DOCX, 305장 PPTX 를 만드는 데 42초가 걸렸다.
3. 테스트. `bun test` 를 실행하자 127개가 31초 만에 모두 통과했다.
4. 열기. 데모 페이지를 프로덕션 빌드로 띄우고 파일마다 세 번 열었다. 데모는 파일을 열기 시작한 때부터 뷰어가 준비될 때까지 걸린 시간을 표시한다. 그 시간은 300,000행 XLSX 가 156~225 ms, 문단 20,000개 DOCX 가 93~113 ms, 305장 PPTX 가 68~95 ms 였다.
5. 전체 로딩. 300,000행 XLSX 의 로딩 표시는 파일이 열린 뒤 4.1~4.4초 만에 사라졌다. README 의 측정표에서는 같은 크기의 파일을 끝까지 읽는 데 약 2초가 걸렸다. 오늘은 그 두 배쯤 걸렸다. README 의 수치는 Apple M 계열 컴퓨터의 Chromium 에서 측정한 값이다.
6. 화면에 그린 셀. 다 읽은 뒤 표 안에 있는 DOM 요소는 829개, 그 가운데 셀 요소는 336개였다. 셀 3,600,000개 가운데 화면에 보이는 셀만 그렸다.

## 확인하지 못한 것

- 저장. 셀 하나를 편집해 저장한 뒤, 편집하지 않은 부분의 바이트가 원본과 같은지 비교해 보자.
- URL 로 열기. 범위 요청을 지원하는 서버에 큰 XLSX 를 올리고 URL 로 열어, 필요한 부분만 내려받는지 확인하자.

## 판정

작동한다. 300,000행 XLSX 가 0.23초 안에 열렸다. 다만 이 파일을 끝까지 읽는 데는 4초 넘게 걸렸다. 사용자가 올린 오피스 파일을 웹 앱 안에서 바로 보여 줘야 하는 경우에 써 볼 만하다.

### 용어

- 웹 워커: 브라우저에서 화면을 그리는 스레드와 별도의 스레드로 스크립트를 실행하는 기능이다. 오래 걸리는 작업을 맡겨도 화면이 멈추지 않는다.
- headless: 창을 띄우지 않고 브라우저를 실행하는 방식이다. 테스트나 측정을 자동으로 할 때 사용한다.
- 범위 요청: 파일 전체가 아니라 지정한 바이트 구간만 보내 달라는 HTTP 요청이다. 큰 파일의 일부만 내려받을 때 사용한다.

## English

## The problem

To show Word, Excel or PowerPoint files that users upload, a web app has to read them and draw them on screen. A spreadsheet with hundreds of thousands of rows takes a long time to read to the end. If the screen is drawn only after that, the user has to wait.

According to Google Drive Help, a spreadsheet created in or converted to Google Sheets can hold up to 20,000,000 cells or 100 MB.

## How it solves it

office-engine was posted on Hacker News as a Show HN on November 3, 2026. With one React component, a web app can open and edit DOCX, XLSX and PPTX files in the browser. Files are read in the browser, not sent to a server.

Large files appear on screen before they are fully read. A DOCX, XLSX or PPTX file is a ZIP of several XML files. office-engine first unpacks the XML files for the sheets or slides it needs to show. It parses the XML in a web worker so the page does not freeze. Only the cells and pages on screen are drawn. According to the README, saving rebuilds only the edited parts, and the rest keep their original bytes.

## What is different

The first difference is where the file is processed. Google Sheets works on files stored in Google Drive and converted to its own format. office-engine reads and saves the file in its original format inside the browser. The tradeoff is that opening speed depends on the user’s computer.

The second difference is how large files are opened. office-engine shows rows and paragraphs as they are read, instead of reading the whole file first.

## How it was built

- The repository has 21 commits from November 2 and 3, 2026, all by one developer. Of these, 19 have a Co-authored-by trailer for Claude.
- Large test files are not in the repository. A Python script generates them.
- There are tests that run with Bun and tests that run in a browser.

## Running it

I set up the project with Bun 1.4.2 and opened the demo in headless Chromium on a 4-core virtual machine.

1. Install. `bun install` finished in 3 seconds.
2. Test files. The repository’s Python script took 42 seconds to generate a 300,000-row, 12-column XLSX (24.8 MB), a 20,000-paragraph DOCX and a 305-slide PPTX.
3. Tests. All 127 tests passed with `bun test` in 31 seconds.
4. Opening. I served a production build of the demo and opened each file three times. The demo times each file until the viewer sends its ready signal. The 300,000-row XLSX took 156 to 225 ms. The 20,000-paragraph DOCX took 93 to 113 ms, and the 305-slide PPTX took 68 to 95 ms.
5. Full load. The loading label for the 300,000-row XLSX disappeared 4.1 to 4.4 seconds after the file opened. That is roughly twice the README’s figure of about 2 seconds for a file of the same size. The README’s figures were measured in Chromium on an Apple M-series computer.
6. Cells drawn. After loading, the grid held 829 DOM elements, and 336 of them were cells. The file has 3,600,000 cells, but only those on screen were drawn.

## Not checked

- Saving. Edit one cell, save, and compare the unedited parts with the original bytes.
- Opening by URL. Put a large XLSX on a server that supports range requests and open it by URL. Check that only the needed parts are downloaded.

## Verdict

It works. A 300,000-row XLSX opened within 0.23 seconds. But reading the whole file took over 4 seconds. It is worth trying if your web app needs to show Office files that users upload.

### Terms

- web worker: A browser feature that runs a script on a separate thread, so long-running tasks do not freeze the screen.
- headless: Running a browser without opening a window. It is used for automated tests and measurements.
- range request: An HTTP request that asks for a specific byte range of a file instead of the whole file.

## Launches the same day

- Hacker Times <https://hackertimes.ca/> (Show HN, 448): Hacker News 를 New York Times 지면처럼 꾸민 사이트.
- hjkl <https://hjkl.duy.run> (Show HN, 64): Vim 명령 연습 게임. 브라우저에서 Vim 의 이동 키와 명령을 연습한다.
- Rustable <https://rustable.app> (Show HN, 27): 데이터베이스 클라이언트. Rust 로 만들었고 오픈소스다.
- Bema <https://getbema.app/> (Show HN, 24): 업무 메신저. 봇이 아닌 사용자 사이의 대화를 위해 만들었다고 소개한다.
- ReBirth 338 in Browser <https://margeux.com/rb338.html> (Show HN, 24): 음악 프로그램 ReBirth RB-338 을 브라우저에서 실행한다.
- office-engine <https://github.com/p10node/office-engine> (Show HN, 17): 오피스 파일 편집기. DOCX, XLSX, PPTX 를 서버 없이 브라우저에서 열고, 큰 파일은 읽은 부분부터 보여 준다.
- uni-robot-agent <https://github.com/Open-RUA/uni-robot-agent> (GitHub, 118): 로봇 조작 에이전트 하네스. 오픈 모델로 여러 로봇을 같은 방식으로 다룬다고 소개한다.
- open-bot-avatar <https://github.com/DominikScholz/open-bot-avatar> (GitHub, 113): 에이전트 아바타 규격. JSON 으로 정의한 대화형 아바타를 SVG 로 그린다.
- DOPPLERGEIST <https://github.com/1337isnot1337/DOPPLERGEIST> (GitHub, 112): 녹음 위치 추정 도구. 녹음된 항공기 소리의 도플러 변화와 과거 항적을 대조한다.
- AgentKit by Scalekit <https://www.producthunt.com/products/scalekit> (Product Hunt, 305): AI 에이전트용 MCP 게이트웨이. 사용자 대신 외부 서비스에서 작업한다고 소개한다.
- Teamily AI <https://www.producthunt.com/products/teamily-ai-human-ai-social-network> (Product Hunt, 248): 메신저. 사용자가 개인 에이전트, 에이전트 팀과 한 곳에서 대화한다고 소개한다.
- Testifly <https://www.producthunt.com/products/testifly-launch> (Product Hunt, 174): AI 품질 검사 도구. 프롬프트와 유지 보수 없이 앱을 시험한다고 소개한다.

## Getting started

- Steps: bun add @p10node/office-engine ; import { DocViewer } from '@p10node/office-engine'
- Needs: React 18 이상. 저장소를 직접 빌드하려면 Bun 이 필요하다.
- Cost: MIT, 무료.
- Note: 제작자에 따르면 예전 바이너리 형식(.doc, .xls, .ppt)과 암호화된 파일은 열지 못하고, XLSX 의 차트와 피벗 테이블은 아직 편집할 수 없다.