Rendering

Sharp pages on high-density screens, smooth zooming without flicker, and graceful quality limits on memory-constrained devices.

Basics

Pages render to a canvas at the screen’s pixel density, so text stays crisp on high-density displays and when the browser is zoomed.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Zoom in quickly with the + button: each change cancels the previous render, and the old // page stays visible until the new one is ready. return <PdfViewer source="/samples/letter-3pages.pdf" defaultScale={2} zoomReset />; }

Rendering is built to stay correct under fast interaction:

Cancellable. Starting a new render (another zoom step, a page change) cancels the one in progress, so ten quick clicks produce one finished render.
Double-buffered. The previous page stays on screen until the next render is complete, so zooming never flashes blank.
Density-aware. A change of devicePixelRatio (moving the window to another monitor, browser zoom) re-renders at the new density.
Rotation-aware. Each page’s intrinsic rotation is applied before yours.

Pixel budget

maxCanvasPixels caps the size of each page’s canvas (16,777,216 pixels, 4096 × 4096, by default, the limit iOS Safari enforces). Beyond it, the page keeps its on-screen size but renders at a lower resolution.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // A deliberately tiny budget (250,000 pixels): the page keeps its size but renders at a lower // resolution, so it looks soft instead of failing on memory-constrained devices. return <PdfViewer source="/samples/letter-3pages.pdf" maxCanvasPixels={250_000} />; }

Customization

The page surface (background, border, radius and shadow) is styled with CSS variables.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; const style = { '--rpv-page-bg': '#fffdf7', '--rpv-page-border': '1px solid #e7e5e4', '--rpv-page-radius': '2px', '--rpv-page-shadow': '0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08)', } as CSSProperties; export default function Demo() { return <PdfViewer source="/samples/letter-3pages.pdf" style={style} />; }

See --rpv-page-bg, --rpv-page-border, --rpv-page-radius and --rpv-page-shadow in the CSS variables reference and the customization guide.

Advanced / escape hatch

PdfPageCanvas exposes the renderer directly, with maxCanvasPixels, fit (see FitOptions) and an onRender callback reporting the scale actually rendered. For performance advice across the whole viewer, see the Performance guide.

Limitations

Canvas rendering, not vector. Pages are bitmaps; extreme zoom levels are limited by the pixel budget. Workaround: raise maxCanvasPixels on desktop-only apps.
Rendering happens on the main thread. PDF.js parses in a worker, but painting a complex page can briefly block interaction on slow devices. Workaround: use continuous layout, which renders only nearby pages, and avoid very high default zoom on mobile.
Color management depends on assets. Documents with ICC profiles need the ICC assets; see PDF.js configuration.

API

FitOptions — Constrains a rendered page to a box: fit its width, its height or both, and choose whether it may grow beyond its natural size.
PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.