File Previews

Xplorer includes a rich file preview system that supports dozens of file formats without requiring external applications.

Preview Panel

The right sidebar shows an inline preview when a file is selected. The preview component is dynamically loaded based on file type using a factory pattern.

Supported Formats

Images

Formats: PNG, JPG, JPEG, GIF, SVG, WebP, BMP, ICO, TIFF
Features: Full resolution display, zoom, metadata display
Uses Tauri's convertFileSrc() for secure local file access

PDF Documents

Library: react-pdf with pdfjs-dist
Features: Multi-page navigation, zoom, page thumbnails
PDF text is also extracted for search indexing

Office Documents

DOCX: Rendered to HTML using mammoth.js
XLSX: Parsed with the xlsx library, displayed as interactive tables
PPTX: Text content extracted for preview

Code & Source Files

Library: react-syntax-highlighter
Supported languages: 100+ languages auto-detected by extension
Features: Line numbers, syntax highlighting with Tokyo Night theme

Plain Text

Formats: TXT, LOG, MD, JSON, XML, YAML, TOML, INI, CFG, ENV
Markdown: Rendered as formatted HTML with heading, list, and code block support

Spreadsheets & Data

CSV: Parsed with papaparse, displayed as a sortable table
JSON: Syntax-highlighted with collapsible tree view

Media

Video: MP4, WebM, AVI, MKV — Native browser video player
Audio: MP3, WAV, FLAC, OGG, AAC — Native browser audio player

Preview Factory

The preview system is implemented as a factory pattern in lib/preview-factory.ts:

class PreviewFactory {
  // Determines if a file can be previewed
  canPreview(file: FileEntry): boolean;

  // Returns the file's preview category
  getPreviewType(file: FileEntry): PreviewType;

  // Lazy-loads the appropriate preview component
  async getPreviewComponent(file: FileEntry): Promise<React.ComponentType>;
}

Preview Types

| Type | Extensions | | ------------- | ---------------------------------------- | | image | png, jpg, gif, svg, webp, bmp, ico | | pdf | pdf | | document | docx | | spreadsheet | xlsx | | code | js, ts, py, rs, go, java, cpp, + 90 more | | text | txt, log, md | | csv | csv | | json | json | | markdown | md, mdx | | video | mp4, webm, avi, mkv | | audio | mp3, wav, flac, ogg, aac |

Adding New Preview Types

To add a new preview type:

Create a component in client/src/components/previews/ that implements PreviewProps:

interface PreviewProps {
  file: FileEntry;
  onError?: (error: Error) => void;
  onLoad?: () => void;
}