Real business attachments
PDF, Word, Excel, PPT/PPTX, OFD, Typst, CAD, DWF, PSD, Mermaid, PlantUML, and nested archive preview are maintained as focused modules.
File Viewer Docs
File Viewer: preview files entirely in the browser.
Browser-native preview should not need a conversion server. Uploading a private DOCX just to preview it is awful. File Viewer keeps Office, PDF, CAD, archives, email, and more in the browser. These docs cover the real integration paths, format limits, offline assets, and deployment checks.
208extension mappings
25preview pipelines
Offlineself-hosted Worker / WASM / fonts
Modularpreset and renderer composition
Platform Capability
More than file display: a production-ready preview layer for frontend teams.
From format detection, rendering orchestration, asset loading, and user interaction to deployment, File Viewer splits complex preview behavior into controlled, testable, and upgradeable capability modules.
Heavy dependencies load on demand
Renderers, workers, WASM, fonts, and vendor assets are layered so the full IIFE entry does not push every capability into the first script.
Viewer-level operations stay unified
Search, zoom, print, export, download, watermark, toolbar permissions, and lifecycle hooks stay consistent across preview pipelines.
Host CSS should not break preview surfaces
Every standard component defaults to Shadow DOM. Customize through tokens and ::part(); use styleIsolation:'none' only for legacy deep overrides.
Public, intranet, and offline deployment
Worker, WASM, and font assets can be self-hosted with Docker, static hosting, Cloudflare Pages, release packages, and private CDNs.
Live Experience
Try real files before choosing what to ship.
The v2.2.5 demo is an immersive document workspace: only the document surface scrolls, the source capsule and format toolbar stay fixed, each action owns a nearby panel, and mobile collapses secondary controls into one More menu.
Main DemoUpload a file, paste a URL, or open real samples across the 208-extension registry, then verify unified zoom and format-specific tools.Document CompareSide-by-side preview, synchronized scrolling, search navigation, and PDF toolbar hiding.Demo GuideReview sample coverage, deployment boundaries, and common verification flows.
Modular Integration
Install the component first. Add document capabilities deliberately.
Production apps should start from the native component package, then add the smallest preset or renderer set that matches the product. preset-all is complete, but intentionally heavier.
@file-viewer/preset-lite
Images, text, Markdown, code, and common media files.
@file-viewer/preset-office
PDF, Word, Excel, PowerPoint, OFD, RTF, and OpenDocument workflows.
@file-viewer/preset-engineering
CAD, EDA, 3D, geospatial, drawing, and structured engineering assets.
@file-viewer/preset-all
Use for full-format workbenches and release validation. Evaluate size before using in business pages.
Installation boundary: installing
@file-viewer/vue3, @file-viewer/react, or @file-viewer/web is the lightest integration path, but it does not include every renderer. Add the preset or renderer package for the formats you need. Full one-shot setup: heavy users, internal attachment centers, and validation environments can install the native
*-full package. It already includes preset-all, so do not install or pass another preset. Vite publishes the matching Worker/WASM/font/vendor assets in dev and build through fileViewerRenderers({ copyAssets:true }); non-Vite projects run the same-version CLI included by the Full package. pnpm add @file-viewer/vue3-full
pnpm add -D @file-viewer/vite-plugin # Vite
# Webpack / Vue CLI / Rspack / Rollup / Umi
npx --no-install file-viewer-copy-assets ./public/file-viewerFor script-tag pages, deploy the complete @file-viewer/web-full/dist/ directory; it already contains the full asset payload and needs no copy command.
Native Ecosystem
Native packages for every stack. iframe remains an integration option, not the core path.
Every package shares the same core capabilities, options, events, search, zoom, print, export, and lifecycle hooks while keeping framework-native ergonomics.
Vanilla JS / Web ComponentCustom Element or command-style mount for any page.Vue 3Plugin install, component props, events, refs/controllers, and toolbar customization.Vue 2.7 / Vue 2.6Legacy-friendly packages with the same option model as Vue 3.React / React LegacyHooks, refs, event callbacks, and legacy React support.SvelteComponent and action-based integration for SvelteKit and lightweight apps.jQueryUse
$(el).fileViewer(options) in traditional admin systems.Format Matrix
208 extension mappings, backed by 25 real preview pipelines.
The matrix follows renderers registered in code. Heavy parsers, Workers, WASM, and offline vendor assets load only after a matching file type is selected; planned formats are not counted as current support.
OfficeDOCX / XLSX / PPT / PPTX / PDF / OFD / Typst
EngineeringDWG / DXF / DWF / 3D / GIS / EDA / OLB / DRA
KnowledgeMarkdown / Code / Git patch / Git bundle / Mermaid / PlantUML
AssetsPSD / Images / HEIC / Audio / Video / Fonts / SQLite / Parquet
ContainersZIP / RAR / 7Z / TAR / GZIP and nested preview
CollaborationEML / MSG / XMind / draw.io / Excalidraw / EPUB / UMD
Delivery
A complete delivery path for intranet, private deployment, and open-source distribution.
Docs, demo, official site, npm packages, Docker images, GitHub source aggregation, and release artifacts are maintained together. For higher fidelity and extreme performance, follow the official site to the commercial native document engine.