A single React component to render PDFs, DOCX, XLSX, DWG, DXF, images and more. No server required.
One component. Every file type. Zero backend.
Each format is a lazy-loaded plugin. Only loads the renderer you need. Extend with custom plugins.
DWG & DXF render with Three.js WebGL. Geometry batching, instanced rendering, smooth controls.
File parsing runs off the main thread. DWG uses bundled WebAssembly. UI never freezes.
PDFs load pages on demand. XLSX uses virtual rows. Handles 1000+ page documents smoothly.
Built-in pen, highlight, arrow, rectangle, and text tools. Export annotations as JSON.
Light, dark, and auto themes. Fully typed with strict TypeScript. IntelliSense for every prop.
One component handles them all with dedicated rendering engines.
| Category | Formats | Engine |
|---|---|---|
| CAD | DWG, DXF | Three.js WebGL + libredwg WASM |
| Documents | Mozilla PDF.js (canvas) | |
| Documents | DOCX, DOC | mammoth.js (HTML conversion) |
| Spreadsheets | XLSX, XLS, CSV | SheetJS (virtual table) |
| Images | PNG, JPG, SVG, WebP, TIFF, BMP | HTML5 Canvas / Inline SVG |
| Text | TXT, RTF | Monospace with line numbers |
Up and running in under a minute.
npm install univiewer
Peer dependencies: react and react-dom 18+.
import { UniView } from 'univiewer';
import 'univiewer/style.css';
function App() {
return <UniView file="./plan.pdf" />;
}
<UniView
file={myFile}
theme="dark"
toolbar={true}
sidebar={true}
annotations={true}
initialZoom="fit"
onLoad={(info) => console.log(info)}
onError={(err) => console.error(err)}
/>
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