EN Guide

Docs Home

Start From The Right Door

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 Vite

fileViewerRenderers({ copyAssets: true })