Ecosystem Packages

Recommended Packages

Standard component packages are intentionally light. Installing @file-viewer/vue3, @file-viewer/react, @file-viewer/web, @file-viewer/svelte, @file-viewer/jquery, or a Vue 2 package gives you the native ecosystem component, types, controller APIs, and the core foundation. Real format coverage is assembled by presets or individual renderer packages.

Full Package Asset Contract

Since 2.1.30, all eight Full packages share one delivery contract. They include and enable preset-all together with version-aligned renderer, Worker, WASM, font, Draw.io, SQLite, and other vendor assets; Vite or the included CLI publishes that payload on the application's own origin. The current layout includes both the integrity-checked binary .ppt 0.3.4 runtime and the lazy local EPUB engine with its NOTICE, so neither path needs a runtime CDN.

Do not install another preset-all or a separately versioned asset copier next to a Full package. All Full packages default to file-viewer/ under the deployment base; use setDefaultFullAssetBaseUrl('/your-prefix/') only when your static directory differs.

options.preset is the bundler-neutral assembly path. Webpack, Rspack, Rollup, Umi, classic multi-page apps, micro-frontends, and internal component libraries can import a preset explicitly and pass it to the component:

import officePreset from '@file-viewer/preset-office'

const viewerOptions = {
  preset: officePreset,
  rendererMode: 'replace'
}

Vite projects can additionally install @file-viewer/vite-plugin to remove manual imports. Vite plugins still need to be registered once in vite.config.ts; after that, fileViewerRenderers() or fileViewerRenderers({ copyAssets:true }) auto-discovers installed @file-viewer/preset-* packages and injects the generated virtual module into Vite HTML entrypoints. Components keep autoRenderers:true by default, so Vue, React, Svelte, jQuery, and Vanilla JavaScript / Pure Web receive the matching preview capability automatically. preset-all is intentionally complete and therefore heavier; production apps should normally prefer preset-lite, preset-office, preset-engineering, or individual renderers.

// vite.config.ts
import { fileViewerRenderers } from '@file-viewer/vite-plugin'

export default {
  plugins: [
    fileViewerRenderers({
      copyAssets: true
      // Installed presets are activated automatically; no hand-written import or renderers prop.
    })
  ]
}

Renderer Packages

Heavy renderers are split so applications can install only what they need:

• @file-viewer/renderer-pdf
• @file-viewer/renderer-word
• @file-viewer/renderer-ofd
• @file-viewer/renderer-presentation
• @file-viewer/renderer-cad
• @file-viewer/renderer-typst
• @file-viewer/renderer-archive
• @file-viewer/renderer-email
• @file-viewer/renderer-epub
• @file-viewer/renderer-text
• @file-viewer/renderer-image
• @file-viewer/renderer-media
• @file-viewer/renderer-mindmap
• @file-viewer/renderer-geo
• @file-viewer/renderer-drawing
• @file-viewer/renderer-3d
• @file-viewer/renderer-data
• @file-viewer/renderer-eda

Standard component packages depend on the lightweight core foundation by default. Install only the renderer packages your product needs, use @file-viewer/preset-lite / @file-viewer/preset-office / @file-viewer/preset-engineering for product-shaped bundles, or pass @file-viewer/preset-all when you want the complete official demo capability matrix. For example, PowerPoint preview is provided by @file-viewer/renderer-presentation, which routes binary .ppt to the native-WASM @file-viewer/[email protected] engine and PPTX/PPTM/POTX/POTM/PPSX/PPSM to the separate @file-viewer/pptx Worker engine. Neither engine enters the core-only install.

Style isolation is controlled by the shared options.styleIsolation field. Every standard component defaults to Shadow DOM so host global CSS cannot break the viewer. Customize with --file-viewer-* tokens plus ::part(); use styleIsolation:'none' only as a legacy light-DOM escape hatch. See Style Isolation And Customization.

Vite Auto Assembly

Use the Vite plugin when your app wants a complete developer experience without hand-writing every renderer import. The default setup auto-discovers installed presets; explicit formats and scan:true are only needed for strict custom cuts or source-hint driven assembly:

import { defineConfig } from 'vite'
import { fileViewerRenderers } from '@file-viewer/vite-plugin'

export default defineConfig({
  plugins: [
    fileViewerRenderers({
      copyAssets: true,
      chunkStrategy: 'renderer'
    })
  ]
})

With scan: true, use preset:'auto' or autoPresets:true when installed presets should remain active while source hints add extra renderers. The scan reads hints such as fileViewerFormats = ['pdf', 'docx'], data-file-viewer-formats="dwg,xmind", and upload accept=".pdf,.xlsx".

2.1.0 Modular Import Paths

Minimal import: install exactly the renderer you need

For a PDF-only product:

npm i @file-viewer/vue3 @file-viewer/renderer-pdf

import { pdfRenderer } from '@file-viewer/renderer-pdf'

const options = {
  rendererMode: 'replace',
  renderers: [pdfRenderer]
}

Replace @file-viewer/vue3 with @file-viewer/web, @file-viewer/react, @file-viewer/svelte, @file-viewer/jquery, @file-viewer/vue2.7, or @file-viewer/vue2.6 for other stacks. The options contract remains the same.

Composed import: choose a product-shaped preset

For an Office document platform:

npm i @file-viewer/vue3 @file-viewer/preset-office

import officePreset from '@file-viewer/preset-office'

const options = {
  rendererMode: 'replace',
  preset: officePreset
}

Use preset-lite for lightweight attachments, preset-engineering for CAD / 3D / Typst / EDA / data assets, and preset-all for the full sample matrix or all-format admin workbenches. Add preset:'auto' or autoPresets:true when you also enable scan:true, so installed presets and source hints work together. copyAssets:true copies Worker, WASM, PDF fonts, CAD, Typst WASM/fonts, Archive, and Data assets into your deployment directory so private intranet deployments do not depend on public CDNs.

React Legacy

React 16.8 and 17 projects use @file-viewer/react-legacy or @file-viewer/react-legacy-full. They keep the same props, controller, event, renderer, and preset contracts as the current React packages while avoiding a React 18 runtime requirement. See the React integration guide for the shared API and migration boundary.

jQuery

Use @file-viewer/jquery when a traditional admin system or legacy page already standardizes on jQuery-style plugins:

npm install @file-viewer/jquery

The package exposes a native jQuery integration over the same core options, events, operation guards, search, zoom, print, export, and renderer presets. It does not embed Vue or React.

Use @file-viewer/jquery-full for the complete matrix without importing a preset. Vite still uses copyAssets:true; non-Vite jQuery builds run the Full package's included npx --no-install file-viewer-copy-assets ./public/file-viewer command.

Svelte

Use @file-viewer/svelte for Svelte applications:

npm install @file-viewer/svelte

The Svelte package keeps framework-native props and events while delegating renderer work to @file-viewer/core and the selected renderer packages.

Use @file-viewer/svelte-full for the complete matrix without importing a preset. SvelteKit/Vite uses copyAssets:true; other builds run the Full package's included npx --no-install file-viewer-copy-assets ./public/file-viewer command.

Core API

Use @file-viewer/core when building a custom host or a new ecosystem package:

npm install @file-viewer/core

Core is pure TypeScript and owns shared contracts, file source normalization, renderer registration, lifecycle events, operation availability, asset manifests, search/zoom/print/export protocols, and utility APIs. UI-specific behavior belongs in the component package for each framework.

PPT and PPTX Engines

PowerPoint rendering is available through @file-viewer/renderer-presentation. Its lower-level engines keep binary and OpenXML formats separate:

npm install @file-viewer/[email protected] @file-viewer/pptx

Use @file-viewer/ppt only for PowerPoint 97–2003 .ppt, and @file-viewer/pptx only for PPTX/OpenXML presentations. Most application teams should use the presentation renderer or preset-office instead of calling either engine directly.

Compatibility Names

Compatibility packages keep old projects working, but new projects get clearer package names, better npm discoverability, and a cleaner upgrade path with the standard names.