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.2 · 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
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.
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.
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.
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.
| 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 v2.2.2 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.1 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.
- 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.
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.
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.