Open File Viewer
GitHub
Open source file preview SDK

Preview any file without the pain

A framework-agnostic embedded file viewer for vanilla JavaScript, React, Vue and Svelte. Put PDF, Office, images, media, archives, email, drawings, 3D, GIS and engineering files inside one stable container.

Get Started Live Demo
Works seamlessly with
Native JS TypeScript React Vue Svelte
preview/contract.pdf
0+ File formats
0 Built-in plugins
0 Framework adapters
MIT Open source license

Two ways to integrate

Use the ready-made viewer, or build your own.

Drop-in

OpenFileViewer Component

Ship quickly with toolbar, themes, multi-file queues, responsive containers and tested fallbacks.

terminal
$ npm install @open-file-viewer/core
Composable

Plugin-first Core

Attach custom renderers, WASM pipelines or server-converted output while React, Vue, Svelte and vanilla JS share one core.

viewer.ts
plugins: [pdfPlugin(), officePlugin(), customPlugin()]

Batteries included

PDF, Office, OFD, EPUB, XPS, image, media, archive, email, CAD, GIS, 3D and text plugins are ready to use.

Framework agnostic

Vanilla JavaScript, React, Vue and Svelte share the same core so teams can reuse one preview strategy across products.

Container-first

Every preview stays inside your DOM container with resize handling, dark mode, downloads and error boundaries.

Drop-in Integration

Add a viewer in minutes.

Pick Vanilla JS, React, Vue or Svelte. The plugin capability stays consistent, while the UI can start default and evolve later.

Open File Viewer

Try it live

Drop files and preview them instantly.

Local files stay in your browser and are not uploaded. Built-in samples cover Markdown, JSON, Office, SVG, DXF, 3D, GDSII, OASIS and DWG.

Format matrix

Built for real product attachments.

API Reference

A small API surface with room to extend.

The API stays focused: container, file, plugins, size, theme and lifecycle callbacks. Complex formats are extended through plugins.

Frameworks

Installation and integration guidance for Vanilla JS, React, Vue and Svelte.

 PreviewOptions

Complete reference for file sources, queues, sizing, themes, callbacks, fallbacks and instance methods.

 Toolbar Customization

Change labels, order, icons, approval/favorite/share actions or replace the toolbar completely.

 Plugin Protocol

Extend custom formats, server-converted results or product-specific renderers through the match/render protocol.

Ship file previews without building every renderer from scratch.

Start from a stable container and keep evolving preview capability.

Try the playground GitHub