I spent too much time today, piecing together fragments of other answers to this question. So here is a complete answer.
First you install pdfjs-dist:
npm install pdfjs-dist
And here is how to use it in an actual viewer component:
import React, { useEffect, useState, useRef, useCallback } from 'react';
import pdfjsLib from "pdfjs-dist/build/pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
export default function PdfViewer({url}){
const canvasRef = useRef();
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const [pdfRef, setPdfRef] = useState();
const [currentPage, setCurrentPage] = useState(1);
const renderPage = useCallback((pageNum, pdf=pdfRef) => {
pdf && pdf.getPage(pageNum).then(function(page) {
const viewport = page.getViewport({scale: 1.5});
const canvas = canvasRef.current;
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
};
page.render(renderContext);
});
}, [pdfRef]);
useEffect(() => {
renderPage(currentPage, pdfRef);
}, [pdfRef, currentPage, renderPage]);
useEffect(() => {
const loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(loadedPdf => {
setPdfRef(loadedPdf);
}, function (reason) {
console.error(reason);
});
}, [url]);
const nextPage = () => pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);
const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);
return <canvas ref={canvasRef}></canvas>;
}
Answer from Arntor on Stack Overflownpm
npmjs.com › package › pdfjs-dist
pdfjs-dist - npm
2 weeks ago - Generic build of Mozilla's PDF.js library.. Latest version: 5.4.449, last published: 12 days ago. Start using pdfjs-dist in your project by running `npm i pdfjs-dist`. There are 2279 other projects in the npm registry using pdfjs-dist.
» npm install pdfjs-dist
Published Nov 29, 2025
Version 5.4.449
Repository https://github.com/mozilla/pdf.js
Homepage https://mozilla.github.io/pdf.js/
Top answer 1 of 5
25
I spent too much time today, piecing together fragments of other answers to this question. So here is a complete answer.
First you install pdfjs-dist:
npm install pdfjs-dist
And here is how to use it in an actual viewer component:
import React, { useEffect, useState, useRef, useCallback } from 'react';
import pdfjsLib from "pdfjs-dist/build/pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
export default function PdfViewer({url}){
const canvasRef = useRef();
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const [pdfRef, setPdfRef] = useState();
const [currentPage, setCurrentPage] = useState(1);
const renderPage = useCallback((pageNum, pdf=pdfRef) => {
pdf && pdf.getPage(pageNum).then(function(page) {
const viewport = page.getViewport({scale: 1.5});
const canvas = canvasRef.current;
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
};
page.render(renderContext);
});
}, [pdfRef]);
useEffect(() => {
renderPage(currentPage, pdfRef);
}, [pdfRef, currentPage, renderPage]);
useEffect(() => {
const loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(loadedPdf => {
setPdfRef(loadedPdf);
}, function (reason) {
console.error(reason);
});
}, [url]);
const nextPage = () => pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);
const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);
return <canvas ref={canvasRef}></canvas>;
}
2 of 5
9
This import will clear the undefined issue:
import * as pdfjsLib from "pdfjs-dist/build/pdf";
Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router
Before you start - checklist I followed instructions in documentation written for my React-PDF version I have checked if this bug is not already reported I have checked if an issue is not listed in Known issues If I have a problem with P... More on github.com
PDFjs-dist error
Before you start - checklist I followed instructions in documentation written for my React-PDF version I have checked if this bug is not already reported I have checked if an issue is not listed in Known issues If I have a problem with P... More on github.com
Mismatching worker version with pdfjs-dist as a direct dependency (answered ✅)
If you've installed pdfjs-dist as a direct dependency and the version is not matching the pdfjs-dist that react-pdf depends on, you may get an error that looks like this: Warning: UnknownErrorE... More on github.com
PDF Viewer
Most browsers can show PDF perfectly out of the box. Just put source of your PDF in and it will: Show that file is loading on slow connection Show file, if it is supported Show fallback if it is not supported All with few lines of HTML like this: Sorry, your browser doesn't support PDF preview. Download More on reddit.com
How to use PDF.js in React?
To use PDF.js in React, import the pdfjs-dist package and create a component that loads and displays PDF files using the library's API.
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
What is PDF.js used for?
PDF.js is used for viewing, parsing, and rendering PDF files directly in the browser, providing a seamless user experience.
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
Is PDF.js free to use?
Yes, PDF.js is free and open-source, distributed under the Apache 2.0 license, allowing for both personal and commercial use.
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
Videos
13:08
Build a React.js PDF Viewer & Editor With Controls Using ...
03:20
Build a React.js PDF Renderer & Editor in Browser Using PDF-LIB ...
27:18
Build a React.js PDF Document Custom Viewer With Validation & ...
23:37
How to choose the right PDF SDK: PDF.js vs. react-pdf Explained ...
Nutrient
nutrient.io › blog › sdk › how to build a reactjs viewer with pdfjs
Build a React PDF viewer with PDF.js and Next.js: Step-by-step tutorial
July 16, 2025 - You’ll use Next.js, a popular React framework, to create the project structure. Run the following command to scaffold a new Next.js project inside a folder named pdfjs-demo: ... When prompted, press Enter to accept the default options. This will set up the project with the recommended settings, allowing you to focus on integrating PDF.js with Next.js. Next, navigate into your project directory and install the distribution build of PDF.js, available on npm as pdfjs-dist(opens in a new tab):
GitHub
github.com › wojtekmaj › react-pdf
GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.
then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
Starred by 10.7K users
Forked by 981 users
Languages TypeScript 94.3% | CSS 5.6% | HTML 0.1%
CodeSandbox
codesandbox.io › examples › package › pdfjs-dist
pdfjs-dist examples - CodeSandbox
react-pdf-viewer-vite · pdfjs-dist-vue · react-doc-viewerDocument viewer for react. Renders online/local documents. @react-pdf-viewer/examples · flexcomAplicacion para la comunicacion interna. pdf-viewer (forked) lex961Find more examples or templates · AboutGeneric build of Mozilla's PDF.js library.6,183,977Weekly Downloads ·
GitHub
github.com › wojtekmaj › react-pdf › issues › 1855
Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router · Issue #1855 · wojtekmaj/react-pdf
August 13, 2024 - import { Box, CircularProgress, Pagination, Stack, Typography } from '@mui/material'; import React, { useState } from 'react'; import { DocumentText } from 'iconsax-react'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'react-pdf/dist/esm/Page/TextLayer.css'; import { Document, Page, pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
Published Aug 13, 2024
GitHub
github.com › wojtekmaj › react-pdf › issues › 1822
PDFjs-dist error · Issue #1822 · wojtekmaj/react-pdf
April 14, 2024 - When pdfjs-dist is imported from react-pdf (or components that use pdfjs-dist) or even the pdfjs-dist is imported, the error occures:
Published Jun 06, 2024
GitHub
github.com › wojtekmaj › react-pdf › discussions › 1520
Mismatching worker version with pdfjs-dist as a direct dependency (answered ✅) · wojtekmaj/react-pdf · Discussion #1520
In this case I have this "pdfjs-dist": "3.7.107" in my package.json, but react-pdf depends on "pdfjs-dist": "3.6.172".
Author wojtekmaj
PSPDFKit
pspdfkit.com › blog › sdk › how to build a reactjs viewer with pdfjs
How to Build a React PDF Viewer with PDF.js
July 16, 2025 - You’ll use Next.js, a popular React framework, to create the project structure. Run the following command to scaffold a new Next.js project inside a folder named pdfjs-demo: ... When prompted, press Enter to accept the default options. This will set up the project with the recommended settings, allowing you to focus on integrating PDF.js with Next.js. Next, navigate into your project directory and install the distribution build of PDF.js, available on npm as pdfjs-dist(opens in a new tab):
Snyk
snyk.io › advisor › pdfjs-dist › functions › pdfjs-dist.globalworkeroptions
How to use the pdfjs-dist.GlobalWorkerOptions function in pdfjs-dist | Snyk
At the time of writing this, it was // packages/app/dist/ PDFjs.GlobalWorkerOptions.workerSrc = './pdf.worker.js' export default function init () { registry.add('fileViewer', PDFViewer, { stream: false, match: pdfMatcher }) } function pdfMatcher (file) { if (!file.mimetype) return false return file.mimetype.match(/application\/pdf/) } export class PDFViewer extends React.Component { constructor (props) { super(props) mozilla / pdf.js / examples / browserify / main.js View on Github ·
React PDF Viewer
react-pdf-viewer.dev › docs › basic-usage
Basic usage - React PDF Viewer
return <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">...</Worker>;
npm
npmjs.com › package › react-pdf
react-pdf - npm
October 9, 2025 - then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
» npm install react-pdf
Published Oct 09, 2025
Version 10.2.0
Author Wojciech Maj
Repository https://github.com/wojtekmaj/react-pdf
GitHub
github.com › wojtekmaj › react-pdf › blob › main › packages › react-pdf › README.md
react-pdf/packages/react-pdf/README.md at main · wojtekmaj/react-pdf
then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
Author wojtekmaj
CodeSandbox
codesandbox.io › s › pdfjs-dist-csdsxo
pdfjs-dist - CodeSandbox
November 4, 2022 - pdfjs-dist by Chocobe using @react-pdf-viewer/core, @react-pdf-viewer/default-layout, @react-pdf-viewer/full-screen, @react-pdf-viewer/highlight, @react-pdf-viewer/open, @react-pdf-viewer/page-navigation, @react-pdf-viewer/print, @react-pdf-viewer/scroll-mode, @react-pdf-viewer/search