Blog Post

How to Display a PDF in React

Illustration: How to Display a PDF in React

In this post, you’ll learn how to display a PDF in React. You’ll begin by setting up a new React application. Then, you’ll learn how to display a PDF document that’s being served from the public folder.

React is an open source JavaScript library for web development that’s extensively used for building quality user interfaces (UIs) while also provisioning a great developer experience. The PSPDFKit PDF library for React allows you to present a PDF document using a premade polished UI.

PSPDFKit React.js PDF Library

We offer a commercial React.js PDF library that’s easy to integrate. It comes with 30+ features that allow your users to view, annotate, edit, and sign documents directly in the browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case.

  • A prebuilt and polished UI
  • 15+ annotation tools
  • Support for multiple file types
  • Dedicated support from engineers

PSPDFKit has developer-friendly documentation and offers a beautiful UI for users to work with PDF files easily. Web applications such as Autodesk, Disney, DocuSign, Dropbox, IBM, and Lufthansa use the PSPDFKit library to manipulate PDF documents.



No additional setup is required to use npm, as it’s included with your Node.js installation.

Creating a New React Application

  1. Create a new React app using the Create React App tool:

npx create-react-app react-display-pdf
yarn create react-app react-display-pdf
  1. Change to the project directory:

cd react-display-pdf

Installing PSPDFKit’s Web Library in Your Project

  1. Install and add PSPDFKit as a dependency:

npm install pspdfkit
yarn add pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib

This is an important step, as the code you’ll use down the line will download the required library assets from this directory and perform a dynamic import.

Without the public/pspdfkit-lib folder containing the necessary web library assets, you’ll get the error shown in the image below.

Image showing the chunk load error

Displaying a PDF in React

  1. Add the PDF document you want to display to your project’s public folder. You can use our demo document to test your code.

  2. Add a component wrapper to the PSPDFKit library by creating the ViewerComponent.js component in the src/components/ directory and populating it with the following:

import { useEffect, useRef } from 'react';

export default function ViewerComponent(props) {
	const containerRef = useRef(null);

	useEffect(() => {
		const container = containerRef.current;
		let instance, PSPDFKit;
		(async function () {
			PSPDFKit = await import('pspdfkit');

			PSPDFKit.unload(container); // Ensure that there's only one PSPDFKit instance.

			instance = await PSPDFKit.load({
				// Container where PSPDFKit should be mounted.
				// The document to open.
				document: props.document,
				// Use the public directory URL as a base URL. PSPDFKit will download its library assets from here.
				baseUrl: `${window.location.protocol}//${}/${process.env.PUBLIC_URL}`,

		return () => PSPDFKit && PSPDFKit.unload(container);
	}, []);

	return (
			style={{ width: '100%', height: '100vh' }}
  1. Render the ViewerComponent by replacing the code in the App.js file located in the src directory:

import ViewerComponent from './components/PdfViewerComponent';

function App() {
	return (
		<div className="App">
			<div className="PDF-viewer">
				<ViewerComponent document={'yourDocumentNameHere'} />

export default App;

Don’t forget to replace yourDocumentNameHere with your actual document’s name.

  1. Run the application in your default browser:

npm start
yarn start

The resulting PDF will look like what’s shown below.

GIF showing the result of displaying a PDF in React


Interact with the sandbox by clicking the left rectangle icon and selecting Editor > Show Default Layout. To edit, sign in with GitHub — click the rectangle icon again and choose Sign in. To preview the result, click the rectangle icon once more and choose Editor > Embed Preview. For the full example, click the Open Editor button. Enjoy experimenting with the project!

Displaying a PDF in React from Any Source

PSPDFKit’s web library can open PDFs from various input sources, including:


In this post, you learned how to display a PDF in React using PSPDFKit’s Web library. If you hit any snags, don’t hesitate to reach out to our Support team for help.

At PSPDFKit, we offer a commercial, feature-rich, and completely customizable web PDF library that’s easy to integrate and comes with well-documented APIs to handle advanced use cases. Try it for free, or visit our demo to see it in action.

Related Products
Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
PRODUCTS  |  Web • Releases • Components

PSPDFKit for Web 2024.3 Features New Stamps and Signing UI, Export to Office Formats, and More

PRODUCTS  |  Web • Releases • Components

PSPDFKit for Web 2024.2 Features New Unified UI Icons, Shadow DOM, and Tab Ordering


Now Available for Public Preview: New Document Authoring Experience Provides Glimpse into the Future of Editing