What is ViewThemAll?
ViewThemAll is a framework-agnostic TypeScript library that lets you preview any common file format in the browser using a single unified API.
The problem it solves
Building file previews in a web app typically means wiring together multiple incompatible libraries:
- Mammoth.js for DOCX (HTML output, no structure)
- SheetJS for XLSX (raw data, no render layer)
- pdf.js for PDF (canvas, totally different API)
- Prism.js for code (yet another API)
Each library has its own model, its own error handling, its own rendering approach. You end up with four different integration surfaces for four file formats — and you haven't even touched images, video, or archives yet.
The solution
ViewThemAll introduces three layers:
- Adapters — each knows how to parse one file format into a
DocumentModel - Document Model — a unified, serialisable representation of any document
- Renderer — turns any
DocumentModelinto DOM nodes
The engine coordinates them. You call engine.preview(file, container) and it figures out the rest.
File → Adapter.parse() → DocumentModel → render() → DOMKey design principles
- Errors are values. Every parse operation returns
Result<DocumentModel, ParseError>. Nothing throws across module boundaries. - Abort-aware. Every adapter accepts an
AbortSignal. Cancel any in-flight parse instantly. - No HTML pipeline. DOCX →
DocumentModel→<p>/<table>etc. Not DOCX → HTML string →innerHTML. No XSS vectors from document content. - Tree-shakeable. Import only the adapters you use.
pdfAdaptercode never enters a bundle that doesn't import it.
Browser support
Any browser with ES2020 support:
- Chrome / Edge 88+
- Firefox 78+
- Safari 14+
Node.js is not supported — the library uses
File,URL.createObjectURL,DOMParser, anddocumentAPIs that only exist in browsers.
Next steps
- Installation — npm or CDN
- Quick Start — from zero to preview in 2 minutes
- Architecture — deep dive into the three layers