Skip to content

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:

  1. Adapters — each knows how to parse one file format into a DocumentModel
  2. Document Model — a unified, serialisable representation of any document
  3. Renderer — turns any DocumentModel into DOM nodes

The engine coordinates them. You call engine.preview(file, container) and it figures out the rest.

File  →  Adapter.parse()  →  DocumentModel  →  render()  →  DOM

Key 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. pdfAdapter code 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, and document APIs that only exist in browsers.

Next steps