# React PDF Viewer

> Accessible, themeable PDF viewer for React, built on PDF.js.

React PDF Viewer is an accessible, themeable PDF viewer for React, built on PDF.js: zoom, search, thumbnails, download and print, with no UI-kit dependency.

The whole documentation in one file, with the source of every example: [llms-full.md](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/llms-full.md).

## Getting started

- [Overview](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer.md): React PDF Viewer is an accessible, themeable PDF viewer for React, built on PDF.js: zoom, search, thumbnails, download and print, with no UI-kit dependency.
- [Installation](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/installation.md): Install React PDF Viewer and PDF.js with your package manager and import the stylesheet once.
- [Usage](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/usage.md): Render a document, turn on the features you need, and connect the viewer to your app's state.
- [AI context](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/ai-context.md): The whole documentation and the source of every example in one Markdown file, for AI coding agents.
- [Requirements](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/requirements.md): The React, PDF.js, bundler and browser versions React PDF Viewer is tested with.
- [FAQ](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/faq.md): Answers to common questions about licensing, capabilities, frameworks and troubleshooting.
- [Support](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/support.md): Where to ask questions, report bugs, request features and disclose security issues.
- [Versions](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/versions.md): Which versions are supported, how versions are numbered, and where documentation for older versions lives.

## Features

- [All features](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/all-features.md): Every capability of React PDF Viewer, grouped by what it does, each with its own page and live demos.
- [Document sources](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/document-sources.md): Open PDFs from a URL, a File the user picked, or bytes you already have, without uploading anything.
- [Page navigation](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/page-navigation.md): Move between pages with the toolbar, the keyboard or your own controls, and keep the current page in sync with your app.
- [Zoom](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/zoom.md): Zoom in steps or through presets, with the toolbar, the keyboard or Ctrl/⌘ + wheel, between limits you choose.
- [Rotation](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/rotation.md): Rotate pages in quarter turns, on top of the orientation each page already declares.
- [Download](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/download.md): Save the open document under a sensible file name without requesting it again, or take over the download yourself.
- [Print](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/print.md): Print the document at 150 DPI with progress and a cancel button, or hand printing to the browser's own PDF viewer.
- [Error states](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/error-states.md): Show a clear message with Retry when a document can't load or render, and receive a typed error for your own handling.
- [Toolbar](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/toolbar.md): Place the toolbar above or below the page, choose its actions, and let it collapse into a “More actions” menu on narrow screens.
- [Fit modes](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/fit-modes.md): Size pages to the available width, to the whole page, or to their true size, and switch to true size as soon as users zoom.
- [Fullscreen](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/fullscreen.md): Show the document fullscreen with the browser's Fullscreen API, an in-page overlay, or inside your own dialog.
- [Continuous layout](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/continuous-layout.md): Scroll through every page in one column, rendering only the pages near the screen so long documents stay fast.
- [Thumbnails](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/thumbnails.md): Add a sidebar of page previews that shows where you are and jumps to any page.
- [Loading states](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/loading-states.md): Show a loading view while a document downloads and an empty state when there is nothing to show, or replace both with your own.
- [Keyboard shortcuts](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/keyboard-shortcuts.md): Navigate, zoom, rotate and go fullscreen from the keyboard while focus is in the viewer, without stealing keys from the rest of your app.
- [Page number input](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/page-number-input.md): Let users type the page they want in the toolbar instead of clicking through a long document.
- [Links](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/links.md): Make links inside documents work, jumping to pages within the document or opening websites safely in a new tab.
- [Text layer](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/text-layer.md): Overlay real, selectable text on each page so users can copy it and screen readers can read the document.
- [Search](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/search.md): Find text across the whole document, highlight every match, and step through results from the keyboard.
- [Password protection](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/password-protection.md): Open encrypted documents with a password your app provides, or ask the user for it with a built-in or custom form.
- [Labels and locale](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/labels.md): Translate or reword every visible text and accessible name, and format numbers for any locale.
- [PDF.js configuration](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/pdfjs-configuration.md): Self-host the PDF.js worker, fonts and decoders for production, choose a build for older browsers, and tune PDF.js per viewer.
- [Authenticated requests](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/authenticated-requests.md): Load protected PDFs with cookies, headers or your own HTTP client, and handle expired sessions and HTTP errors your way.
- [Controlled state](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/controlled-state.md): Own the page, zoom, rotation and fullscreen state in your app, or let the viewer keep it, with one consistent pattern.
- [Imperative API](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/imperative-api.md): Command the viewer from your own buttons and code through a ref, and read its current page, zoom and status.
- [Events](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/events.md): React to the document loading, pages rendering and the user navigating, for analytics, logging or your own UI.
- [Custom toolbar](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/custom-toolbar.md): Replace the toolbar with your own controls, or combine parts of the built-in toolbar with buttons of your own.
- [Headless](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/headless.md): Build a completely custom PDF interface from the same document loader and page renderer the viewer uses.
- [Rendering](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/rendering.md): Sharp pages on high-density screens, smooth zooming without flicker, and graceful quality limits on memory-constrained devices.

## Demos

- [Playground](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/demos/playground.md): Try every option of the viewer live, on bundled samples, your own URL or a local file, and watch its events.

## Reference

- [API reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api.md): Generated reference for every public component, hook, function and type.

## Customization

- [How to customize](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/customization.md): Choose the right way to change how the viewer looks and behaves, from a CSS variable to a completely custom interface.
- [Theming](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/customization/theming.md): Match the viewer to your design with CSS variables, dark and automatic presets, and state-based styling.
- [Overriding structure](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/customization/overriding-structure.md): Replace the viewer's loading, empty, error, password and toolbar views with your own components.
- [Recipes](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/customization/recipes.md): Copy-paste solutions for common customizations, from full-height viewers to host styles that leak into the viewer.

## Guides

- [Best practices](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/guides/best-practices.md): Habits that keep a React PDF Viewer integration fast, correct and maintainable in production.
- [Performance](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/guides/performance.md): Keep large documents, many viewers and slow devices fast with the right layout, loading and rendering settings.
- [Testing](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/guides/testing.md): Test apps that use React PDF Viewer with unit tests for your logic and browser tests for real rendering.
- [Localization](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/guides/localization.md): Ship the viewer in several languages with translated labels, locale-aware numbers and translated error messages.
- [Accessibility](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/guides/accessibility.md): What React PDF Viewer does for keyboard and screen reader users, how it is tested, and what remains your responsibility.
- [Security](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/guides/security.md): How React PDF Viewer handles untrusted documents, which defaults protect you, and how to deploy it under a strict Content Security Policy.

## Integrations

- [Vite](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/integrations/vite.md): Set up React PDF Viewer in a Vite app with a self-hosted PDF.js worker and assets.
- [Next.js](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/integrations/nextjs.md): Use React PDF Viewer in the Next.js App Router, including Server Components and a self-hosted PDF.js worker.
- [webpack](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/integrations/webpack.md): Set up React PDF Viewer with webpack 5, emitting the PDF.js worker as an asset and extracting the stylesheet.

## Migration

- [Migration](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/migration.md): Upgrade guides between versions of React PDF Viewer, one page per version jump with breaking changes.

## Discover more

- [Roadmap](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/discover-more/roadmap.md): How future work on React PDF Viewer is planned and how to propose or follow a feature.
- [Changelog](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/discover-more/changelog.md): Every release of React PDF Viewer, newest first, with new features, fixes and breaking changes.

## API reference

- [configurePdfJs reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/configure-pdf-js.md): Configures PDF.js for every viewer instance. Call it once at startup, before the first viewer mounts. Calls merge with previous configuration.
- [CSS variables reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/css-variables.md): Every custom property the stylesheet reads, with its fallback value. Set them on the viewer or any ancestor.
- [defaultLabels reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/default-labels.md): The default English labels for every user-visible string and accessible name. Override any subset with the labels prop.
- [FitOptions reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/fit-options.md): Constrains a rendered page to a box: fit its width, its height or both, and choose whether it may grow beyond its natural size.
- [FullscreenMode reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/fullscreen-mode.md): How fullscreen is presented: the browser Fullscreen API, a full-viewport overlay, or layout only while the parent presents it.
- [Keyboard shortcuts reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/keyboard-shortcuts.md): Keys the component handles, generated from @shortcut tags next to the implementation.
- [LabelContext reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/label-context.md): Helpers passed to label functions, such as locale-aware number formatting, so custom labels follow the viewer's locale.
- [PageHighlight reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/page-highlight.md): Search highlighting for one page's text layer: the query to mark, and which of the page's matches is the selected one.
- [PageRenderInfo reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/page-render-info.md): Details of a completed page render, passed to onPageRender and onRender: the page, the scale used, its size and the time it took.
- [PdfDocumentStatus reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-document-status.md): Lifecycle status of a document load: idle without a source, loading, ready with a document, or error with a PdfViewerError.
- [PdfJsConfig reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-js-config.md): Global PDF.js configuration shared by every viewer: how the module is loaded, the worker, and the URLs of its assets.
- [PdfJsDocumentOptions reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-js-document-options.md): Per-instance options forwarded to pdfjs-dist's getDocument (for example cMapUrl, standardFontDataUrl or verbosity). Source-related options are managed by the viewer.
- [PdfJsModule reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-js-module.md): The pdfjs-dist module namespace, as returned by the loader of configurePdfJs to supply a specific build.
- [PdfPageCanvasProps reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-page-canvas-props.md): Props for PdfPageCanvas: the document and page to render, its scale, rotation and fit, the optional layers and the render callbacks.
- [PdfPageCanvas reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-page-canvas.md): Renders a single PDF page: cancellable, double-buffered, HiDPI and pixel-capped, with optional text and annotation layers.
- [PdfRequestOptions reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-request-options.md): Controls how string and URL sources are fetched: extra fetch options, a replacement fetcher and the handling of HTTP errors.
- [PdfSource reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-source.md): A PDF document source: a URL for the viewer to fetch, or a file or bytes that are already in memory.
- [PdfToolbarProps reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-toolbar-props.md): Props for PdfToolbar: the viewer API it controls, its labels and configuration, the compact layout and the page indicator slot.
- [PdfToolbar reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-toolbar.md): The default toolbar: zoom, page navigation, fullscreen, rotate, download and print, on one row.
- [PdfViewerApi reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-viewer-api.md): Imperative viewer API, available through ref and passed to renderToolbar. Values are a snapshot of the render that produced the object.
- [PdfViewerErrorCode reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-viewer-error-code.md): Machine-readable category of a PdfViewerError, for handling failures such as a missing password or an HTTP error in code.
- [PdfViewerError reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-viewer-error.md): A typed viewer error. Aborted loads and canceled renders are never reported as errors.
- [PdfViewerLabels reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-viewer-labels.md): Every user-visible string and accessible name. Defaults are English; override any subset through the labels prop.
- [PdfViewerProps reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-viewer-props.md): Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.
- [PdfViewer reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/pdf-viewer.md): A PDF viewer: one page at a time with a toolbar for zoom, navigation, fullscreen, rotation, download and print.
- [Rotation reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/rotation.md): Clockwise rotation in degrees, relative to the page's natural orientation.
- [rpv-theme-auto reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/rpv-theme-auto.md): Automatic preset: add className="rpv-theme-auto" to apply the dark values only when the operating system prefers a dark color scheme.
- [rpv-theme-dark reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/rpv-theme-dark.md): Dark preset: add className="rpv-theme-dark" to the viewer to apply these values.
- [SetControllableState reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/set-controllable-state.md): Setter returned by useControllableState; accepts a value or an updater function.
- [ToolbarAction reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/toolbar-action.md): Identifies a toolbar control, for choosing which controls the toolbar shows and in which order through ToolbarConfig.
- [ToolbarConfig reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/toolbar-config.md): Toolbar customization: where the toolbar sits, which controls it shows and in which order, and which it hides on narrow screens.
- [UseControllableStateOptions reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/use-controllable-state-options.md): Options for useControllableState: the controlled value, the initial value while uncontrolled, and the change callback.
- [useControllableState reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/use-controllable-state.md): The value / defaultValue / onValueChange pattern as a hook: the one behind every controlled prop of the viewer.
- [UsePdfDocumentOptions reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/use-pdf-document-options.md): Options for usePdfDocument. Changes apply on the next load, except password.
- [UsePdfDocumentResult reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/use-pdf-document-result.md): State returned by usePdfDocument: the load status, the document once ready, its page count, the error and a reload function.
- [usePdfDocument reference](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/use-pdf-document.md): Loads a PDF document. Every source change aborts the previous fetch, discards its result and destroys the previous document; unmounting does the same.