PageCanvas

Renders a single page onto a canvas anywhere outside the main view: page thumbnails, previews, print layouts. See the Building a PDF application guide for a thumbnail sidebar built with it.

Prop	Type	Default	What it does
`pageId`	`string`	required	The page to render, by an id obtained from usePages.
`scale`	`number`	automatic	Renders at the given scale. When omitted, the scale is derived from the canvas's displayed size.
`renderOnResize`	`boolean`	`false`	Re-renders when the window resizes. Use when the canvas size is relative to the window.
`isVisible`	`boolean`	automatic	Overrides the built-in visibility detection. Pass it when the parent already knows the visibility (a virtualized list), which saves an intersection observer per canvas.
`hideExtractableText`	`boolean`	`false`	Skips drawing the text content, for rendering your own text layer on top.
`hideAnnotations`	`boolean`	`false`	Skips drawing the annotations, form widgets included.
`className`, `style`, `role`, `aria-label`			Forwarded to the `canvas` element.

Behavior

Rendering is lazy: an off-screen canvas does no work until it becomes visible.
The render resolution follows the canvas's displayed CSS size (or the explicit scale), so style the canvas to the size you need and the pixels stay sharp.
The page rotation is applied and followed live.
The canvas draws the page content as loaded from the PDF file. Edits made during the session are not yet reflected in PageCanvas output; the main view shows them.
Render it only when the load state is 'ready': it throws DocumentNotLoadedError when no document is loaded.

Example

import { PageCanvas, usePages, useScrollToPage } from '@sdk-pdf/react'

function ThumbnailsSidebar() {
  const pages = usePages()
  const scrollToPage = useScrollToPage()

  return (
    <nav>
      {pages.map((page, index) => (
        <button key={page.id} onClick={() => scrollToPage(page.id)}>
          <PageCanvas
            pageId={page.id}
            className="thumbnail"
            aria-label={`Page ${index + 1}`}
          />
        </button>
      ))}
    </nav>
  )
}

PageCanvas

Behavior

Example

On this page