File ViewerDocs
中文GitHub2K+
File ViewerDocs
File Viewer developer documentation

Preview private files. Keep every byte in the browser.

Start with a native component, choose renderers, presets, or a Full package, and self-host every runtime asset on your own origin.

Start integratingExplore format coverage
Recommended delivery pathBrowser-native
  1. 01
    ComponentWeb · Vue · React · Svelte
  2. 02
    CapabilityRenderer · Preset · Full
  3. 03
    Runtime assetsWorker · WASM · Fonts
Files parse and render locallySame-origin · offline-first · self-hosted
266
registered extensions (224 stable / 42 experimental)
45
preview pipelines
100%
self-hostable runtime
Clear entry points

Choose the path closest to your goal

Create or integrate with the CLIChoose frameworks, versions, and formats, or inspect an existing project before applying a reviewable plan.Choose a native componentVanilla, Web Component, Vue, React, Svelte, and jQuery.Ship self-hostedKeep Workers, WASM, fonts, and vendor assets on your own origin.
Recommended path

Integrate in five clear steps

Run the smallest path first, then add only the capabilities your product needs.

  1. 01Pick the native componentStart with Web Component, or use your framework-native package.
  2. 02Choose the capability layerUse Full for the complete matrix, or compose presets on demand.
  3. 03Publish offline assetsKeep Workers, WASM, and fonts on local same-origin paths.
  4. 04Pass the file and optionsUse a URL or File with one shared options contract.
  5. 05Verify real formatsTest your PDF, Office, CAD, and archive samples before shipping.
pnpm add @file-viewer/web-full
<script type="module">
  import '@file-viewer/web-full'
</script>

<flyfish-file-viewer
  src="/files/report.pdf"
  style="height: 720px"
/>
Open the complete integration guide
Engineering guarantees

Everything is verifiable before release

No conversion serverAuditable format matrixModular and Full pathsStatic HTML and raw Markdown