Distribution

Distribution

npm, GitHub, Releases, Self-hosting

Flyfish Viewer is distributed through standard npm packages, public GitHub repositories, release downloads, and self-hostable worker/WASM assets.

npm Registry

Common installs:

npm install @file-viewer/vue3 @file-viewer/preset-office
# Heavy users / all-format attachment centers:
npm install @file-viewer/vue3-full
# Replace @file-viewer/vue3 with @file-viewer/web / react / vue2.7 / vue2.6 / jquery / svelte for other stacks.

Every ecosystem has a matching *-full package. Full packages already include preset-all and their version-aligned renderer/Worker/WASM/font/vendor payload; do not install or pass another preset. Vite or the included CLI publishes those assets under <deployment-base>/file-viewer/, including the verified binary-PPT 0.3.2 runtime under vendor/ppt/.

Pass the preset through options.preset in Webpack, Rspack, Rollup, Umi, classic multi-page apps, or internal component libraries. Vite projects can additionally install and register the plugin:

npm install -D @file-viewer/vite-plugin

Recommended Vite setup:

fileViewerRenderers({
  copyAssets: true
})

After registration, the plugin recognizes installed full / @file-viewer/preset-* packages, injects the capability layer, and publishes complete full-package assets under <deployment-base>/file-viewer/. Use single renderer packages plus formats only for strict custom cuts.

Common customization boundaries:

Option	Purpose
copyAssets:true	Recognizes full packages / presets; full packages publish under <deployment-base>/file-viewer/ in dev and production, while standard packages/presets keep root placement; required for full packages
formats / renderers	Generates exact renderer imports when you do not use a preset, or when a preset needs a few extra formats
scan:true	Reads source hints such as fileViewerFormats, data-file-viewer-formats, and upload accept attributes
preset:'auto' / autoPresets:true	Keeps installed preset auto-activation enabled while scan:true is active
inject:false	Disables auto injection so application code can import virtual:file-viewer-renderers and pass options.renderers manually

Registry links:

• @file-viewer/core
• @file-viewer/web
• @file-viewer/vue3
• @file-viewer/react
• @file-viewer/svelte
• @file-viewer/renderer-word
• @file-viewer/renderer-presentation
• @file-viewer/ppt@0.3.2
• @file-viewer/pptx
• @file-viewer/preset-lite
• @file-viewer/preset-office
• @file-viewer/preset-engineering
• @file-viewer/preset-all
• @file-viewer/vite-plugin

File Viewer package metadata points to the public repositories, documentation, issue trackers, Apache-2.0 license, and npm donation URL: dev.flyfish.group/donate?source=npm. The bundled @file-viewer/ppt runtime and other dependencies retain their included licenses. @file-viewer/core stays lightweight and does not install Word or presentation engines directly. Use @file-viewer/preset-lite, @file-viewer/preset-office, or @file-viewer/preset-engineering for product-shaped bundles; use individual renderer packages for the smallest custom install, or @file-viewer/preset-all when you want the same full renderer matrix as the official demo. Presentation routing keeps two standalone engines: PowerPoint 97–2003 .ppt uses the Worker/OffscreenCanvas/WASM @file-viewer/ppt@0.3.2 package, while PPTX/OpenXML uses @file-viewer/pptx and its separate Worker. Normal ESM/Vite builds resolve the npm dependency directly. Demo, Full, copy-assets, and CDN/IIFE distributions ship the matching public runtime as one integrity-checked vendor/ppt/ directory, so .ppt works without URL configuration. pptModuleUrl, pptWorkerUrl, pptWasmUrl, and pptFontUrl are advanced overrides for custom asset routing. @file-viewer/ppt keeps its own included license; the public runtime keeps its visible watermark, and removing that PPT watermark requires commercial authorization.

GitHub

Main repository:

• github.com/flyfish-dev/file-viewer

Suggested discovery topics for the main repository:

file-viewer, document-viewer, document-preview, file-preview, office-viewer,
pdf-viewer, docx, pptx, xlsx, cad-viewer, drawio, excalidraw, web-component,
vue, react, svelte, typescript, wasm, offline-first, self-hosted

When you are ready to update the repository topics:

gh repo edit flyfish-dev/file-viewer \
  --remove-topic cad \
  --remove-topic office \
  --remove-topic jquery \
  --remove-topic ofd \
  --add-topic document-preview \
  --add-topic file-preview \
  --add-topic web-component \
  --add-topic self-hosted

GitHub currently allows up to 20 repository topics, so treat this list as the main SEO surface.

Release Downloads

GitHub Releases can carry:

• static demo builds
• docs builds
• npm tarballs for offline installs
• component demo builds
• source bundles
• demo GIF or MP4 assets for posts and README embeds

For offline or intranet package installs, download the tarballs and install them through a private registry or direct local paths. The public GitHub repository keeps source, small release metadata, and lightweight package output in git. Full demo, component demo, docs, and sample-file builds should live in GitHub Releases or Cloudflare Pages deployments instead of expanded top-level directories, so a normal clone stays practical. Use pnpm release:public -- --expanded-assets only for one-off delivery or mirror troubleshooting that truly needs expanded static assets.

Official Demo iframe Artifact

When a customer asks for the official demo build output for iframe integration, use the GitHub Release asset file-viewer-v2-*-official-demo-iframe.tar.gz. It does not require installing npm packages in the host application. Extract the whole archive to one static directory and keep assets/, vendor/, wasm/, and example/ together.

/iframe.html is the recommended chrome-free entry, and clean-URL static hosts can also use /iframe. /index.html keeps the original full demo and remains compatible with the same url, from, name, and postMessage(Blob) protocol.

URL-based iframe:

<iframe
  src="/file-viewer/iframe.html?url=/files/demo.docx"
  style="width:100%;height:720px;border:0"
  allow="fullscreen"
></iframe>

Blob handoff from the parent page:

<iframe
  id="viewer"
  src="/file-viewer/iframe.html?from=https%3A%2F%2Fapp.example.com&name=contract.docx"
></iframe>
<script>
  const file = await fetch('/api/files/contract.docx').then(response => response.blob())
  document.querySelector('#viewer').contentWindow.postMessage(file, 'https://static.example.com')
</script>

from must match the parent origin. The demo accepts only a Blob from that origin and renders it as the provided name. The archive also includes iframe-example.html, README.iframe.md, and iframe-manifest.json; pnpm release:demo-iframe:pack and pnpm verify:demo-iframe-artifact make this artifact part of the standard release flow.

Full-Package Runtime Assets

Full packages carry the renderer matrix and its same-version File Viewer-owned runtime assets. In non-Vite projects, publish that included payload with the Full package CLI:

npx --no-install file-viewer-copy-assets ./public/file-viewer

This copies and verifies Worker, WASM, PDF, CAD, Typst WASM/fonts, SQLite, Archive, binary-PPT 0.3.2, PPTX, Draw.io, and other renderer assets and writes flyfish-viewer-assets.json. Serve the directory from /file-viewer/.

Every full package uses file-viewer/ under the deployment base by default (/file-viewer/ at the origin root) and automatically points to the PDF.js, DOCX, binary-PPT, PPTX Worker, spreadsheet, CAD, Typst, Draw.io, SQLite, and Archive assets there. If assets live elsewhere, call setDefaultFullAssetBaseUrl('/your-prefix/') during startup; explicit options.*Url values keep the highest priority. Direct CDN web-full, or an intact deployment of its complete dist/, resolves all packaged assets relative to the script URL.

For Cloudflare Pages, edge compression is enabled according to the visitor Accept-Encoding header. scripts/deploy-cloudflare-pages.mjs also Brotli-compresses oversized WASM files before Direct Upload and writes Content-Encoding: br, Vary: Accept-Encoding, Content-Type: application/wasm, and long-term cache headers into _headers. This keeps large assets such as the Typst compiler WASM deployable under the original .wasm URL. After deployment, verify the live headers with:

pnpm verify:cloudflare-compression

Sponsorship

File Viewer-authored source and packages produced by this repository remain Apache-2.0 open source; the bundled @file-viewer/ppt runtime retains its independent LICENSE and NOTICE, while other dependencies retain their included licenses. Sponsorship helps fund compatibility work, documentation, examples, offline assets, and long-term maintenance:

• GitHub Sponsors for one-time or recurring contributions
• WeChat / Alipay for convenient domestic one-time support
• Enterprise support for private deployment, custom compatibility work, and committed response expectations

Sponsorship does not change access to open-source features and does not include a service-level agreement unless a published tier explicitly says otherwise.