Real business attachments
PDF, Word, Excel, PPTX, OFD, Typst, CAD, DWF, PSD, Mermaid, PlantUML, and nested archive preview are maintained as focused modules.
Flyfish Viewer Docs
Browser-native file preview for internal and private web apps.
Flyfish Viewer is browser-side file preview infrastructure for business applications, without server-side conversion. It covers office documents, engineering drawings, archives, email, ebooks, code, images, media, and structured data. This documentation connects the capability matrix, integration paths, modular boundaries, offline deployment, and production validation in one place.
206extension mappings
24preview pipelines
Offlineself-hosted Worker / WASM / fonts
Modularpreset and renderer composition
preview platform
active documentPDF · DOCX · DWG · ZIP
Renderers, workers, WASM, fonts, and offline vendor assets load by file type, keeping the first script lean even for full-format pages.
SearchZoomPrintExport
Office fidelityEngineering CADArchive nested previewOffline assets
Unified UXSearch, highlight, zoom, print, export, watermark, toolbar permissions, and lifecycle hooks.
Enterprise deliveryIntranet assets, Docker, Cloudflare Pages, release artifacts, and private CDN paths.
Native ecosystemVanilla JS, Vue, React, Svelte, and jQuery share the same core capability layer.
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, Flyfish 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
Web Component / IIFE entries default to Shadow DOM. Framework packages can opt in with styleIsolation, then customize through tokens and ::part().
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
Validate the viewer before choosing your integration surface.
The demo uses real samples, lazy renderers, responsive controls, document comparison, and offline asset paths that mirror production deployment.
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
@file-viewer/preset-all, keep the same fileViewerRenderers({ copyAssets:true }) config, and get the complete official demo capability set immediately. pnpm add @file-viewer/vue3 @file-viewer/preset-all
pnpm add -D @file-viewer/vite-plugin # optional for ViteNative 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
Broad business-file coverage with clear extension points.
Heavy parsers, workers, WASM files, and offline vendor assets load only when the active file type needs them.
OfficeDOCX / XLSX / 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.