Continuous layout

Scroll through every page in one column, rendering only the pages near the screen so long documents stay fast.

Basics

layout="continuous" shows all pages in a vertical, scrollable column.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" layout="continuous" />; }

Every page reserves its space immediately, so the scrollbar is accurate from the start, but only the visible pages and one page on each side are rendered to a canvas. The page indicator follows the scroll position, and previous and next scroll to the neighbouring page.

With thumbnails and page input

Continuous layout pairs well with thumbnails and the page number input for long documents.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" layout="continuous" thumbnails pageInput />; }

Customization

The gap between pages and the page frame are CSS variables.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; const style = { '--rpv-page-gap': '40px', '--rpv-page-shadow': '0 12px 32px rgba(15, 23, 42, 0.18)', '--rpv-page-radius': '8px', } as CSSProperties; export default function Demo() { return <PdfViewer source="/samples/mixed-sizes.pdf" layout="continuous" style={style} />; }

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

Advanced / escape hatch

For layouts the viewer does not offer, such as two pages side by side, render pages yourself with usePdfDocument and PdfPageCanvas.

Limitations

No spreads. Pages are always shown one per row. Workaround: a headless layout that places two PdfPageCanvas elements per row.
Scrolling fast shows blank pages briefly. Pages outside the rendered window paint when they come into view. Workaround: none needed for most documents; very slow devices benefit from a lower maxCanvasPixels.
Page sizes are read when the document opens. Every page’s size is measured so the scrollbar is accurate, which takes a moment on documents with thousands of pages; pages render as usual meanwhile.
Search and links render per visible page. Highlights and link areas appear as pages render, which is expected.

API

PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.