File Viewer

File Viewer provides read-only previews for Office, PDF/OFD, CAD, archives, email and more, in the browser.
Built-in renderers need no conversion server; Workers, WASM and fonts can be self-hosted.

English · 简体中文

Live demo · Documentation · Format matrix · Releases

⭐ If File Viewer helps you, please star the repo.

Why File Viewer

• 275 registered extensions (225 stable, 50 experimental) across 47 preview pipelines: Word, Excel, PowerPoint, PDF, OFD, DWG/DXF, STEP/IFC, archives, email, images, media, code, DICOM and more.
• No conversion server. Files are parsed and rendered in the browser; Workers, WASM and fonts can be self-hosted for offline networks.
• Loads only what a file needs. Heavy engines (PDF, CAD, Office, 3D) are lazy-loaded per format.
• One API, every framework. Web Component, Vue 3, Vue 2.7/2.6, React 16.8–19, Svelte and jQuery share options, events and controller methods.

Quick start

The Web Component works without a framework:

npm install @file-viewer/web-full

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

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

Give #viewer a height. The URL must be reachable by the browser; cross-origin files need the appropriate CORS headers. You can also pass a File instead of a URL.

For a new project, npm create file-viewer@latest my-viewer sets up a runnable example. To add File Viewer to an existing project, use npx file-viewer-cli@latest add .. The CLI guide describes the packages and assets each choice installs.

Application	Light component	Full compatibility package	Guide
Vanilla JS / Web Component	@file-viewer/web	@file-viewer/web-full	Web
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
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
Svelte	@file-viewer/svelte	@file-viewer/svelte-full	Svelte
jQuery	@file-viewer/jquery	@file-viewer/jquery-full	jQuery

For formats beyond a light component's built-in baseline, add a preset or individual renderers. For example:

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

const options = { preset: officePreset }

options.preset also accepts an array. See presets and renderers for the available combinations.

Formats and limits

The format matrix lists extensions, renderer packages, support levels and evidence. It covers common documents and media as well as specialist formats such as engineering drawings, 3D models and design files. An extension in the matrix does not mean every file of that type has identical fidelity.

The eight *-full packages preserve the published v2.4 preset-all compatibility baseline: 221 extensions across 32 preview pipelines. New specialist renderers, including Adobe design files, DICOM and binary inspection, are installed explicitly; they are not silently added to existing Full packages. For a smaller installation, choose a light component with @file-viewer/preset-lite, @file-viewer/preset-office, @file-viewer/preset-engineering or individual renderers.

File Viewer is a viewer, not an editor. Fonts, vendor-specific features, encrypted files and very large inputs can affect fidelity or memory use. Check the format matrix before relying on a specialist format in production, and test with representative files from your own workflow.

Opt-in BPMN diagrams (@file-viewer/renderer-drawing/bpmn) and XML validation/transformation profiles (@file-viewer/renderer-text/xml-profiles) ship on npm since 3.1.2; they are not added to Full packages.

Runtime assets

Full packages include version-matched Workers, WASM, fonts and vendor assets, but those files must be served alongside your application. The default asset path is <deployment-base>/file-viewer/.

Build or delivery	Asset step
Vite	Install @file-viewer/vite-plugin and configure fileViewerRenderers({ copyAssets: true }).
Webpack, Rspack, Rollup, Vue CLI or Umi	Run npx --no-install file-viewer-copy-assets ./public/file-viewer with the matching Full package installed.
Web Full IIFE / CDN	Serve the complete package dist/ directory, not only the entry JavaScript file.

For nonstandard paths and offline deployments, see the asset and distribution guide. A missing Worker or WASM file can leave a format unavailable even when its JavaScript package is installed.

Work from source

This repository contains the public source for the core, renderers, presets, components, CLI, demo and documentation. Released archives and npm tarballs are available from GitHub Releases, rather than tracked in Git.

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

Contributing and support

If a documented format fails, please include a sanitized sample or a public reproduction link, the browser version and the expected result. A screenshot alone rarely identifies a parser or rendering bug. Read CONTRIBUTING.md before opening a pull request; report security issues through SECURITY.md.

New contributors: local development, international collaboration, and translations. English and Chinese are welcome; other languages can include a short English summary.

Maintenance is supported through GitHub Sponsors. For private deployment or work requiring a response commitment, see enterprise support.

Thanks to Our Sponsors

_{@p4535992 · @jtianling}

Star History

License

File Viewer's own source is Apache-2.0. The DWG/DWF/DWFX runtime (@flyfish-dev/cad-viewer and dwf-viewer) is AGPL-3.0-only; using or distributing CAD support requires complying with that license. See LICENSE and the runtime package notices.