Mischief

25 / Documents

PDF Viewer

Page-by-page PDF rendering on a canvas, with paging and zoom, over any loader you give it.

Live previewSource

1 / 6

100%

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Contract() {
  return <PdfViewer source="/agreement.pdf" workerSrc={workerUrl} />
}

API

sourcestring | ArrayBufferThe document to open.
documentPdfDocumentHandleAn already open document. Skips the loader.
loader(source) => Promise<PdfDocumentHandle>Replaces the default loader. Supply this and pdfjs-dist is never loaded.
page, defaultPage, onPageChangenumber, number, (page: number) => voidThe current page, controlled or uncontrolled.
defaultScale, minScale, maxScalenumberZoom range. Defaults to 1, 0.5, and 3.
workerSrcstringThe pdfjs worker URL, which most bundlers need set explicitly.

Accessibility

The canvas carries an accessible name naming the document and the page it is showing, and the page counter is a polite live region so moving through a document is announced. Paging and zoom controls are disabled at their limits rather than silently doing nothing. A canvas cannot expose the text underneath it, so pair this with a text layer or a downloadable original when the content has to be readable.

Dependencies

pdfjs-dist, lucide-react