File Viewer

Uploading a private DOCX or DWG just to preview it is awful.

File Viewer is a browser-native file viewer for private and internal web apps. It previews Office, PDF/OFD, CAD, archives, email, diagrams, 3D, media and data without server-side conversion. Workers, WASM, fonts and vendor assets can stay on your network.

v2.2.3 · 208 extensions across 25 preview pipelines · 54 npm targets. Heavy paths load only when the active format needs them.

English · 简体中文

Live Demo · Quick Start · Documentation · Format Matrix · Releases · Sponsor

Why File Viewer

Uploading private files to a SaaS converter is awful. Running a separate preview backend for each format is not much better. File Viewer keeps the preview path in the browser and gives the host app one API.

• No mandatory conversion backend. Files are parsed and rendered in the browser whenever the format allows it.
• Offline and private-deployment friendly. Runtime code, renderers, Workers, WASM and vendor assets can all be hosted inside your network.
• One component API. Use the same source, lifecycle, toolbar, search, zoom, print and export concepts across formats.
• Modular by design. Start with a light component, add a focused preset, or choose a full package for one-step integration.
• Lazy heavy pipelines. PDF, CAD, Typst, archives and other heavy capabilities load by format instead of inflating the first screen.
• Framework-native packages. Vanilla/Web Component comes first, with production packages for React, Vue, Svelte and jQuery.

Quick Start

Start with a full package if you want every renderer wired in. Use a light package plus a preset when you want exact control over what ships.

Web Component / Vanilla JS

npm install @file-viewer/web-full

import { mountViewer } from '@file-viewer/web-full'

mountViewer(document.querySelector('#viewer'), {
  url: '/documents/handbook.pdf',
  filename: 'handbook.pdf'
})

React 18 / 19

npm install @file-viewer/react-full

import { FileViewer } from '@file-viewer/react-full'

export function Preview() {
  return <FileViewer url="/documents/handbook.pdf" />
}

Vue 3

npm install @file-viewer/vue3-full

<script setup lang="ts">
import { FileViewer } from '@file-viewer/vue3-full'
</script>

<template>
  <FileViewer url="/documents/handbook.pdf" />
</template>

Framework	Light package	Full package	Guide
Vanilla JS / Web Component	@file-viewer/web	@file-viewer/web-full	Web
React 18 / 19	@file-viewer/react	@file-viewer/react-full	React
React 16.8 / 17	@file-viewer/react-legacy	@file-viewer/react-legacy-full	React Legacy
Vue 3	@file-viewer/vue3	@file-viewer/vue3-full	Vue 3
Vue 2.7 / 2.6	@file-viewer/vue2.7 / @file-viewer/vue2.6	matching -full package	Vue 2
Svelte	@file-viewer/svelte	@file-viewer/svelte-full	Svelte
jQuery	@file-viewer/jquery	@file-viewer/jquery-full	jQuery

Complete Full Package Delivery

The eight official Full packages are @file-viewer/web-full, @file-viewer/vue3-full, @file-viewer/vue2.7-full, @file-viewer/vue2.6-full, @file-viewer/react-full, @file-viewer/react-legacy-full, @file-viewer/svelte-full, and @file-viewer/jquery-full. They already include preset-all; do not install or pass another preset.

Each Full package includes the complete renderer matrix plus its same-version Worker, WASM, font, and vendor payload. Complete self-hosted delivery uses one of these paths:

Build / delivery path	Complete asset step
Vite	Install @file-viewer/vite-plugin and use fileViewerRenderers({ copyAssets: true }); dev and build publish the matching assets automatically.
Webpack / Rspack / Rollup / Vue CLI / Umi	Run the same-version CLI included by the Full package: npx --no-install file-viewer-copy-assets ./public/file-viewer.
@file-viewer/web-full CDN/IIFE or self-hosting	Use the CDN entry directly, or deploy its complete dist/ directory intact. Copying only the entry IIFE is incomplete.

The default asset URL is <deployment-base>/file-viewer/. Without the complete asset tree, lightweight formats and a few compatibility paths may still work, but the deployment is not full-format complete.

Choose By Scenario

54 npm targets, 208 extensions, and 25 preview pipelines mean you can start with the file problem you have today instead of assembling a different viewer for every attachment type.

Your product needs to preview	Formats you can look for immediately	Fastest path
Contracts, reports and OA/CRM attachments	PDF/OFD, DOCX/DOC, XLSX/XLS, PPT/PPTX, RTF and OpenDocument	Try the live demo · preset-office
Engineering drawings, models and chip/design assets	DWG, DXF, DWF/DWFX, STEP/IFC/3D, OLB/DRA and GDS/OASIS	preset-engineering · check fidelity
Archives whose contents must remain private	ZIP, RAR, 7Z, TAR, ISO and 20+ related formats, with nested file preview	Archive coverage · offline deployment
Email, support-ticket and knowledge-base attachments	EML, MSG, MBOX, EPUB, Markdown, source code, diff/patch and Git bundle	Full format matrix · full packages
Diagrams, design files and structured data	Draw.io, Excalidraw, Mermaid, PlantUML, XMind, PSD, SQLite, Parquet and more	Full format matrix · preset-all
Intranet or air-gapped deployment	Self-hosted JavaScript, Worker, WASM, fonts and vendor assets	Offline guide · Docker

Looking for one exact suffix? Search the maintained 208-extension format matrix, which records the renderer, support level and deployment requirements for each pipeline.

Choose the Right Package

Path	Choose it when	What you provide
Light component	You need the smallest shell and explicit control	Individual renderers or a preset in options.preset
preset-lite	Text, code, images and lightweight common previews are enough	Component + @file-viewer/preset-lite
preset-office	Your product centers on PDF and Office documents	Component + @file-viewer/preset-office
preset-engineering	CAD, drawing, 3D, EDA or engineering data matters	Component + @file-viewer/preset-engineering
Vite plugin	You want installed presets detected and offline assets copied automatically	@file-viewer/vite-plugin
Full package	You value one-step setup more than the smallest dependency graph	A matching @file-viewer/*-full package

import officePreset from '@file-viewer/preset-office'
import { FileViewer } from '@file-viewer/vue3'

// options.preset accepts one preset or an array of presets.
const options = { preset: officePreset }

See on-demand renderers and presets for asset copying, plugin configuration and custom combinations.

Capability at a Glance

The v2.2.3 registry maps 208 file extensions into 25 rendering pipelines, distributed through 54 npm targets. Presentation preview deliberately keeps two engine boundaries: PowerPoint 97–2003 .ppt uses the native-WASM @file-viewer/ppt@0.3.2 engine, while PPTX/OpenXML uses the @file-viewer/pptx Worker engine. STEP/STP, IGES/IGS, and BREP use the packaged local OCCT Worker/WASM path instead of a conversion hint. EPUB uses a packaged lazy engine built against the pinned safe XML DOM implementation, so it adds no external runtime or CDN dependency. Other major groups include PDF; Word and spreadsheets; OFD; DWG/DXF/DWF/DWFX; archives; EML/MSG; Markdown and source code; Draw.io, Excalidraw, Mermaid and PlantUML; PSD and images; audio/video; ebooks; mind maps; 3D/geo/data/EDA formats; and Typst.

The exact implementation and support level varies by format. Use the maintained format matrix as the source of truth rather than inferring support from an extension alone.

Honest Boundaries

• File Viewer is a read-only preview toolkit, not an Office or CAD editor.
• Visual fidelity differs by file structure, embedded fonts, vendor extensions and browser capabilities.
• Heavy formats use the local Worker/WASM/vendor assets carried by their packages; offline deployment means publishing that version-aligned payload on your own origin.
• Very large or encrypted files can require more memory and format-specific configuration.
• A light component does not silently include every renderer. Install a preset, individual renderers, or a full package.

If a documented format fails on a real file, the most useful contribution is a sanitized sample, browser/version details and a minimal reproduction.

OpenAI Build Week 2026

File Viewer started in 2022. The OpenAI Build Week submission covers only the work added from July 13, 2026: the v2.2 workspace, native PPT and STEP/OCCT preview paths, the bundled EPUB engine, and the release checks that keep Worker, WASM, font, and vendor assets working offline. The older core and format pipelines are context, not claimed as hackathon work.

Read the exact scope, Codex session, public commits, and test evidence.

Support the Work

I started working on the idea behind File Viewer in 2022 because uploading private files to another service just to preview them felt wrong. The hard part now is not the happy-path demo. It is reproducing broken Office files, CAD edge cases, encrypted archives, Worker paths, WASM assets and old framework builds.

If File Viewer saves your team time, sponsor the maintenance. It buys focused time for compatibility tests, fixes, documentation and releases. Open-source features stay open.

• GitHub Sponsors: one-time or monthly support.
• WeChat / Alipay: one-time support for domestic users.
• Enterprise support: private deployment, custom file compatibility or work that needs a committed response time.

Architecture

framework component / Web Component
              │
        @file-viewer/core
              │
     preset or renderer modules
              │
 local workers · WASM · vendor assets

@file-viewer/core is framework-independent TypeScript. Renderer packages own format pipelines; presets compose them; each framework package implements its native lifecycle without nesting another framework implementation.

Open-source Workspace

This repository contains the public source for the demo, documentation, framework-independent core, renderer pipelines, presets, Vite plugin and standard framework components. Release archives and npm tarballs live in GitHub Releases, not in Git history.

pnpm install --frozen-lockfile
pnpm type-check
pnpm test
pnpm build
pnpm docs:build
pnpm verify:browser-smoke

Area	Location
Core	packages/core
Renderers	packages/renderers
Presets and Vite plugin	packages/presets
Components	packages/components
Asset-copy CLI	packages/tools/copy-assets
Runnable examples	examples
Demo	apps/viewer-demo
Documentation	docs

Documentation and Delivery

• Quick start
• Format matrix
• API and options
• Offline deployment
• Asset-copy CLI: npx --yes file-viewer-copy-assets ./public/file-viewer
• Docker
• Framework packages
• Releases and downloadable archives

Contributing

Compatibility reports, deployment feedback, focused fixes and sanitized regression samples are welcome. Read CONTRIBUTING.md and SECURITY.md before opening an issue or pull request.

Apache-2.0 licensed. Community links, Wiki and acknowledgements are available in the documentation and repository sidebar.