Office-open-xml-viewer: HTML 캔버스로 렌더링하는 Office XML 문서 뷰어
출처: Hacker News
이 전체 코드베이스 — Rust 파서, TypeScript 렌더러, 테스트 및 도구 — 는 Claude (Anthropic의 AI 어시스턴트)가 반복적인 프롬프트를 통해 구현했습니다. 이 저장소에는 사람이 직접 작성한 애플리케이션 코드는 존재하지 않습니다.
브라우저 기반 Office Open XML 문서 뷰어로, HTML Canvas 요소에 렌더링합니다.
파서는 Rust로 작성되어 WebAssembly로 컴파일되고, 렌더러는 Canvas 2D API를 사용합니다.
각 포맷은 또한 헤드리스 엔진(DocxDocument / XlsxWorkbook / PptxPresentation)을 제공하여 호출자가 제공한 캔버스에 렌더링할 수 있으므로, 내장 뷰어에 얽매이지 않고 스크롤 뷰, 썸네일 그리드, 마스터‑디테일 패널 등 자신만의 UI를 구성할 수 있습니다. 자세한 내용은 Storybook 데모의 Examples 섹션을 참고하세요.
DOCX
XLSX
PPTX
npm install @silurus/ooxml
# or
pnpm add @silurus/ooxml번들러 주의사항: 이 패키지는 .wasm 파일을 포함합니다. Vite를 사용할 경우 vite-plugin-wasm을 추가하고, webpack을 사용할 경우 experiments.asyncWebAssembly를 사용하세요.
번들 크기 주의사항: 이 패키지는 ESM 전용(.mjs)이며, npm의 Unpacked Size는 네 개의 진입점 번들을 모두 합산합니다. 여기에는 옵션 선택형 수학 엔진(MathJax + STIX Two Math, 약 3 MB)도 포함됩니다. 실제 애플리케이션에 들어가는 크기는 훨씬 작습니다 — 필요한 포맷만 import하면 됩니다(예: @silurus/ooxml/pptx). 수학 엔진은 별도 진입점(@silurus/ooxml/math)이며, 이를 import하고 뷰어에 전달할 때만 번들에 포함됩니다(수식 렌더링 섹션 참고). math 엔진을 전혀 사용하지 않는 뷰어와 모든 XLSX 사용 사례는 약 3 MB를 완전히 트리 쉐이킹합니다.
Quick Start
const canvas = document.getElementById('docx-canvas') as HTMLCanvasElement;
const docx = new DocxViewer(canvas);
await docx.load('/document.docx');
docx.nextPage();
// XLSX — viewer manages its own + tab bar
const container = document.getElementById('xlsx-container') as HTMLElement;
const xlsx = new XlsxViewer(container);
await xlsx.load('/workbook.xlsx');
// PPTX — caller provides the
const canvas = document.getElementById('pptx-canvas') as HTMLCanvasElement;
const pptx = new PptxViewer(canvas);
await pptx.load('/deck.pptx');
pptx.nextSlide();">import { DocxViewer } from '@silurus/ooxml/docx';
import { XlsxViewer } from '@silurus/ooxml/xlsx';
import { PptxViewer } from '@silurus/ooxml/pptx';
// DOCX — caller provides the
const canvas = document.getElementById('docx-canvas') as HTMLCanvasElement;
const docx = new DocxViewer(canvas);
await docx.load('/document.docx');
docx.nextPage();
// XLSX — viewer manages its own + tab bar
const container = document.getElementById('xlsx-container') as HTMLElement;
const xlsx = new XlsxViewer(container);
await xlsx.load('/workbook.xlsx');
// PPTX — caller provides the
const canvas = document.getElementById('pptx-canvas') as HTMLCanvasElement;
const pptx = new PptxViewer(canvas