Roger Dunham
Published June 05, 2023
Updated August 13, 2026
3 min
How to Embed a PDF Viewer in a React App
Roger Dunham
In this blog, we will cover how to embed a PDF viewer into a React app as a component. We’ll be using the Apryse WebViewer in this tutorial, although there are other PDF viewers available. For example, there are a number of viewers out there primarily built on top of PDF.js - an open-source PDF rendering engine built by Mozilla and maintained by the development community.
Many popular React PDF viewing libraries, including react-pdf and react-pdf-viewer, use PDF.js as their underlying PDF rendering engine. PDF.js also serves as the foundation for numerous other open-source PDF viewers and document applications.
You can watch a video which compares a number of open-source projects built on PDF.js. In some ways, it is even better than PDFium, but that is a story for another day.
PDF.js has some weaknesses though:
- It was meant as a lightweight preview for text-based PDFs.
- It only supports free text annotation, freehand draw tool, and that’s about it when it comes to annotations.
- Its search does not do well with line breaks, meaning when you search for a word which has a line break in it, it will return react pdf viewer as no results found.
- It does not offer PDF editing capabilities like page manipulation, inserting, removing, and re-arranging pages.
- And it just views PDFs, as it says in the name.
Now why would you pick Apryse WebViewer to embed in a React App?
- We do not use PDF.js or PDFium, but instead uses our PDF rendering engine, written from scratch and maintained by a team of more than a hundred devs.
- WebViewer can handle documents of various file sizes and page lengths.
- The UI is highly customizable and WCAG 2.2 AA compliant.
- Apryse can provide you with support around the clock.
- We offer 30+ annotation types and allow your users to collaborate and reply to each other in real-time.
- We support editing PDFs, whether you are manipulating pages or editing text inside a PDF.
- Our search works across line breaks, meaning if you are in a highly-compliant vertical like legal, you won’t get burned.
- We offer digital signature capabilities, a common workflow for PDFs.
- DOCX editing is available in the same component
- Spreadsheet editing is available in the same component.
- And we can also handle file formats like PPTX, CAD, images, and many more.
Okay, now let’s see how to get started with embedding Apryse WebViewer in your React App. You can also just clone a ready-to-go sample from our GitHub https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-react.
Learn how to build a customizable PDF viewer in React.
The following code snippets assume that you have scaffolded a React app using Vite.
The code is valid for versions of WebViewer 10, 11 and 12, and for Windows, macOS and Linux.
Learn how to resolve the error about WebViewer not being a function which can occur with Vite 8.
Install React PDF Viewer
From the terminal in your React app location, run the following command:
npm i @pdftron/webviewerThis pulls down all the necessary components. Next, you want to copy static resources necessary for WebViewer to run into your public directory.
The files are located in node_modules/@pdftron/webviewer/public and must be moved into your public folder. There are various ways to do this. If you are using the GitHub project, then we automate the copying of static resources by executing copy-webviewer-files.js.
For this article we will assume that you copied them to public/lib/webviewer.
Import PDF Viewer as a Component
Import WebViewer into your component.
import WebViewer from '@pdftron/webviewer'; Create a reference where WebViewer will be placed or mounted.
Inside of useEffect hook (or componentDidMount lifecycle method), initialize WebViewer. Ensure that the path property in the constructor points to where you copied static assets in the React public folder.
Keep your license key confidential
License keys are uniquely generated and strictly confidential. Don't publish or store them in any public location, including public GitHub repositories.
You can get a trial license key for testing purposes, but you will need a commercial license in a production environment.
Run PDF Viewer in your React App
Run the app by running in your terminal:
npm run devLearn more about PDF editing and manipulation using React.
Next Steps
Now that you have PDF Viewer up and running check out our other guides on how to load files or how to customize the WebViewer, or integrate digital signatures in your React applications. You can always grab a ready-to-go sample on our GitHub, or chat with us on support channel if you get stuck.
[This blog was originally written in 2023, but was revised and updated in August 2026.]
