<pdf-viewer>

A standalone web component for viewing PDF documents

View Demos API Documentation

Features

High-fidelity PDF rendering via Mozilla's PDF.js library.

Page-by-page or continuous scroll with keyboard shortcuts.

Fit-width, fit-page, manual zoom, and pinch-to-zoom on touch.

Full-text search with match highlighting and navigation.

Sidebar with lazy-rendered page thumbnails for quick navigation.

Auto-detects page theme or set explicitly via attribute.

Drag-and-drop, file picker, or programmatic ArrayBuffer loading.

13+ CSS custom properties for complete visual customization.

Install via npm:

npm install @profpowell/pdf-viewer

Or include via CDN:

<pdf-viewer src="document.pdf" style="height: 600px"></pdf-viewer>

<pdf-viewer src="report.pdf" page="1" zoom="fit-width" show-thumbnails title="Annual Report" style="height: 600px" ></pdf-viewer>

Part of the ProfPowell vanilla web components suite: