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.
206 extensions across 24 preview pipelines. Heavy paths load only when the active format needs them.
English · 简体中文
Live Demo · Quick Start · Documentation · Format Matrix · Releases · Sponsor
⭐ If File Viewer saves your team from maintaining a conversion service for attachments, star the repo. It helps the next team with the same problem find it.
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, 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.
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.
npm install @file-viewer/web-fullimport { mountViewer } from '@file-viewer/web-full'
mountViewer(document.querySelector('#viewer'), {
url: '/documents/handbook.pdf',
filename: 'handbook.pdf'
})npm install @file-viewer/react-fullimport { FileViewer } from '@file-viewer/react-full'
export function Preview() {
return <FileViewer url="/documents/handbook.pdf" />
}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 |
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.
Running npm install alone installs the complete renderer code, but it does not publish Worker, WASM, font, and vendor assets into your application. Complete format support uses one of these delivery 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.
206 extensions across 24 preview pipelines means 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, 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 206-extension format matrix, which records the renderer, support level and deployment requirements for each pipeline.
| 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.
The current matrix maps 206 file extensions into 24 rendering pipelines. Major groups include PDF; Word, spreadsheet and presentation files; 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.
- 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 require local Worker/WASM/vendor assets; offline deployment means hosting those assets yourself, not removing them.
- 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.
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.
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.
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 |
- 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
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.