@pdfrx/viewer

A framework-agnostic, canvas-based PDF viewer for the browser. It provides the PdfrxViewer class and the <pdfrx-viewer> custom element, with navigation, zoom, text selection, links, search, forms, annotations, and page editing.

npm package · Live demo · API reference · Detailed guide

Highlights

• A single canvas renders sharp pages and re-renders them as zoom changes.
• Mouse and touch text selection include word selection, long-press handles, and a magnifier; search matches and PDF links are interactive.
• Annotation editing supports ink, shapes, markup, notes, FreeText, image stamps, snapping, multi-selection, and shared Undo/Redo.
• Interactive AcroForm controls stay synchronized with the underlying PDF.
• Page insertion, deletion, reordering, duplication, and rotation remain history-aware and can be encoded back to PDF.
• Vertical, horizontal, odd/even two-page spreads, and custom page layouts share navigation, animated fit modes, zoom, and coordinate conversion APIs.
• Rectangular capture renders a page sub-region to PNG/JPEG/WebP, and the same selection UI supports marquee zoom.
• Standard interactions resolve PDF copying, printing, assembly, annotation, and form permissions with optional application overrides.
• Page-following and viewport-fixed DOM overlays support custom application UI without replacing canvas rendering.
• The viewer background accepts CSS alpha colors, including transparent, so an embedding application's surface can remain visible around PDF pages.
• Pan and zoom can be restored together, with a Promise that completes only after every page region in that transform's logical viewer viewport has been painted at full quality.

Install

npm install @pdfrx/viewer

Minimal usage

import { PdfrxViewer } from '@pdfrx/viewer';

const viewer = new PdfrxViewer(document.querySelector('#viewer')!, {
  engineOptions: { wasmModulesUrl: '/pdfium/' },
  // Optional: let the embedding application's background show through.
  backgroundColor: 'transparent',
});

await viewer.openUrl('/manual.pdf');

Opening parses and lays out the PDF, but page bitmaps continue rendering asynchronously. To open at an initial page and wait until its visible regions are sharp and painted:

await viewer.openUrl('/manual.pdf');
viewer.goToPage(12, 0);
await viewer.waitForRender();

Use setViewTransform(transform) instead when restoring an exact saved pan and zoom; it applies the transform and includes the full-quality render wait. Save currentTransform, which is a ViewTransformSnapshot containing currentViewSize metadata, to preserve the same composition when restoring into a differently sized viewer. See waitForRender() and the viewer guide's complete initialization scenarios.

#viewer {
  width: 100%;
  height: 100vh;
}

Serve pdfium_worker.js and pdfium.wasm from node_modules/@pdfrx/engine/assets/ at the configured wasmModulesUrl. Remote PDF URLs must allow browser CORS access.

Next steps

• The viewer guide covers the custom element, layout, interaction, editing, overlays, events, and other viewer options.
• See PdfrxViewerOptions and the complete API reference.
• Related packages: @pdfrx/engine · @pdfrx/viewer · @pdfrx/react

License

MIT