Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsFor a quick preview, embed a reachable PDF URL with an <iframe> or <object>. If your React interface must render pages itself, control pagination, or connect PDF state to your application, use react-pdf (React-PDF), which renders existing PDFs through Mozilla PDF.js. Configure the matching PDF.js worker, satisfy the library’s current browser and Node requirements, and arrange CORS or a server proxy when the file is on another origin.
Choose the right way to display a PDF
| Approach | Use it when | Trade-offs |
|---|---|---|
Browser-native <iframe> or <object> |
You need a straightforward preview of a URL-accessible PDF | Almost no application code, but browser controls and rendering vary and toolbar customization is limited. |
react-pdf with PDF.js |
You need React-controlled pages, custom controls, or integration with application state | More control, but you must configure the matching worker and handle browser, bundler, loading, error, origin, and memory concerns. |
| PDF.js viewer layer | You want a fuller viewer UI to customize | It is a separate layer built on the display engine. Mozilla asks site authors to reskin or build upon it rather than embedding an unmodified viewer. |
These choices are for viewing an existing PDF. The similarly named @react-pdf/renderer creates PDFs from React components; it is not the library used in the examples below.
Fastest option: embed a PDF URL
If the PDF is publicly reachable (or the user is already authorized to fetch it), let the browser’s built-in PDF handler display it:
<iframe
src="https://example.com/files/guide.pdf"
title="Product guide"
width="100%"
height="700"
style={{ border: 0 }}
/>An object is another native option and can provide fallback content:
#1 Best Overall
- View PDFs by Folder: Easily browse and access PDFs organized by folders.
- Rename & Delete PDFs: Manage your documents effortlessly with rename and delete options.
- Dark Mode Support: Enjoy a comfortable reading experience with a sleek dark mode.
- Fast & Lightweight: Open PDFs instantly without lag, optimized for performance.
- User-Friendly Interface: Intuitive design for seamless navigation and file management.
<object
data="https://example.com/files/guide.pdf"
type="application/pdf"
width="100%"
height="700"
>
<p>Your browser cannot display this PDF. <a href="https://example.com/files/guide.pdf">Download it</a>.</p>
</object>Set a meaningful title, give the container a usable height, and retain a download link. Native embedding does not give React access to individual pages or a consistent custom toolbar, and behavior differs between browsers.
Build a React-controlled viewer with React-PDF
Check current prerequisites
The latest React-PDF branch documented in its README requires React 19 or later and Node.js 22.13.0 or newer. Its listed minimums for current modern-browser support are Chrome 125 and Safari 18 (including iOS 18). Earlier browsers may need polyfills, bundler transpilation, and the legacy worker; a polyfill alone does not extend support below those minimums. Requirements change, so verify the current React-PDF README for your release.
Install the viewer
npm install react-pdfReact-PDF uses PDF.js to fetch and render the document. The PDF.js worker must match the PDF.js version used by your installed React-PDF package.
Configure the worker in the rendering module
Put worker configuration in the same module that renders Document and Page. The project README warns that module execution order can overwrite a value configured elsewhere. This Vite-style example follows the recommended pattern:
Rank #2
- Create and edit PDFs. Collaborate with ease. E-sign documents and collect signatures. Get everything done in one app, wherever you go.
- Edit text and images without jumping to another app.
- E-sign documents or request e-signatures on any device. Recipients don’t need to log in to e-sign.
- Convert PDFs to editable Microsoft Word, Excel, or PowerPoint documents.
- Share PDFs for collaboration. Commenting features make it easy for reviewers to comment, mark up, and annotate.
import { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url,
).toString();
export default function PdfViewer({ file }) {
const [numPages, setNumPages] = useState(0);
return (
<section aria-label="PDF document">
<Document
file={file}
onLoadSuccess={({ numPages }) => setNumPages(numPages)}
loading={<p>Loading PDF…</p>}
error={<p>Could not load this PDF.</p>}
noData={<p>Choose a PDF to view.</p>}
>
{Array.from({ length: numPages }, (_, index) => (
<Page key={index + 1} pageNumber={index + 1} />
))}
</Document>
</section>
);
}Pass either a URL, a File, a typed array, or another source accepted by the installed version. For a local file picker:
function UploadPdf() {
const [file, setFile] = useState(null);
return (
<>
<input
type="file"
accept="application/pdf"
onChange={(event) => setFile(event.target.files?.[0] ?? null)}
/>
{file && <PdfViewer file={file} />}
</>
);
}For a production viewer, add zoom, page navigation, a download action, and an accessible status region according to your application’s needs. Keep the worker setup beside these components and test the built deployment, not only the development server.
Handle URLs, CORS, and protected files
PDF.js requests obey browser same-origin rules. If the PDF is hosted on another origin, that server must allow the request with suitable CORS headers, or your application needs a server-side proxy designed for the task. A URL that works in a browser-native iframe does not prove that JavaScript PDF.js can fetch it; the two requests are subject to different browser handling.
Typical cross-origin checklist
- Confirm the response is a PDF with an appropriate content type and is not an HTML login page.
- Allow your app’s exact origin in the file server’s CORS policy; account for credentials if your authentication design requires them.
- If you cannot change the file host, fetch the document through a controlled server endpoint that enforces authorization and does not become an open proxy.
- Inspect the browser Network panel for the PDF request and its preflight or CORS error.
Do not put private access tokens in a public PDF URL. For short-lived access, issue an authorization-aware URL or proxy the bytes through your own backend.
Rank #3
- Work securely offline — without connecting to the cloud — with desktop-only PDF tools.
- Edit text and images and reorder and delete pages in a PDF.
- Convert PDFs to Microsoft Word, Excel, or PowerPoint files while preserving fonts, formatting, and layouts.
- Easily create, fill, and sign forms.
- Password-protect documents or redact sections of a PDF to keep sensitive information secure.
Make long documents responsive
Rendering every page immediately creates a canvas for every page. High-resolution canvases consume substantial memory, so long files should render only the pages the user needs or pages near the viewport. Start with a page list or windowed rendering strategy, then add virtualization if your document length requires it.
PDF.js can use HTTP Range Requests to fetch portions needed for visible pages when the browser and server support them. Ensure the server provides the range-related response headers and test with the actual CDN or object-storage configuration. A server that disables ranges may force larger downloads before a page can render.
Use an explicit page width or scale that matches your layout rather than rendering huge canvases and shrinking them with CSS. Release documents and object URLs when a component unmounts, and avoid retaining multiple uploaded files in React state.
Framework and bundler details
Next.js and server rendering
PDF.js relies on browser APIs and a worker. With Next.js, the module importing the viewer may need to skip server-side rendering (for example, load that component dynamically with SSR disabled). Keep worker configuration in the client-side viewer module and verify the production build’s worker asset URL.
Rank #4
- Edit PDFs with Ease. Modify text, images, and layouts directly within your PDF documents.
- Convert & Organize. Export PDFs to Word, Excel, or ePub, and organize files with ease.
- Read & Annotate. Enjoy intuitive reading modes and powerful tools to comment, highlight, and mark up PDFs.
- Create & Manage PDFs. Create new PDFs, combine multiple files, scan documents, and compress for easy sharing.
- Fill & Sign Forms. Complete forms and digitally sign documents with secure e-signature tools.
Bundler and worker failures
Vite, Webpack, and other bundlers resolve worker assets differently. The new URL(..., import.meta.url) pattern is intended for bundlers that support it; if your toolchain cannot emit the worker, follow its worker-asset guidance and the React-PDF README. Do not mix a worker copied from a different PDF.js version with the package’s display code.
Common errors and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| “Setting up fake worker” or worker loading error | The worker URL is missing, unreachable, or version-mismatched. | Configure GlobalWorkerOptions.workerSrc in the same module as Document/Page; ensure the emitted worker is reachable and matches the installed PDF.js version. |
| Failed to fetch or a CORS console error | The PDF is on another origin without permission for the app. | Add correct CORS headers or fetch through an authenticated server proxy. |
| Blank pages or “Invalid PDF” | The URL returned HTML, a redirect to login, truncated bytes, or a damaged file. | Inspect the response status, content type, redirects, and downloaded bytes; authenticate the request correctly. |
| Works in development, fails after build | The bundler did not publish the worker or rewrote its path. | Open the deployed worker URL directly, inspect Network requests, and use the bundler-specific worker instructions. |
| Tab becomes slow or crashes on a large file | Too many high-resolution page canvases are allocated. | Render visible pages only, lower the display scale, and verify range-request support. |
| Viewer fails during server rendering | Browser-only PDF.js code ran on the server. | Move the viewer to a client-only boundary or disable SSR for that module. |
Do not confuse viewing with generating
react-pdf (the wojtekmaj/React-PDF project) displays existing PDFs. @react-pdf/renderer creates a PDF from React components. The renderer’s advanced guide warns that generating documents with 30 or more pages directly in React can occupy the main thread and make the interface unresponsive, suggesting a web worker. That warning concerns generation, not displaying an existing PDF with React-PDF, so it should not be used as a viewer-size limit.
Or skip the browser setup
If you only need a clean image or PDF capture of a web page rather than an interactive in-app PDF viewer, ScreenshotNeo provides a website screenshot API and MCP server. A single request can return PNG, JPEG, WebP, or PDF. It accepts cookie/consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether it was billed.
Use the API from your server (keep the key private). The complete option list and authentication details are in the ScreenshotNeo documentation.
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also offers an MCP server for AI agents such as Claude, Cursor, and other MCP clients, with take_screenshot, get_page_info, and capture_pdf tools. Plans include 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to get started.
Best Value
- Save money by using PDF Fusion to view over 100 file formats without having to purchase additional software
- Merge incompatible files quickly and easily by dragging and dropping in PDF Fusion to create a new PDF documents
- Save time with PDF Fusion's editing tools to reuse the content from existing documents without starting from scratch
Production checklist
- Choose native embedding unless you need React-controlled rendering.
- Install
react-pdf, then configure its matching PDF.js worker in the viewer module. - Verify the current React, Node, browser, framework, and bundler requirements.
- Test public, authenticated, cross-origin, malformed, and large PDFs.
- Render only visible or needed pages for long documents.
- Provide loading, error, download, keyboard, and accessible status behavior.
- Test the deployed worker and PDF URLs after your production build.
Frequently Asked Questions
Can I display a PDF stored in my React project’s public folder?
Yes. Reference its public URL (for example, /manual.pdf) in an iframe, object, or React-PDF file prop. Confirm that the deployed path and server content type are correct.
Why does an iframe work while React-PDF fails?
Native embeds and JavaScript PDF.js fetches are handled differently. React-PDF still needs a CORS-permitted fetch (or a proxy), a valid PDF response, and a correctly published worker.
Should I use PDF.js’s complete viewer instead of React-PDF?
Use the viewer layer when you need its broader UI as a starting point, but customize it for your site; Mozilla requests that embedded viewers not remain an unmodified copy.
Does React-PDF create downloadable PDFs?
No. React-PDF displays existing files. Use a separate generator such as @react-pdf/renderer when your requirement is to create a PDF.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
