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.

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.

The source tree adds opt-in BPMN diagrams and XML validation/transformation profiles. These are not included in npm 3.1.1; use the guides when testing the source build.

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.

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

Thanks to Our Sponsors

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.