ViewThemAll

Preview any file. One library.

A framework-agnostic TypeScript library that normalizes every common file format into a unified DocumentModel, then renders it with a single engine. Drop in a DOCX, PDF, spreadsheet, presentation, ebook, image, video, or ZIP — and get a consistent DOM preview with zero server round-trips.

ViewThemAll on npm

Playground

import { registerAdapter, engine } from 'viewthemall'
import { docxAdapter } from 'viewthemall/adapters/docx'
import { xlsxAdapter } from 'viewthemall/adapters/xlsx'
import { pdfAdapter }  from 'viewthemall/adapters/pdf'

registerAdapter(docxAdapter)
registerAdapter(xlsxAdapter)
registerAdapter(pdfAdapter)

await engine.preview(file, document.getElementById('preview')!)

Why ViewThemAll?

| Library | Problem | |---------|---------| | Mammoth.js | HTML output only — no structured model, fragile output | | SheetJS | Raw data, no type detection, no render layer | | Prism.js | Code only, no integration with document formats |

ViewThemAll normalises ALL formats into one DocumentModel and renders with one engine. Adapters know nothing about the DOM. The renderer knows nothing about file formats. Errors are values — no exceptions cross module boundaries.

Supported Formats — 19 Adapters

| Adapter | Extensions | Notes | |---------|-----------|-------| | DOCX | .docx | Full OOXML → DocumentModel. Tables, nested lists, images, hyperlinks, paragraph styles, bold/italic/colour/code spans. No HTML intermediate. | | XLSX | .xlsx, .xlsm | Hand-written OOXML + JSZip parser. Merged cells, header detection, multi-sheet, all cell types including dates. No ExcelJS, no SheetJS. | | PPTX | .pptx, .ppsx | Full OOXML slide parsing. Positioned text, images, speaker notes, canvas dimensions. | | PDF | .pdf | Native browser iframe rendering. No dependencies. Chrome, Edge, Firefox and Safari all render PDFs natively. | | CSV / TSV | .csv, .tsv | RFC 4180 compliant. Auto-detects delimiter, quoted fields, headers. Up to 5 000 rows. | | Markdown | .md, .mdx, .markdown | CommonMark subset — headings, bold/italic, links, images, fenced code, GFM tables. | | RTF | .rtf, .rtx | Text extraction. Unicode escape support. No external dependency. | | ODT | .odt, .ott | LibreOffice Writer. Paragraphs, headings, lists, tables, images. ZIP + XML, no external dep. | | ODS | .ods, .ots | LibreOffice Calc. All cell types, multi-sheet, colspan, row repeat. No external dep. | | ODP | .odp, .otp | LibreOffice Impress. Slides with positioned text and images. ODF length unit conversion. | | EPUB | .epub | EPUB 2 + 3. OPF spine reading order, full HTML → DocumentModel, embedded image blobs. Up to 50 chapters. | | Text & Code | .txt, .js, .ts, .py, .json, .log, 30+ more | Prism.js syntax highlighting. Large-file truncation. | | Image | .png, .jpg, .gif, .webp, .svg | Inline object-URL rendering. SVG sanitized against XSS. | | Audio & Video | .mp4, .webm, .ogg, .mp3, .wav | Native browser controls. MediaType detection. | | Archive | .zip | File tree with recursive previews. Path traversal guards, 10 000 entry limit, zip-bomb defence. | | XLS (legacy) | .xls, .xlt | Returns clear conversion message → re-save as .xlsx. | | XLSB (binary) | .xlsb | Returns clear conversion message → re-save as .xlsx. | | DOC (legacy) | .doc, .dot | Returns clear conversion message → re-save as .docx. | | PPT (legacy) | .ppt, .pot, .pps | Returns clear conversion message → re-save as .pptx. |

Installation

npm install viewthemall jszip prismjs

Peer dependencies — install only the ones you actually use:

| Adapters | Dependency | |----------|-----------| | DOCX, XLSX, PPTX, ODT, ODS, ODP, EPUB, Archive | jszip | | Text & Code | prismjs | | PDF, CSV, RTF, MD, Image, Media, XLS, XLSB, DOC, PPT | (none) |

Tree-shaking works at the adapter level — import only what you use and the rest is never bundled.

Quick Start

Register adapters

Register once at app startup, before any files are loaded.

import { registerAdapter } from 'viewthemall'
import { docxAdapter }     from 'viewthemall/adapters/docx'
import { xlsxAdapter }     from 'viewthemall/adapters/xlsx'
import { pptxAdapter }     from 'viewthemall/adapters/pptx'
import { pdfAdapter }      from 'viewthemall/adapters/pdf'
import { csvAdapter }      from 'viewthemall/adapters/csv'
import { textCodeAdapter } from 'viewthemall/adapters/text-code'
import { mdAdapter }       from 'viewthemall/adapters/md'
import { rtfAdapter }      from 'viewthemall/adapters/rtf'
import { odtAdapter }      from 'viewthemall/adapters/odt'
import { odsAdapter }      from 'viewthemall/adapters/ods'
import { odpAdapter }      from 'viewthemall/adapters/odp'
import { epubAdapter }     from 'viewthemall/adapters/epub'
import { imageAdapter }    from 'viewthemall/adapters/image'
import { mediaAdapter }    from 'viewthemall/adapters/media'
import { archiveAdapter }  from 'viewthemall/adapters/archive'
import { xlsAdapter }      from 'viewthemall/adapters/xls'
import { xlsbAdapter }     from 'viewthemall/adapters/xlsb'
import { docAdapter }      from 'viewthemall/adapters/doc'
import { pptAdapter }      from 'viewthemall/adapters/ppt'

registerAdapter(docxAdapter)
registerAdapter(xlsxAdapter)
registerAdapter(pptxAdapter)
registerAdapter(pdfAdapter)
registerAdapter(csvAdapter)
registerAdapter(textCodeAdapter)
registerAdapter(mdAdapter)       // register after text-code — overrides .md/.mdx
registerAdapter(rtfAdapter)
registerAdapter(odtAdapter)
registerAdapter(odsAdapter)
registerAdapter(odpAdapter)
registerAdapter(epubAdapter)
registerAdapter(imageAdapter)
registerAdapter(mediaAdapter)
registerAdapter(archiveAdapter)
registerAdapter(xlsAdapter)
registerAdapter(xlsbAdapter)
registerAdapter(docAdapter)
registerAdapter(pptAdapter)

Preview a file

import { engine } from 'viewthemall'

const container = document.getElementById('preview')!

// File from <input type="file"> or drag-and-drop
await engine.preview(file, container)

With abort support

let controller: AbortController | null = null

async function loadFile(file: File, container: HTMLElement) {
  controller?.abort()
  controller = new AbortController()
  await engine.preview(file, container, { signal: controller.signal })
}

React

import { useEffect, useRef } from 'react'
import { engine } from 'viewthemall'

export function FilePreview({ file }: { file: File | null }) {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!file || !ref.current) return
    const ctrl = new AbortController()
    engine.preview(file, ref.current, { signal: ctrl.signal })
    return () => ctrl.abort()
  }, [file])

  return <div ref={ref} />
}

Vue

<script setup lang="ts">
import { ref, watch, onUnmounted } from 'vue'
import { engine, unmount } from 'viewthemall'

const props = defineProps<{ file: File | null }>()
const container = ref<HTMLElement | null>(null)
let ctrl: AbortController | null = null

watch(() => props.file, async (file) => {
  if (!container.value) return
  ctrl?.abort()
  unmount(container.value)
  if (!file) return
  ctrl = new AbortController()
  await engine.preview(file, container.value, { signal: ctrl.signal })
})
onUnmounted(() => ctrl?.abort())
</script>

<template><div ref="container" /></template>

Architecture

File (any format)
   │
   ▼
AdapterRegistry.resolve(file)  →  Adapter
   │
   ▼
adapter.parse(file, { signal })  →  Result<DocumentModel>
   │
   ├── ok: true   →  render(model, container)      →  DOM
   └── ok: false  →  renderError(error, container) →  error UI

Adapters know nothing about the DOM. The renderer knows nothing about file formats. The engine coordinates. Errors are values — Result<T> is either { ok: true; value: T } or { ok: false; error: ParseError }. No exceptions cross module boundaries.

All ZIP-based adapters (DOCX, XLSX, PPTX, ODT, ODS, ODP, EPUB, Archive) use the same pattern: JSZip to unzip, then a custom DOMParser + getElementsByTagNameNS('*', localname) for namespace-agnostic XML parsing. No external XML parsers, no OOXML SDK.

API Reference

registerAdapter(adapter)

Register an adapter with the global registry. Last registration wins — use this to override built-in adapters or register mdAdapter after textCodeAdapter to take priority for .md files.

import { registerAdapter } from 'viewthemall'
registerAdapter(myCustomAdapter)

engine.preview(file, container, options?)

Parse the file and render the result into container. Replaces any existing content. Returns a promise that resolves when rendering is complete.

await engine.preview(file, container, { signal: abortController.signal })

unmount(container)

Clean up any resources attached to a container (object URLs, event listeners, PDF.js workers).

import { unmount } from 'viewthemall'
unmount(container)

Result<T>

All parse calls return Result<DocumentModel>:

type Result<T> =
  | { ok: true;  value: T }
  | { ok: false; error: ParseError }

type ParseError = {
  code:    'CORRUPT_FILE' | 'UNSUPPORTED_FORMAT' | 'ABORTED' | string
  message: string
  source?: unknown
}

DocumentModel

interface DocumentModel {
  blocks: Block[]
  meta?:  DocumentMeta
}

interface DocumentMeta {
  title?:      string
  author?:     string
  pageCount?:  number
  slideCount?: number
  sheetNames?: string[]
}

type Block =
  | ParagraphBlock | HeadingBlock | ListBlock
  | TableBlock     | ImageBlock   | CodeBlock
  | SlideBlock     | HrBlock      | UnknownBlock

Custom Adapters

An adapter is a plain object — implement the Adapter interface in ~10 lines:

import type { Adapter } from 'viewthemall'
import { ok, err } from 'viewthemall'

const myAdapter: Adapter = {
  name: 'my-format',
  extensions: ['myext'],
  mimeTypes: ['application/x-my-format'],

  async parse(file, options) {
    if (options?.signal?.aborted)
      return err({ code: 'ABORTED', message: 'Aborted' })
    try {
      const text = await file.text()
      return ok({
        blocks: [{ type: 'paragraph', content: [{ type: 'text', text }] }],
      })
    } catch (e) {
      return err({ code: 'CORRUPT_FILE', message: String(e) })
    }
  },
}

registerAdapter(myAdapter)

Bundler Setup

Vite

// vite.config.ts
export default {
  optimizeDeps: {
    include: ['jszip'],
  },
}

Next.js / SSR

ViewThemAll uses browser APIs. Use dynamic import inside useEffect or your framework's { ssr: false } equivalent:

const { registerAdapter } = await import('viewthemall')
const { docxAdapter }     = await import('viewthemall/adapters/docx')
registerAdapter(docxAdapter)

License

MIT © RadioBros