Skip to content
React PDF Viewer

Search

Installation

Install React PDF Viewer and PDF.js with your package manager and import the stylesheet once.

Prerequisites

  • React and React DOM 18 or 19.
  • pdfjs-dist 6 (installed next to the package; it is a peer dependency so you control its version).
  • A bundler that supports ES modules and CSS imports, such as Vite, Next.js or webpack 5.

Full details, including tested browsers, are on the Requirements page.

Installation

Install the package and PDF.js with your package manager.

npm

npm install @kingtech/react-pdf-viewer pdfjs-dist

pnpm

pnpm add @kingtech/react-pdf-viewer pdfjs-dist

yarn

yarn add @kingtech/react-pdf-viewer pdfjs-dist

The package is ESM-only, ships its TypeScript declarations, and has no runtime dependencies of its own.

Minimal example

Import the component and, once in your app, the stylesheet:

import { PdfViewer } from '@kingtech/react-pdf-viewer';
import '@kingtech/react-pdf-viewer/styles.css';

export function Report() {
  return <PdfViewer source="/files/report.pdf" />;
}

source can be a URL, a File, a Blob or bytes; see Document sources.

Verify

Start your development server and open the page. You should see the first page of the document with a toolbar below it showing the zoom level and 1 / N. In the browser console, a one-time development notice says PDF.js assets are loading from a CDN; that is expected until you self-host them.

Troubleshooting

  • The viewer has no styles. The stylesheet is imported separately. Add import '@kingtech/react-pdf-viewer/styles.css' once, for example in your root layout.
  • “Failed to fetch” or a network error. The document URL is on another origin without CORS headers. See Authenticated requests.
  • PDFJS_LOAD_FAILED. pdfjs-dist is missing or the worker URL is blocked by your Content Security Policy. Install pdfjs-dist and see PDF.js configuration.

Next steps