English | 简体中文
A modern, feature-rich file preview component library with first-class support for both React and Vue. Preview images, videos, audio, PDFs, Office documents (Word, Excel, PowerPoint), Markdown, and code files — through a shared core and framework-specific bindings.
Modern UI — Apple-inspired minimalist design with glassmorphism effects
20+ Format Support — Images, videos, audio, PDF, Office, code, e-books, and more
Dual Display Modes — Full-screen modal or inline embedded preview
Multi-framework Support — React and Vue share core logic with consistent APIs
Full Interaction — Keyboard navigation, drag-and-drop, zoom/rotate, custom players
 Documentation & Demos |
 Packages & Resources |
 Development & Contributing |
|
• Full Documentation • React Demo • Vue Demo |
• React Package • Vue Package • Issue Tracker |
• Monorepo Structure • Dev Commands • Contributing Guide |
npm install @eternalheart/react-file-previewimport { FilePreviewModal } from '@eternalheart/react-file-preview';
import '@eternalheart/react-file-preview/style.css';
<FilePreviewModal
files={[file]}
currentIndex={0}
isOpen={true}
onClose={() => setIsOpen(false)}
/>
npm install @eternalheart/vue-file-preview<script setup>
import { FilePreviewModal } from '@eternalheart/vue-file-preview';
import '@eternalheart/vue-file-preview/style.css';
</script>
<template>
<FilePreviewModal
:files="[file]"
:current-index="0"
:is-open="true"
@close="isOpen = false"
/>
</template>
| Package | Description | Version | Documentation |
|---|---|---|---|
| @eternalheart/react-file-preview | React component library | |
README |
| @eternalheart/vue-file-preview | Vue 3 component library |  |
README |
| file-preview-core | Framework-agnostic core | Internal | - |
| Type | Formats | Key Features |
|---|---|---|
| Images | JPG, PNG, GIF, WebP, SVG, BMP, ICO, AVIF, HEIC | Zoom (0.1x-10x), rotate, drag, mouse wheel zoom |
| Videos | MP4, WebM, OGG, MOV, AVI, MKV, M4V, 3GP, FLV | Custom player, progress control, volume adjustment, fullscreen |
| Audio | MP3, WAV, OGG, M4A, AAC, FLAC | Custom player, progress bar, volume control, skip forward/backward |
| Documents | PDF, DOCX, XLSX, PPTX/PPT | Pagination, zoom, slide preview, spreadsheet view |
| Code | JS, TS, Python, Java, C++, Go, Rust, and 40+ languages | Syntax highlighting, theme support, line numbers |
| Subtitles | SRT, WebVTT, LRC, ASS/SSA, TTML/DFXP | Timeline parsing, metadata extraction, structured display |
| Others | Markdown, CSV, JSON, XML, ZIP, MSG, EPUB, Fonts | Rendering, formatting, tree view, character set preview |
This project uses a pnpm workspace monorepo architecture:
file-preview/
├── packages/
│ ├── file-preview-core/ # Framework-agnostic core (types, detection, parsers)
│ ├── react-file-preview/ # React bindings → @eternalheart/react-file-preview
│ ├── vue-file-preview/ # Vue bindings → @eternalheart/vue-file-preview
│ ├── example/ # React demo app (deployed to GitHub Pages)
│ ├── vue-example/ # Vue demo app (deployed to GitHub Pages /vue)
│ └── docs/ # VitePress documentation site
└── openspec/ # OpenSpec change records
pnpm install# Start dev servers
pnpm dev # React demo
pnpm dev:vue # Vue demo
pnpm dev:docs # Documentation site
# Build
pnpm build # Build all packages
pnpm build:lib # Build library only
pnpm build:example # Build examples only
# Preview builds
pnpm preview:example # Preview example build
pnpm preview:docs # Preview docs build
# Deploy and publish
pnpm deploy # Deploy examples and docs to GitHub Pages
pnpm pub # Publish library to npm- Fork this repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Submit a Pull Request
| Key | Action |
|---|---|
ESC |
Close preview |
← / → |
Navigate to previous/next file |
Mouse Wheel |
Zoom image (image preview only) |
- GitHub: wh131462/file-preview
- Documentation: wh131462.github.io/file-preview/docs
- Issue Tracker: GitHub Issues
- Community: Linux.do
If this project helps you, please:
Star the project on GitHub
Report issues to help us improve
Submit PRs to contribute code
Share it with more developers
