Silurus/ooxml: Pixel-faithful Office documents, rendered in the browser

Who Should Read

브라우저에서 Office 문서 미리보기 기능을 구현해야 하는 프론트엔드/풀스택 개발자, 또는 LLM 파이프라인에서 Office 파일을 이미지로 변환해 처리하고 싶은 AI 서비스 개발자.

Core Mechanics

• DOCX, XLSX, PPTX 세 가지 Office 포맷을 브라우저의 Canvas 2D API로 직접 렌더링한다. 서버 사이드 변환 없이 클라이언트에서 완전히 처리된다.
• 파서는 Rust로 작성된 후 WebAssembly로 컴파일된다. 번들 크기는 docx 458KB(gzip 217KB), pptx 574KB(gzip 253KB), xlsx 601KB(gzip 269KB)로 예상보다 작다.
• 포맷별로 독립된 wasm 번들로 분리되어 있어서, 필요한 포맷만 import하면 나머지는 tree-shake된다. 예를 들어 `@silurus/ooxml/pptx`만 import하면 docx/xlsx 관련 번들은 포함되지 않는다.
• MathJax + STIX Two Math 수식 엔진이 옵션으로 제공되며 약 3MB인데, 이건 별도 엔트리(`@silurus/ooxml/math`)로 분리되어 있어서 사용하지 않으면 번들에 포함되지 않는다.
• headless 엔진(DocxDocument / XlsxWorkbook / PptxPresentation)을 직접 사용할 수 있어서, 빌트인 뷰어 UI에 종속되지 않고 스크롤 뷰, 썸네일 그리드, master-detail 패널 등 원하는 UI를 직접 구성할 수 있다.
• Vite에서는 `vite-plugin-wasm`, webpack에서는 `experiments.asyncWebAssembly` 설정이 필요하다.
• 이 프로젝트의 코드 전체(Rust 파서, TypeScript 렌더러, 테스트, 툴링)가 Claude(Anthropic)를 통해 반복적인 프롬프팅으로 작성됐으며, 사람이 직접 작성한 애플리케이션 코드는 없다고 README에 명시되어 있다.

Evidence

• 'pixel-faithful'이라는 제목이 과장됐다는 지적이 있었다. PPTX에서 슬라이드 이미지 배경, 불릿 포인트 이미지가 실제로 동작하지 않고 일부 텍스트 색상이 반전되는 등 현재 상태와 제목 간 괴리가 있다는 의견이 나왔다.
• 실제로 내부 테스트 파일에 돌려봤더니 전부 실패했다는 경험담도 있었고, 복잡한 Word 문서에서는 렌더링이 심하게 틀렸다는 의견도 있었다. 반면 컨설팅 회사들의 공개 PPTX 파일을 테스트해봤더니 pixel-perfect하진 않지만 레이아웃이 읽기에 충분히 좋았다는 긍정적인 경험도 있었다.
• 지난주에 '브라우저에서 Office 파일 미리보기' 문제를 직접 겪었던 개발자가 결국 서버에서 headless LibreOffice로 PDF 변환하는 방식으로 해결했다고 공유했다. 이 라이브러리와 비교하면 PPTX/DOCX는 LibreOffice 변환이 약간 우세하지만(텍스트 선택 가능), XLSX 미리보기는 AI 코딩된 것치고 인터랙티브하게 잘 동작해서 놀랐다고 했다.
• Office 문서의 pixel-perfect 렌더링이 실제로 얼마나 중요한지에 대한 맥락이 공유됐다. 수십 년 된 Word 템플릿을 쓰는 기업들이 LibreOffice에서 딱 두 픽셀 어긋나는 문제 때문에 120페이지 문서 전체 레이아웃이 틀어지는 상황을 겪고, 그 이유로 Microsoft 365 구독을 계속 유지한다는 것이다.
• LLM 파이프라인 활용 가능성에 대한 의견도 있었다. PowerPoint 파일을 이미지로 렌더링하면 LLM이 이해하기 좋고, Cloudflare Workers 환경에서 돌려서 Office 파일을 이미지로 변환 → OCR → Markdown 파이프라인을 저렴하게 구성할 수 있지 않겠냐는 아이디어가 나왔다.

How to Apply

• 브라우저에서 XLSX 파일 미리보기가 필요한 경우, `@silurus/ooxml/xlsx`만 import해서 Canvas에 렌더링하면 서버 변환 없이 클라이언트에서 바로 처리할 수 있다. 커뮤니티 반응 기준으로 XLSX 렌더링 품질이 가장 좋다고 평가됐다.
• LLM에 Office 문서를 이해시켜야 하는 파이프라인을 만들 때, 이 라이브러리로 PPTX/DOCX를 Canvas 이미지로 렌더링한 뒤 Vision 모델에 넘기는 방식으로 구성할 수 있다. 서버리스 환경(예: Cloudflare Workers)에서 WebAssembly가 지원된다면 별도 서버 없이 파이프라인을 구성할 수 있다.
• headless 엔진(DocxDocument 등)을 사용하면 빌트인 UI 없이 Canvas만 받아서 직접 렌더링할 수 있으므로, 기존 앱에 썸네일 그리드나 슬라이드 프리뷰 같은 커스텀 UI를 붙이고 싶을 때 적합하다.
• 현재 서버에서 LibreOffice headless로 Office → PDF 변환을 하고 있다면, XLSX의 경우 이 라이브러리로 클라이언트 사이드 렌더링으로 대체해 서버 부하를 줄이는 것을 고려해볼 수 있다. 단, 복잡한 DOCX/PPTX는 아직 LibreOffice 변환이 더 정확할 수 있다.

Code Example

// 설치
npm install @silurus/ooxml
// 또는
pnpm add @silurus/ooxml

// 필요한 포맷만 import (tree-shaking 적용)
import { XlsxWorkbook } from '@silurus/ooxml/xlsx';
import { DocxDocument } from '@silurus/ooxml/docx';
import { PptxPresentation } from '@silurus/ooxml/pptx';

// vite.config.ts - wasm 플러그인 설정 필요
import wasm from 'vite-plugin-wasm';
export default { plugins: [wasm()] };

// webpack - asyncWebAssembly 활성화 필요
module.exports = {
  experiments: { asyncWebAssembly: true }
};

Terminology

Related Papers

• Claude Code sends 33k tokens before reading the prompt; OpenCode sends 7k

  동일한 모델과 작업 환경에서 Claude Code와 OpenCode의 실제 토큰 사용량을 API 레벨에서 측정한 결과, Claude Code가 시스템 프롬프트 오버헤드만으로 OpenCode 대비 4.7배 더 많은 토큰을 소비한다는 것을 확인했다.

• Mesh LLM: distributed AI computing on iroh

  사무실, 집, 클라우드에 흩어진 GPU들을 하나의 OpenAI 호환 API로 묶어주는 분산 LLM 실행 시스템으로, 비싼 API 비용 없이 큰 모델을 직접 운영할 수 있다.

• Show HN: Frugon – Find which LLM calls a cheaper model could handle (local, MIT)

  내 LLM API 비용이 어디서 새는지 로컬에서 분석해주는 오픈소스 CLI 도구로, 비싼 모델 대신 저렴한 모델로 전환 가능한 호출을 골라낸다.

• Jamesob's guide to running SOTA LLMs locally

  2천 달러짜리 RTX 3090 한 장부터 4만 달러짜리 RTX PRO 6000 4장 셋업까지, 로컬에서 최신 LLM을 직접 돌리는 방법을 하드웨어 선택·구성·실행 설정까지 통째로 정리한 실전 가이드다.

• Faster embeddings: how we rebuilt the ONNX path in Manticore

  Manticore Search가 기존 SentenceTransformers/Candle 백엔드를 ONNX Runtime으로 교체해 텍스트 임베딩 생성 속도를 평균 14배 향상시켰다. 별도 모델 서비스 없이 DB 내부에서 직접 임베딩을 처리하는 구조에서 INSERT 속도가 곧 임베딩 속도이기 때문에 이 개선은 실질적인 ingest 처리량 향상으로 직결된다.

• Asymmetric Quantization: Near-Lossless Retrieval with 97% Storage Reduction

  멀티벡터 검색 모델의 문서 벡터를 1비트 이진값으로 압축하고 쿼리 벡터만 int8로 유지하는 비대칭 양자화 기법으로, 스토리지를 97% 줄이면서 검색 품질 손실을 0.61점(NDCG@10 기준)에 그치게 만든 실제 프로덕션 적용 사례다.

Related Resources

• office-open-xml-viewer GitHub 원본
• Storybook 데모
• docx-editor (사람이 직접 작성한 유사 프로젝트)
• HN 원문 댓글 스레드