File Viewer

For fixes and package versions, see the changelog.

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.

Flutter development preview

The independent File Viewer Flutter SDK is available on pub.dev as development preview 0.1.0-dev.2. It provides bundled offline assets, application-scoped warm-up and reusable viewer sessions. Start with the Flutter quick start, or read the complete integration guides.

Android, iOS, Web, Windows, macOS and Linux are the delivery targets. Follow the platform guide for measured support and remaining qualification. Sessions stay within the application process; operating systems can suspend or terminate it. The Flutter repository contains the SDK source and runnable example.

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.

This is the beginning of the README. Read the rest at the original. Read the full README ↗