Docs Home
Flyfish Viewer is an offline-first frontend file preview system for web applications. It is designed for attachment centers, workflow tools, knowledge bases, support portals, and self-hosted intranet products that need broad file coverage without running a document conversion backend.
What To Read First
| Goal | Page |
|---|---|
| Run the viewer in a project | Quickstart |
| Pick the right npm package | Ecosystem packages |
| Embed the official demo without npm packages | Quickstart: Zero-dependency integration |
| Choose minimal imports or composed presets | 2.1.0 modular import paths |
| Keep host CSS from leaking into the viewer | Style isolation and customization |
| Check format coverage | Supported formats |
| Understand npm, GitHub, releases, and self-hosted assets | Distribution |
Main Links
- Live demo: demo.file-viewer.app
- iframe demo entry: demo.file-viewer.app/iframe.html?url=/example/en/calibre-demo.docx
- Document comparison demo: demo.file-viewer.app/compare.html
- GitHub repository: github.com/flyfish-dev/file-viewer
- npm scope:
@file-viewer - Sponsorship and priority support: dev.flyfish.group/sponsor?source=github
Positioning
Flyfish Viewer is not trying to replace specialist editors. It gives business products a practical, embedded preview layer for common and uncommon attachments: documents, spreadsheets, slides, PDFs, archives, email, diagrams, CAD drawings, 3D assets, code, logs, media, and data files.
The project keeps a pure TypeScript core under @file-viewer/core, split renderer packages for heavier formats, native component packages for Web Components, Vue, React, jQuery, and Svelte, and product-shaped presets for common capability sets.
The 2.1.0 architecture is modular by default: use minimal renderer imports when you need one exact format, or choose preset-lite, preset-office, preset-engineering, or preset-all when your product needs a composed capability set. In Vite projects, @file-viewer/vite-plugin auto-discovers installed presets and injects the capability layer, so most teams do not hand-write renderer imports.
For pages with uncontrolled global CSS, use the Web Component / IIFE default Shadow DOM isolation or pass options.styleIsolation:'shadow' from framework packages. Theme customization should use --file-viewer-* tokens and stable ::part() surfaces.
For heavy users that need everything immediately:
npm install @file-viewer/vue3 @file-viewer/preset-all
npm install -D @file-viewer/vite-plugin # optional for VitefileViewerRenderers({ copyAssets: true })