pdf-viewer

A standalone <pdf-viewer> web component wrapping PDF.js with navigation, zoom, search, thumbnails, and dark mode. Drops into a Vanilla Breeze page with zero extra wiring.

Where to find it

npm: @profpowell/pdf-viewer
GitHub: ProfPowell/pdf-viewer
Live demo: profpowell.github.io/pdf-viewer
License: MIT

Install

Or via CDN ESM:

Demo

The component picks up VB color, spacing, typography, radius, and shadow tokens automatically. Switch the active theme on this site to see the toolbar/sidebar/borders re-skin in real time. The PDF page itself stays white in both light and dark mode by PDF/print convention.

Quick reference

Common attributes

Attribute	Description
`src`	URL of the PDF document.
`page`	Initial page number (1-based).
`zoom`	Number (`"1.5"`) or mode (`"fit-width"`, `"fit-page"`, `"auto"`).
`mode`	`light` or `dark`; omit to follow page/system preference.
`view`	`single` (default) or `continuous`.
`show-thumbnails` / `show-search` / `show-toolbar`	Toggle UI panels.
`lazy`	Defer loading until the component scrolls into view.

See the README for the full attribute, method, and event reference.

VB token consumption

The component reads VB tokens directly. No mapping required:

Surface	VB tokens consumed
Colors	`--color-surface`, `--color-surface-raised`, `--color-surface-sunken`, `--color-surface-hover`, `--color-border`, `--color-text`, `--color-text-muted`, `--color-interactive`
Typography	`--font-sans`, `--font-size-2xs` – `--font-size-l`
Spacing	`--size-3xs` – `--size-m`
Borders & radii	`--border-width-thin`, `--radius-xs`, `--radius-s`, `--radius-m`
Shadows	`--shadow-s`, `--shadow-m`, `--shadow-l`

Per-instance overrides via --pdf-viewer-* custom properties (e.g. --pdf-viewer-accent-color, --pdf-viewer-toolbar-bg, --pdf-viewer-sidebar-width) always win over VB tokens.