v1.0.2 — Open Source

View Any File in the Browser

A single React component to render PDFs, DOCX, XLSX, DWG, DXF, images and more. No server required.

Get Started Live Demo
$ npm install univiewer
DWG DXF PDF DOCX XLSX CSV PNG JPG SVG TIFF WebP TXT

Why UniView?

One component. Every file type. Zero backend.

🧩

Plugin Architecture

Each format is a lazy-loaded plugin. Only loads the renderer you need. Extend with custom plugins.

GPU-Accelerated CAD

DWG & DXF render with Three.js WebGL. Geometry batching, instanced rendering, smooth controls.

🧵

Web Workers & WASM

File parsing runs off the main thread. DWG uses bundled WebAssembly. UI never freezes.

📄

Virtual Rendering

PDFs load pages on demand. XLSX uses virtual rows. Handles 1000+ page documents smoothly.

🎨

Annotations

Built-in pen, highlight, arrow, rectangle, and text tools. Export annotations as JSON.

🌙

Themes & TypeScript

Light, dark, and auto themes. Fully typed with strict TypeScript. IntelliSense for every prop.

Supported Formats

One component handles them all with dedicated rendering engines.

CategoryFormatsEngine
CADDWG, DXFThree.js WebGL + libredwg WASM
DocumentsPDFMozilla PDF.js (canvas)
DocumentsDOCX, DOCmammoth.js (HTML conversion)
SpreadsheetsXLSX, XLS, CSVSheetJS (virtual table)
ImagesPNG, JPG, SVG, WebP, TIFF, BMPHTML5 Canvas / Inline SVG
TextTXT, RTFMonospace with line numbers

Get Started

Up and running in under a minute.

1. Install

npm install univiewer

Peer dependencies: react and react-dom 18+.

2. Use the component

import { UniView } from 'univiewer';
import 'univiewer/style.css';

function App() {
  return <UniView file="./plan.pdf" />;
}

3. Customize (optional)

<UniView
  file={myFile}
  theme="dark"
  toolbar={true}
  sidebar={true}
  annotations={true}
  initialZoom="fit"
  onLoad={(info) => console.log(info)}
  onError={(err) => console.error(err)}
/>

What's Included

Everything you can import from univiewer.

UniView Main viewer component Component
useViewer Page, zoom, layer control Hook
useFileLoader Load files with progress Hook
useAnnotations Annotation CRUD + export Hook
PluginSystem Register custom renderers Class
detectFormat Detect format from filename Function
exportToImage Export view as PNG Function
exportToPDF Export view as PDF Function
useLayerStore CAD layer visibility Store