@files-preview-app/preview-file

The all-in-one, 100% client-side file preview library for React, Next.js, Angular, Vue 3, Nuxt 3, and Vanilla JavaScript / TypeScript.
Preview PDF, Word (.docx), Excel (.xlsx), PowerPoint (.pptx), CSV/TSV, ZIP Archives, Rich Markdown, 3D Models (.stl, .obj), Images, Video, Audio, and Code/Text (190+ languages) with a built-in customizable toolbar (zoom, rotate, thumbnails, page jump, download, print). 100% free, permissive open-source, and client-side (zero cloud or server needed).

🌐 Live Interactive Demo

Try the interactive demo with instant sample files directly in your browser:
👉 Launch Live Demo (GitHub Pages)

• Instant samples for PDF, DOCX, XLSX, PPTX, CSV, ZIP, Markdown, 3D STL, SVG, and Code
• Drag-and-drop your own files from your computer
• Live framework code generator (React, Angular, Vue, Vanilla)
• Light & Dark mode toggle

📦 Installation

Install the single all-in-one package in your project:

npm install @files-preview-app/preview-file

Or using Yarn, pnpm, or Bun:

pnpm add @files-preview-app/preview-file
# or
yarn add @files-preview-app/preview-file
# or
bun add @files-preview-app/preview-file

Import the toolbar and viewer stylesheet in your global CSS or root component:

import '@files-preview-app/preview-file/styles.css';

🎯 Supported Frameworks & Version Matrix

| Framework | Supported Versions | Package Entry Point | Integration Notes | |---|---|---|---| | React | >=16.8.0 (React 17, 18, 19) | @files-preview-app/preview-file/react | Full Hooks, forwardRef, FilePreviewHandle | | Next.js | 13.x, 14.x, 15.x | @files-preview-app/preview-file/react | App Router ('use client') & Pages Router | | Angular | >=14.0.0 (Angular 15, 16, 17, 18, 19) | @files-preview-app/preview-file/angular | Standalone Component & NgModule, @ViewChild | | Vue 3 | >=3.0.0 (Vue 3.2, 3.3, 3.4, 3.5+) | @files-preview-app/preview-file/vue | Composition API (<script setup>) & Options API | | Nuxt 3 | >=3.0.0 | @files-preview-app/preview-file/vue | Wrapped inside <ClientOnly> component | | Vanilla JS / TS | ES2020+ | @files-preview-app/preview-file | Pure DOM API, Vite, Webpack, Rollup, Parcel, esbuild | | Svelte / Solid | All versions | @files-preview-app/preview-file | Direct DOM container attachment |

🚀 Framework Integration Guides

1. React (@files-preview-app/preview-file/react)

Basic Usage

import React, { useState } from 'react';
import { FilePreview } from '@files-preview-app/preview-file/react';
import '@files-preview-app/preview-file/styles.css';

export default function App() {
  const [file, setFile] = useState<File | string>(
    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  );

  return (
    <div style={{ padding: '20px' }}>
      <input
        type="file"
        onChange={(e) => e.target.files?.[0] && setFile(e.target.files[0])}
      />

      <div style={{ width: '100%', height: '750px', marginTop: '16px' }}>
        <FilePreview
          src={file}
          options={{
            theme: 'light', // 'light' | 'dark' | 'auto'
            showToolbar: true,
            toolbarPosition: 'top', // 'top' | 'bottom'
            showThumbnails: false,
          }}
          onLoading={() => console.log('File loading started')}
          onLoaded={(info) => console.log('Loaded successfully:', info)}
          onError={(err) => console.error('Preview error:', err)}
          onPageChange={(data) => console.log('Page switched:', data)}
          onZoomChange={(data) => console.log('Zoom scale:', data)}
        />
      </div>
    </div>
  );
}

Advanced React (Programmatic Controls via ref)

import React, { useRef, useState } from 'react';
import { FilePreview, type FilePreviewHandle } from '@files-preview-app/preview-file/react';
import '@files-preview-app/preview-file/styles.css';

export default function AdvancedViewer() {
  const previewRef = useRef<FilePreviewHandle>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [file, setFile] = useState<string>('https://example.com/contract.docx');

  // Trigger instance methods programmatically
  const handleZoomIn = () => previewRef.current?.getInstance()?.zoomIn?.();
  const handleZoomOut = () => previewRef.current?.getInstance()?.zoomOut?.();
  const handleRotate = () => previewRef.current?.getInstance()?.rotateCW?.();
  const handleDownload = () => previewRef.current?.getInstance()?.download?.();
  const handlePrint = () => previewRef.current?.getInstance()?.print?.();
  const handleNextPage = () => {
    const next = currentPage + 1;
    previewRef.current?.getInstance()?.goToPage?.(next);
  };

  return (
    <div>
      {/* Custom external controls */}
      <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
        <button onClick={handleZoomIn}>Zoom In (+)</button>
        <button onClick={handleZoomOut}>Zoom Out (-)</button>
        <button onClick={handleRotate}>Rotate (90°)</button>
        <button onClick={handleNextPage}>Next Page</button>
        <button onClick={handleDownload}>Download File</button>
        <button onClick={handlePrint}>Print</button>
      </div>

      <div style={{ width: '100%', height: '800px' }}>
        <FilePreview
          ref={previewRef}
          src={file}
          options={{ theme: 'light', showToolbar: true }}
          onPageChange={(data: any) => setCurrentPage(data.page)}
        />
      </div>
    </div>
  );
}

2. Next.js (App Router & Pages Router)

Because file previews use client-side DOM and canvas APIs, disable SSR using Next.js dynamic:

'use client';

import dynamic from 'next/dynamic';
import '@files-preview-app/preview-file/styles.css';

// Disable SSR for the preview component
const FilePreview = dynamic(
  () => import('@files-preview-app/preview-file/react').then((mod) => mod.FilePreview),
  { ssr: false }
);

export default function NextPreviewPage() {
  return (
    <main style={{ width: '100vw', height: '100vh' }}>
      <FilePreview
        src="https://example.com/spreadsheet.xlsx"
        options={{ theme: 'auto', showToolbar: true }}
      />
    </main>
  );
}

3. Angular (@files-preview-app/preview-file/angular)

Standalone Component (Angular 14, 15, 16, 17, 18, 19)

import { Component, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FilePreviewComponent } from '@files-preview-app/preview-file/angular';

@Component({
  selector: 'app-document-viewer',
  standalone: true,
  imports: [CommonModule, FilePreviewComponent],
  template: `
    <div class="viewer-wrapper" style="width: 100%; height: 800px;">
      <!-- File Selector -->
      <input type="file" (change)="onFileChange($event)" />

      <!-- Custom Actions -->
      <div class="actions" style="margin: 10px 0;">
        <button (click)="zoomIn()">Zoom In</button>
        <button (click)="zoomOut()">Zoom Out</button>
        <button (click)="download()">Download</button>
      </div>

      <!-- Preview Component -->
      <fp-file-preview
        #preview
        [src]="selectedFile"
        [options]="{ theme: 'light', showToolbar: true, toolbarPosition: 'top' }"
        (loading)="onLoading()"
        (loaded)="onLoaded($event)"
        (error)="onError($event)"
        (pageChange)="onPageChange($event)"
        (zoomChange)="onZoomChange($event)"
      />
    </div>
  `,
  styleUrls: ['@files-preview-app/preview-file/styles.css']
})
export class DocumentViewerComponent {
  @ViewChild('preview') previewComponent!: FilePreviewComponent;

  selectedFile: string | File = 'https://example.com/presentation.pptx';

  onFileChange(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files?.[0]) {
      this.selectedFile = input.files[0];
    }
  }

  // Programmatic controls
  zoomIn() {
    this.previewComponent.getInstance()?.zoomIn?.();
  }

  zoomOut() {
    this.previewComponent.getInstance()?.zoomOut?.();
  }

  download() {
    this.previewComponent.getInstance()?.download?.();
  }

  // Event handlers
  onLoading() {
    console.log('Loading file...');
  }

  onLoaded(event: unknown) {
    console.log('File successfully loaded:', event);
  }

  onError(err: Error) {
    console.error('Failed to preview file:', err);
  }

  onPageChange(data: unknown) {
    console.log('Page switched:', data);
  }

  onZoomChange(data: unknown) {
    console.log('Zoom changed:', data);
  }
}

Traditional NgModule (Angular 14+)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FilePreviewComponent } from '@files-preview-app/preview-file/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FilePreviewComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. Vue 3 (@files-preview-app/preview-file/vue)

Composition API (<script setup>)

<template>
  <div class="preview-container" style="width: 100%; height: 800px;">
    <!-- Controls Bar -->
    <div class="toolbar-actions" style="margin-bottom: 12px; display: flex; gap: 8px;">
      <input type="file" @change="handleFileSelect" />
      <button @click="zoomIn">Zoom In (+)</button>
      <button @click="zoomOut">Zoom Out (-)</button>
      <button @click="rotate">Rotate (90°)</button>
      <button @click="download">Download</button>
    </div>

    <!-- Universal Preview Component -->
    <FilePreview
      ref="previewRef"
      :src="fileSource"
      :options="{
        theme: 'light',
        showToolbar: true,
        toolbarPosition: 'top'
      }"
      @loading="onLoading"
      @loaded="onLoaded"
      @error="onError"
      @page-change="onPageChange"
      @zoom-change="onZoomChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { FilePreview } from '@files-preview-app/preview-file/vue';
import '@files-preview-app/preview-file/styles.css';

const previewRef = ref<InstanceType<typeof FilePreview> | null>(null);
const fileSource = ref<string | File>('https://example.com/archive.zip');

function handleFileSelect(e: Event) {
  const target = e.target as HTMLInputElement;
  if (target.files?.[0]) {
    fileSource.value = target.files[0];
  }
}

// Programmatic methods
function zoomIn() {
  previewRef.value?.getInstance()?.zoomIn?.();
}

function zoomOut() {
  previewRef.value?.getInstance()?.zoomOut?.();
}

function rotate() {
  previewRef.value?.getInstance()?.rotateCW?.();
}

function download() {
  previewRef.value?.getInstance()?.download?.();
}

// Event callbacks
function onLoading() {
  console.log('Rendering file...');
}

function onLoaded(metadata: unknown) {
  console.log('Preview ready:', metadata);
}

function onError(err: unknown) {
  console.error('Preview error:', err);
}

function onPageChange(pageData: unknown) {
  console.log('Page switched:', pageData);
}

function onZoomChange(zoomData: unknown) {
  console.log('Zoom changed:', zoomData);
}
</script>

Nuxt 3 Integration

Wrap inside <ClientOnly> to avoid server-side rendering:

<template>
  <ClientOnly>
    <div style="height: 800px;">
      <FilePreview src="/documents/sample.pdf" />
    </div>
    <template #fallback>
      <div>Loading preview component...</div>
    </template>
  </ClientOnly>
</template>

<script setup lang="ts">
import { FilePreview } from '@files-preview-app/preview-file/vue';
import '@files-preview-app/preview-file/styles.css';
</script>

5. Vanilla JavaScript / TypeScript (@files-preview-app/preview-file)

Use directly with any build tool (Vite, Webpack, Rollup) or via <script type="module">:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Universal File Preview</title>
  <!-- Link Stylesheet -->
  <link rel="stylesheet" href="node_modules/@files-preview-app/preview-file/dist/styles.css" />
  <style>
    #viewer-container {
      width: 100%;
      height: 850px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div style="margin-bottom: 12px; display: flex; gap: 8px;">
    <input type="file" id="file-picker" />
    <button id="btn-zoom-in">Zoom In</button>
    <button id="btn-zoom-out">Zoom Out</button>
    <button id="btn-download">Download</button>
  </div>

  <div id="viewer-container"></div>

  <script type="module">
    import { FilePreviewViewer } from './node_modules/@files-preview-app/preview-file/dist/index.js';

    const container = document.getElementById('viewer-container');
    const filePicker = document.getElementById('file-picker');

    // 1. Instantiate viewer
    const viewer = new FilePreviewViewer();

    // 2. Listen to lifecycle events
    viewer.on('loading', () => console.log('File loading started'));
    viewer.on('loaded', (info) => console.log('File loaded:', info));
    viewer.on('error', (err) => console.error('Preview error:', err));
    viewer.on('page-change', (data) => console.log('Page switched:', data));

    // 3. Render initial file
    let instance = await viewer.preview(
      container,
      'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
      {
        theme: 'light',
        showToolbar: true,
        toolbarPosition: 'top'
      }
    );

    // 4. Handle file selection from local disk
    filePicker.addEventListener('change', async (e) => {
      const file = e.target.files[0];
      if (file) {
        instance = await viewer.preview(container, file, { theme: 'light' });
      }
    });

    // 5. Connect custom buttons to instance methods
    document.getElementById('btn-zoom-in').addEventListener('click', () => instance?.zoomIn?.());
    document.getElementById('btn-zoom-out').addEventListener('click', () => instance?.zoomOut?.());
    document.getElementById('btn-download').addEventListener('click', () => instance?.download?.());
  </script>
</body>
</html>

🎛️ Complete Methods Reference

1. FilePreviewViewer (Viewer Class Methods)

| Method | Parameters | Returns | Description | |---|---|---|---| | preview() | container: HTMLElement, source: FileSource, options?: PreviewViewerOptions | Promise<PreviewInstance> | Renders any supported file into the target DOM element. Cleans up previous renders automatically. | | getInstance() | None | PreviewInstance \| null | Returns the active preview instance, exposing zoom, navigation, export, and rotation methods. | | openInSeparateWindow() | None | Window \| null | Clones current file buffer and opens it in a full-screen isolated browser tab. | | setShowFileName(show) | show: boolean | void | Dynamically toggles the file name and format badge title bar above the toolbar. | | setFileName(name) | name: string | void | Dynamically updates the displayed file title in the preview panel. | | setToolbarConfig(config) | config: ToolbarConfig | void | Dynamically reconfigures which toolbar buttons/actions are shown. | | getToolbarConfig() | None | ToolbarConfig | Returns the active toolbar configuration. | | hideToolbarAction(id) | actionId: string | void | Hides a specific toolbar action by ID or alias (e.g. 'zoomIn', 'print', 'download'). | | showToolbarAction(id) | actionId: string | void | Shows a previously hidden toolbar action. | | enableToolbarAction(id) | actionId: string | void | Enables a disabled toolbar action button. | | disableToolbarAction(id) | actionId: string | void | Disables a toolbar action button. | | toggleThumbnails() | None | void | Toggles the page/sheet thumbnail sidebar panel. | | toggleFullscreen() | None | void | Toggles browser fullscreen on the viewer container. | | fitToPage() | None | void | Scales document page or table so it fits the frame width with minimal margins. | | zoomIn() | None | void | Programmatically zooms in. | | zoomOut() | None | void | Programmatically zooms out. | | setZoom(level) | level: number | void | Programmatically sets exact zoom scale (e.g. 1.5 = 150%). | | getZoom() | None | number | Returns current zoom level. | | rotateCW() | None | void | Rotates document or image 90° clockwise. | | rotateCCW() | None | void | Rotates document or image 90° counter-clockwise. | | goToPage(page) | page: number | void | Navigates to a specific page or sheet (1-based index). | | nextPage() | None | void | Navigates to next page or sheet. | | prevPage() | None | void | Navigates to previous page or sheet. | | getPageCount() | None | number | Returns total page/sheet count. | | getCurrentPage() | None | number | Returns current active page number (1-based). | | download() | None | void | Downloads current file with original name and detected MIME type. | | print() | None | void | Triggers browser print dialog for document. | | on(event, handler) | event: string, handler: (data: any) => void | Unsubscribe: () => void | Subscribes to lifecycle events. Returns an unsubscribe cleanup function. | | registerPlugin(plugin) | plugin: PreviewPlugin | this | Registers a custom renderer plugin. | | registerPlugins(list) | plugins: PreviewPlugin[] | this | Registers multiple renderer plugins at once. | | destroy() | None | void | Destroys the active instance, removes toolbar DOM, cancels network abort controllers, and clears listeners. |

2. PreviewInstance (Active Document Instance Methods)

Retrieved via viewer.getInstance() or previewRef.current.getInstance().

| Category | Method | Return Type | Description | Example Usage | |---|---|---|---|---| | Zoom | zoomIn() | void | Increments zoom level by 20% | instance.zoomIn() | | Zoom | zoomOut() | void | Decrements zoom level by 20% | instance.zoomOut() | | Zoom | setZoom(level) | void | Sets absolute zoom scale (e.g. 1.5 = 150%) | instance.setZoom(1.5) | | Zoom | getZoom() | number | Gets current zoom scale number | const z = instance.getZoom() | | Zoom | fitToPage() | void | Resets zoom to fit container viewport | instance.fitToPage() | | Pagination | goToPage(page) | void | Jumps to specific page, sheet, or slide (1-indexed) | instance.goToPage(3) | | Pagination | getPageCount() | number | Returns total page, sheet, or slide count | const total = instance.getPageCount() | | Pagination | getCurrentPage() | number | Returns current 1-indexed page or sheet | const cur = instance.getCurrentPage() | | Rotation | rotateCW() | void | Rotates document, image, or video 90° clockwise | instance.rotateCW() | | Rotation | rotateCCW() | void | Rotates 90° counter-clockwise | instance.rotateCCW() | | Rotation | getRotation() | number | Returns rotation angle in degrees (0, 90, 180, 270) | const deg = instance.getRotation() | | Media | play() | void | Starts video or audio playback | instance.play() | | Media | pause() | void | Pauses video or audio playback | instance.pause() | | Media | isPlaying() | boolean | Checks if media is currently playing | if (instance.isPlaying()) ... | | Thumbnails | getThumbnails() | Thumbnail[] | Returns list of thumbnails for sidebar | const thumbs = instance.getThumbnails() | | Thumbnails | toggleThumbnails()| void | Toggles the page thumbnails sidebar panel | instance.toggleThumbnails() | | Export | download() | void | Downloads original file with proper name & MIME | instance.download() | | Export | print() | void | Opens browser print dialog formatted for clean output | instance.print() | | Lifecycle | destroy() | void | Releases memory, cancels rendering, revokes blob URLs | instance.destroy() |

🛠️ Toolbar Configuration & Feature Toggles

All toolbar features and buttons are completely configurable through options and instance methods. If an action is set to false, its button will not appear in the toolbar.

Via Initialization Options:

// Flat options:
await viewer.preview(container, file, {
  zoomIn: false,     // Hide zoom in button
  print: false,      // Hide print button
  openWindow: false, // Hide "Open in Separate Full Window" button
  download: true     // Keep download enabled
});

// Or nested toolbar object:
await viewer.preview(container, file, {
  toolbar: {
    zoomIn: false,
    print: false,
    copy: false
  }
});

Via Runtime Instance Methods:

// Hide an action dynamically
viewer.hideToolbarAction('zoomIn');
viewer.hideToolbarAction('print');

// Show a hidden action
viewer.showToolbarAction('zoomIn');

// Disable/enable an action button without removing it
viewer.disableToolbarAction('fitPage');
viewer.enableToolbarAction('fitPage');

// Reconfigure the entire toolbar at runtime
viewer.setToolbarConfig({
  zoomIn: false,
  zoomOut: false,
  download: true
});

Available Toolbar Toggle Keys:

| Option Key | Corresponding Action | Description | |---|---|---| | zoomIn | Zoom In | Zoom in button | | zoomOut | Zoom Out | Zoom out button | | fitPage / fitToPage | Fit to Page | Scales document to fill frame width with minimal side margins | | rotate / rotateCW | Rotate | 90° Clockwise rotation | | fullscreen | Fullscreen | Fullscreen frame toggle | | thumbnails | Thumbnails | Sidebar thumbnail toggle | | download | Download | File download button | | print | Print | Browser clean print button | | openWindow / openSeparateWindow | Open in Separate Window | Opens preview in a standalone window | | copy | Copy Text | Copy document text to clipboard | | pageNav / pagination | Pagination | Previous, next, and jump-to-page input |

📡 Complete Events Reference

All events can be listened to via framework bindings (onLoaded, (loaded), @loaded) or viewer.on('event', handler):

| Event Name | Framework Prop / Event | Payload Type | Description | |---|---|---|---| | 'loading' | onLoading / (loading) / @loading | { source: FileSource } | Emitted immediately when file parsing and decoding starts. | | 'loaded' | onLoaded / (loaded) / @loaded | { metadata: FileMetadata, plugin: string } | Emitted when file rendering completes successfully. Contains detected metadata. | | 'error' | onError / (error) / @error | Error | Emitted if file download, decoding, or rendering fails. | | 'page-change' | onPageChange / (pageChange) / @page-change | { page: number, totalPages?: number } | Emitted when user navigates to another page, Excel sheet, or PPT slide. | | 'zoom-change' | onZoomChange / (zoomChange) / @zoom-change | { zoom: number } | Emitted whenever zoom level changes. | | 'rotate' | onRotate / (rotate) / @rotate | { rotation: number } | Emitted when orientation rotates (0°, 90°, 180°, 270°). | | 'destroy' | onDestroy / (destroy) / @destroy | null | Emitted when viewer is cleaned up. |

Practical Event Examples

1. Show File Metadata Badge on Loaded

viewer.on('loaded', ({ metadata, plugin }) => {
  console.log('File Name:', metadata.name);
  console.log('File Size:', (metadata.size / 1024).toFixed(1) + ' KB');
  console.log('Detected MIME:', metadata.mimeType);
  console.log('Renderer Plugin:', plugin);
});

2. Display Custom Error Toast Notification

viewer.on('error', (err) => {
  showToastNotification(`Cannot open file: ${err.message}`, { type: 'error' });
});

3. Synchronize External Page Counter

viewer.on('page-change', ({ page, totalPages }) => {
  pageIndicatorEl.innerText = `Page ${page} of ${totalPages || '?'}`;
});

⚙️ Complete Properties & Options Reference

1. src Property (Accepts 5 Source Formats)

The src prop accepts any of the following types:

| Format | Type | Example | |---|---|---| | Local File | File | From <input type="file"> event: e.target.files[0] | | URL String | string | Remote or local URL: 'https://example.com/file.pdf' | | Blob | Blob | new Blob([binaryData], { type: 'application/pdf' }) | | ArrayBuffer | ArrayBuffer | Direct binary buffer: await response.arrayBuffer() | | TypedArray | Uint8Array | Byte array: new Uint8Array(buffer) | | Base64 URI | string | Data URI: 'data:image/png;base64,iVBORw0...' |

2. options Object Reference

Passed to options prop in React/Angular/Vue or third argument to viewer.preview(container, src, options):

| Option Property | Type | Default | Description | |---|---|---|---| | theme | 'light' \| 'dark' \| 'auto' | 'light' | UI theme. 'auto' adapts to system dark mode preferences. | | showToolbar | boolean | true | Set false to hide built-in toolbar (e.g. when using your own custom buttons). | | toolbar | boolean \| ToolbarConfig | true | Fine-grained button visibility flags (zoomIn, print, download, pageNav, etc.). | | toolbarPosition | 'top' \| 'bottom' | 'top' | Positions toolbar at the top or bottom of the viewer container. | | showFileName | boolean | true | When true, displays file name and format badge in title bar above toolbar. | | fileName | string | undefined | Custom file title override displayed in title bar. | | fitMode | 'page' \| 'width' | 'page' | Preferred fit calculation strategy. | | showThumbnails | boolean | false | Opens page thumbnails sidebar panel automatically on load. | | className | string | '' | Custom CSS class attached to the root viewer container element. | | zoom | number | 1.0 | Initial zoom multiplier (1.0 = 100%, 1.5 = 150%). | | page | number | 1 | Initial page, slide, or sheet number to display on load (1-based). | | locale | string | 'en' | UI label language localization. | | metadata | FileMetadata | undefined | Manual override object for file attributes (name, extension, mimeType, size). | | standaloneViewerUrl | string | undefined | Custom URL opened when user clicks "Open in Separate Full Window". | | onOpenSeparateWindow | function | undefined | Custom callback hook to handle opening preview in separate window. | | pluginOptions | Record<string, unknown> | {} | Custom options passed directly to underlying format renderer plugins. |

📖 For exhaustive details and TypeScript interfaces, see the full API Reference Documentation.

🎨 CSS Variables (Theming & Custom Styling)

Customize colors, borders, and typography using standard CSS custom properties:

/* Custom Brand Theme */
.fp-viewer {
  --fp-bg: #ffffff;             /* Viewer background */
  --fp-toolbar-bg: #f8fafc;     /* Toolbar background */
  --fp-border: #e2e8f0;         /* Borders and dividers */
  --fp-text: #0f172a;           /* Text color */
  --fp-primary: #3b82f6;        /* Active buttons and highlights */
  --fp-btn-hover: #f1f5f9;      /* Toolbar button hover color */
  --fp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Dark Theme Overrides */
.fp-theme-dark {
  --fp-bg: #0f172a;
  --fp-toolbar-bg: #1e293b;
  --fp-border: #334155;
  --fp-text: #f8fafc;
  --fp-primary: #60a5fa;
  --fp-btn-hover: #334155;
}

📂 Supported Formats Matrix (All 10 Categories)

Every file format is rendered 100% in the browser using permissive open-source engines:

| Category | File Extensions | Engine | License | Supported Features | |---|---|---|---|---| | PDF | .pdf | PDF.js (pdfjs-dist) | Apache-2.0 | Multi-page canvas rendering, Zoom In/Out, Fit to page, Rotate CW/CCW, Page jump, Thumbnails sidebar, Print, Download | | Word Document | .docx | docx-preview | Apache-2.0 | Preserves styles, tables, bullets, images, fonts, Zoom In/Out, Fit to page, Print, Download | | Excel Spreadsheet | .xlsx, .xls | exceljs | MIT | Multi-sheet tab bar, styled grid cells, borders, formatting, Zoom, Print, Download | | PowerPoint | .pptx, .ppsx | pptx-browser | MIT | Slide-by-slide canvas rendering, slide thumbnails sidebar, navigation jump, Zoom, Fit to slide, Print, Download | | CSV / TSV Data | .csv, .tsv | papaparse | MIT | Auto-detects comma/tab delimiter, tabular grid with header styling, Zoom, Print, Download | | ZIP Archives | .zip | fflate | MIT | Hierarchical file tree/table explorer, compression stats, instant search filter, single-file extract/download, download ZIP | | Rich Markdown | .md, .markdown | marked + dompurify | MIT / Apache-2.0 | GitHub Flavored Markdown (tables, checklists, blockquotes), syntax-highlighted code blocks, XSS sanitized, font zoom, Print, Download | | 3D Models | .stl, .obj | three (Three.js) | MIT | 360° mouse orbit controls, perspective camera, ambient & directional lighting, wireframe vs solid toggle, reset view, Download | | Images & Vector | .png, .jpg, .jpeg, .gif, .webp, .bmp, .svg, .ico, .tiff | Native + @panzoom/panzoom + dompurify | MIT / Apache-2.0 | Smooth pan & zoom, rotate 90°, SVG DOM sanitization, Print, Download | | Video & Audio | .mp4, .webm, .ogg, .mov, .mp3, .wav, .flac, .aac | Native HTML5 Media | MIT | Play/Pause, seek bar, volume control, video rotate, fullscreen, Download | | Code & Text | .js, .ts, .jsx, .tsx, .html, .css, .json, .xml, .yaml, .py, .java, .cpp, .sql, .sh, etc. (190+ languages) | highlight.js | BSD-3-Clause | Syntax highlighting, line numbers gutter, font zoom in/out, Print, Download |

🛡️ Security & Privacy Guarantee

• 🔒 100% Client-Side: Files never leave the user's browser. No documents are uploaded to third-party clouds or external rendering servers.
• 🛡️ XSS Protection: All HTML, Markdown, and SVG inputs are strictly sanitized with DOMPurify.
• 🆓 100% Permissive Open-Source: All libraries used are audited under MIT, Apache-2.0, or BSD-3-Clause. No GPL, AGPL, copyleft claims, or paid commercial subscriptions. See THIRD_PARTY_LICENSES.md.

👨‍💻 Author & Community

Sumit Patel

• 🌐 GitHub: @patelsumit5192
• 📦 NPM: patel.sumit51
• 💻 Repository: https://github.com/patelsumit5192/preview-file
• 🚀 Live Demo: https://patelsumit5192.github.io/preview-file/

📄 License

MIT © 2026 Sumit Patel