A visual walkthrough of how PDFox V2 transforms PDF rendering — from a canvas-locked viewer to a modular, DOM-native editing platform. Everything runs in your browser.
The V1 architecture relies on PDF.js to render pages to Canvas, then layers custom editing UI on top. The rendering engine and editing system are fundamentally separate.
The V2 architecture integrates editing directly into the rendering model. The PDF stream is interpreted into DOM elements that are natively editable by the browser.
The same content stream interpreter feeds three independent renderers
PDFox.js is structured as a TypeScript monorepo with 11 independent, tree-shakeable packages. Each package has a single responsibility and can be imported independently.
PDF 2.0 (ISO 32000-2:2020) object model, cross-reference tables, stream handling, and object resolution. The foundation every other package builds on.
FoundationTokenizer and syntax parser for the PDF binary format. Handles incremental updates, linearized files, and malformed PDFs.
FoundationContent stream interpreter implementing all PDF operators. Manages graphics state, text state, and path construction.
RenderingDOM renderer producing contentEditable text spans, SVG graphics, and positioned image elements. The core of the editing experience.
RenderingCanvas renderer for pixel-perfect preview, thumbnails, and print output. Uses the same interpreter as DOM rendering.
RenderingFont resolution, embedding, and metrics. Handles Type1, TrueType, CID, OpenType GSUB/GPOS, and @font-face injection.
TypographyImage decoding for all PDF image types: JPEG, JPEG2000, JBIG2, CCITT Fax, inline images. Color key and soft mask support.
MediaColor space engine supporting DeviceRGB, CMYK, ICCBased, CalRGB, Lab, Separation, DeviceN, and Pattern color spaces.
ColorRust-compiled WASM modules for compression (flate2), cryptography, CMap parsing, and content stream processing.
PerformancePDF 2.0 encryption (AES-256 via Web Crypto + WASM), RC4/AES-128 legacy support, PKCS#7/CMS digital signatures with CAdES and PAdES, Document Security Store (DSS).
SecurityPDF/A validation (PDF/A-1 through PDF/A-4, ISO 19005) and PDF/UA accessibility validation (PDF/UA-1 & PDF/UA-2, ISO 14289). Both based on the PDF 2.0 specification.
ComplianceHigh-level editing API. Document loading, page lifecycle, undo/redo, selection management, and save operations.
EditingWeb Worker integration for off-main-thread parsing and rendering. Progress callbacks and AbortSignal support.
Performance| Dimension | V1 (PDF.js) | V2 (PDFox.js) |
|---|---|---|
| Render Target | Canvas (pixel image) | DOM + Canvas + SVG (triple output) |
| Editing Model | Overlay layers bolted on canvas | Native DOM — editing is rendering |
| Package Structure | Monolithic (~60K LoC) | 11 tree-shakeable packages (~30K LoC) |
| Language | JavaScript | TypeScript (strict) |
| WASM Usage | Compression + color management | Compression, crypto, CMap, content stream |
| Font Rendering | JS Type1→OTF conversion | Native @font-face + GSUB/GPOS |
| Graphics Model | Canvas 2D API | SVG paths (selectable, editable) |
| Text Model | Invisible overlay for selection | contentEditable spans (native editing) |
| Concurrency | Web Worker (monolithic) | Web Worker (modular, with progress) |
| PDF Standard | PDF 1.7+ (partial 2.0 features) | PDF 2.0 (ISO 32000-2:2020) native |
| Bundle Size | Full library (no tree-shaking) | Import only needed packages |
Explore the editing features made possible by the V2 DOM-native architecture.
View V2 Features