react-pdf provides basic PDF rendering with custom UI development required. Nutrient offers a complete PDF solution with built-in UI, annotations, forms, and WebAssembly-powered performance. Compare implementation approaches based on your requirements.
When building a React PDF viewer, you he several options: basic HTML elements, the open source react-pdf library, or Nutrient's React PDF library. Each approach offers different trade-offs in implementation complexity, feature coverage, and maintenance requirements.
This comprehensive guide covers:
Basic PDF embedding — HTML elements (, , ) for simple display needsreact-pdf implementation — Building a functional PDF viewer with the popular open source libraryNutrient React PDF library — The professional solution with 30+ features, optimized performance, and complete UI Embedding PDFs in React apps using iframe, embed, and objectIf you don’t need advanced features like annotations or custom user interface (UI) controls, the easiest way to embed PDFs in your React app is by using native HTML tags such as , , and . These methods require no additional libraries and are quick to set up — ideal for basic PDF viewing.
Using iframeThe tag is one of the most common ways to embed a PDF in a web application. It allows you to display a PDF document within a frame on your page.
Example:
function PDFViewer() { return ( Embedding PDF with iframe );} export default PDFViewer; Pros✔ Easy to implement
✔ Works across all modern browsers
✔ Supports responsive sizing
Cons✘ No custom nigation or annotations
✘ Limited interactivity (e.g. no built-in text selection or zoom control)
Alternatives: embed and objectWhile is the most common choice, and offer similar capabilities with slight differences:
— Slightly more lightweight than , but lacks fallback support for older browsers. — Offers better fallback handling (e.g. showing a download link if PDF rendering fails), and can embed other media types too, but is a bit more complex to implement.You can explore sample implementations for these tags here.
Comparison of embedding methods MethodEase of useCustomizationFallback supportBrowser compatibility⭐⭐⭐⭐⭐❌✅ Excellent⭐⭐⭐⭐⭐❌✅ Good⭐⭐⭐⭐⭐✅✅ Excellent When to use these methodsUse native HTML embedding methods when:
You just need to display PDFs — no nigation, search, or interactivity required.You want a quick prototype without installing extra libraries.You’re building a lightweight application that minimizes dependencies.However, these options fall short for projects needing advanced PDF controls, annotations, or a custom UI. For those, libraries like react-pdf or commercial SDKs like Nutrient offer much more flexibility and power.
Limitations of embedding PDFsWhile these methods are simple, they come with limitations:
No custom UI — You can’t easily add custom nigation controls, annotations, or search functionality.Limited interactivity — Users can’t interact with a PDF beyond basic viewing.Performance issues — Large PDFs may load slowly or cause performance issues in the browser.For more advanced PDF rendering in React, you he two main options: the open source react-pdf library or Nutrient's React PDF library. The choice depends on your specific requirements for features, development time, and ongoing maintenance needs.
React PDF implementation approaches: Technical comparisonWhen selecting a React PDF solution, consider the technical trade-offs between open source and commercial options based on your application requirements.
Open source react-pdf libraryreact-pdf provides basic PDF rendering capabilities:
Downloads — ~950K weekly downloads on npmCore functionality — Document rendering with Document and Page componentsImplementation approach — Requires custom UI development for nigation and controlsCommunity support — Active developer community with community-driven maintenance Nutrient React PDF SDKNutrient offers a comprehensive document processing platform:
Complete UI — Pre-built interface components with customization optionsFeature set — 30+ capabilities including annotations, forms, signatures, and redactionPerformance — WebAssembly-powered rendering optimized for large documentsSupport model — Commercial support with SLA guaranteesDevelopment time — Reduced implementation time with pre-built components Requirements for building a React PDF viewerBefore diving into react-pdf implementation, ensure you he:
Node.js version 14 or later(opens in a new tab)A package manager compatible with npm (Yarn(opens in a new tab) or npm(opens in a new tab) — version 5.6+)Vite(opens in a new tab) for project scaffolding (we'll show setup commands below)Implementation considerations: Evaluate whether custom development time with react-pdf aligns with project timelines, or if a comprehensive solution like Nutrient's React PDF library better fits your feature requirements and development resources.
Building a React PDF viewer with react-pdf (open source approach)Start by creating a React.js project with vite(opens in a new tab):
Terminal windownpm create vite@latest react-pdf-demo -- --template reactAfter the project is created, change the directory into the project folder:
Terminal windowcd react-pdf-demo Adding react-pdfNow, you can install the npm package for the react-pdf library from the terminal:
Terminal windownpm install react-pdfPlace the file you want to render inside the public directory of the react-pdf-example project. You can use our demo document as an example; you just need to rename it to document.pdf.
Displaying a PDFreact-pdf comes with two components: Document and Page. Document is used to open a PDF and is mandatory. Within the document, you can mount pages, which are used to render the PDF page. To integrate this into your example project, open src/App.jsx and replace its contents with the following:
import { useState } from "react";import { Document, Page } from "react-pdf"; // Text layer for React-PDF.import "react-pdf/dist/Page/TextLayer.css"; const App = () => { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); const onDocumentLoadSuccess = ({ numPages }) => { setNumPages(numPages); }; const goToPrevPage = () => setPageNumber(pageNumber - 1 setPageNumber(pageNumber + 1 >= numPages ? numPages : pageNumber + 1); return ( Prev Next Page {pageNumber} of {numPages} );}; export default App;For react-pdf to work, a PDF.js worker needs to be provided. You can do this in a couple of ways. For most cases, importing the worker will work, as was done in the src/App.jsx file:
import { pdfjs } from "react-pdf"; pdfjs.GlobalWorkerOptions.workerSrc = new URL( "pdfjs-dist/build/pdf.worker.min.mjs", importa.url,).toString();You can read more about how to configure a PDF.js worker in your project here(opens in a new tab).
Now, start the application by running the following:
Terminal windownpm run devOne of the disadvantages of using react-pdf is that it doesn’t come with a UI. In this example, you’ve rendered two buttons to nigate between pages and showed the total number of pages.
Your browser doesn't support HTML5 video. Here is a link to the video instead.
You can access the full code on GitHub(opens in a new tab).
Technical limitations of react-pdf for complex applicationsWhile react-pdf works for basic PDF rendering, consider these technical constraints for feature-rich applications:
UI development required — No pre-built nigation, zoom controls, or toolbarsText selection implementation — Text layer handling requires additional development workPerformance optimization — Large document handling needs custom memory managementFeature gaps — Annotations, forms, and signatures require separate implementationsMaintenance overhead — Browser compatibility and PDF.js updates need ongoing attentionDevelopment considerations: Factor in 2-4 months for building production-grade UI and features with react-pdf, versus using a complete SDK with pre-built components.
Your browser doesn't support HTML5 video. Here is a link to the video instead.
Complete PDF solution: Nutrient React PDF libraryWhile the previous section demonstrated basic PDF viewing with react-pdf, many applications require additional document processing capabilities. Nutrient's React PDF library provides a comprehensive platform with minimal setup time.
Nutrient provides comprehensive document processing features for React applications:
✅ Pre-built UI components — Responsive interface with configurable toolbars, nigation, zoom, and layout options
✅ Annotation system — 15+ annotation tools including highlights, shapes, and comments with programmatic API
✅ Document manipulation — Text editing, page management, redaction, and form processing capabilities
✅ Multi-format support — PDF, DOCX, XLSX, and image format rendering and processing
✅ Performance optimization — WebAssembly-based rendering for efficient large document handling
✅ Enterprise support — Commercial backing with technical support and regular updates
Nutrient offers a complete document processing platform that reduces custom development time while providing enterprise-grade functionality.
Creating a new React projectUse vite(opens in a new tab) to scaffold out a simple React application:
Terminal windownpm create vite@latest nutrient-react-example -- --template reactcd nutrient-react-example Install Nutrient Web SDKNext, install the @nutrient-sdk/viewer package:
npm pnpm yarn Terminal windownpm i @nutrient-sdk/viewer Terminal windowpnpm add @nutrient-sdk/viewer Terminal windowyarn add @nutrient-sdk/viewer Copying SDK assets to the public directoryNutrient Web SDK loads its WebAssembly and supporting files from a local path, so you need to copy them to the public folder. Start by installing the required copy plugin:
Terminal windownpm install -D rollup-plugin-copyThen, update your Vite config (vite.config.ts) to copy the SDK’s asset files during build:
import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import copy from "rollup-plugin-copy"; export default defineConfig({ plugins: [ copy({ targets: [ { src: "node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib", dest: "public/", }, ], hook: "buildStart", }), react(), ],}); Displaying a PDFNow that everything is set up, you’ll render a PDF using the Nutrient SDK.
Basic usage in App.tsx:
import { useEffect, useRef } from "react"; function App() { const containerRef = useRef(null); useEffect(() => { const container = containerRef.current; let cleanup = () => {}; (async () => { const NutrientViewer = (await import("@nutrient-sdk/viewer")).default; // Unload any previous instance. NutrientViewer.unload(container); if (container && NutrientViewer) { NutrientViewer.load({ container, document: "/example.pdf", baseUrl: `${window.location.protocol}//${ window.location.host }/${importa.env.PUBLIC_URL ?? ""}`, }); } cleanup = () => { NutrientViewer.unload(container); }; })(); return cleanup; }, []); return ;} export default App;You can also render a different file by changing the document path or making it dynamic.
Once everything is configured, start your app:
Terminal windownpm run devYou’ll now see the Nutrient Web SDK UI rendering your PDF inside the browser!
Note that because Nutrient is a commercial product, you’ll see a Nutrient Web SDK evaluation notice on the document. To get a license key, contact Sales.
Your browser doesn't support HTML5 video. Here is a link to the video instead.
You can find the finished code on GitHub(opens in a new tab).
Technical comparison: react-pdf vs Nutrient SDKCompare implementation approaches based on development requirements, feature coverage, and long-term maintenance considerations:
Featurereact-pdf (Open Source)Nutrient React PDF Library ⭐Setup timeHours + custom UI development15 minutes with pre-built componentsUI componentsCustom development requiredComplete interface libraryAnnotation toolsNot ailable15+ annotation types with APIForm processingNot supportedComplete forms and e-signature supportText selectionBasic text layer handlingAdvanced selection with copy/pastePerformance (large files)JaScript-based renderingWebAssembly-optimized renderingFile format supportPDF onlyPDF, DOCX, XLSX, imagesMobile optimizationManual responsive implementationBuilt-in mobile interfaceTechnical supportCommunity forumsCommercial support with SLADevelopment effort2-4 months for production featuresImmediate deploymentImplementation decision: Consider development timeline, feature requirements, and maintenance resources when choosing between custom development and comprehensive SDK solutions. Evaluate options based on your specific needs.
Accessibility considerationsWhat each option provides
, , — Minimal a11y. Embedded PDFs are typically not exposed to screen readers; keyboard users struggle to reach or nigate the content. Little control over focus, roles, or labels.react-pdf (open source) — You can add ARIA and basic keyboard nigation yourself, but the rendered text layer is often not announced properly without customization, and focus/semantics require manual work.Nutrient Web SDK — Built-in support for accessible nigation and reading:Screen reader compatible text layers and semanticsFull keyboard access (tab order, shortcuts, focus trapping/return)High-contrast modes and color-accessible annotationsAccessible annotation tools and formsDocumentation and patterns aligned with WCAG and Section 508 out of the boxWhy it matters
Enterprises increasingly require WCAG conformance for internal and customer-facing apps.Achieving parity with custom code in open-source viewers can be time-consuming and fragile.For accessibility compliance (e.g. WCAG or Section 508), Nutrient is the more robust solution.
React PDF viewer trends for 2025As React PDF viewer technology continues to evolve, several key trends are shaping the landscape. Nutrient leads the industry by supporting these modern requirements out of the box:
Performance optimization WebAssembly integration for faster rendering of large documents. Nutrient’s rendering engine leverages WebAssembly for high performance, especially with complex or large PDFs.Lazy loading strategies for multi-page PDFs. Built-in virtualization and efficient page loading help optimize memory usage and performance in long-running applications.Memory management improvements — Intelligent caching and disposal systems are designed to prevent memory leaks and ensure smooth operation. Mobile-First development Responsive design requirements for seamless mobile PDF viewing. Nutrient’s UI automatically adapts to any screen size, providing a consistent experience across devices.Touch gesture support for intuitive nigation on tablets and phones. Native touch gestures such as pinch-to-zoom, swipe nigation, and touch-friendly annotation tools are supported. AI and advanced features Document intelligence integration for content analysis. Nutrient offers AI-powered document understanding, including features like text analysis, redaction, and summarization.Automated form recognition and data extraction capabilities. AI tools assist with form field detection and data extraction.Smart search and summarization — Full-text search and document summarization features are ailable. Security and Enterprise needs Enhanced security protocols for sensitive document handling. Nutrient provides encryption, content security policies, and secure document transmission.Digital signature verification built into viewer components. Support for electronic and digital signatures, including certificate-based verification.Enterprise authentication and permissions — Role-based permissions and integration with enterprise authentication systems are supported.Unlike open source alternatives that require custom development for these features, Nutrient provides comprehensive support for all major 2025 React PDF viewer trends, ensuring your application stays current with minimal development effort.
Conclusion: Selecting the right React PDF implementationThis guide covered three approaches to building a React PDF viewer, from basic HTML embedding to the react-pdf library to Nutrient's comprehensive SDK. The optimal choice depends on your specific requirements for features, development resources, and timeline.
Implementation decision framework: Simple display needs? → Use HTML embedding for basic PDF viewingCustom UI requirements? → Consider react-pdf with 2-4 months development budgetComprehensive document processing? → Evaluate Nutrient SDK for complete functionality Technical considerations for Nutrient adoption: Accelerated development — Pre-built components reduce implementation timeUser experience consistency — Professional interface patterns and interactionsEnterprise-grade reliability — Production-tested with commercial supportComplete feature coverage — Annotations, forms, signatures, and editing capabilitiesOngoing maintenance — Regular updates and technical support includedEvaluate your application requirements and development resources when selecting a PDF solution. Compare implementation approaches or explore technical capabilities to determine the best fit for your project.
Beyond React, Nutrient supports all major frameworks: Vue.js, Angular, vanilla JaScript, and jQuery. View all framework options and find the perfect fit for your stack.
FAQWhat's the best React PDF library: react-pdf vs Nutrient?
The choice depends on your requirements. react-pdf works well for basic PDF rendering with custom UI development, while Nutrient provides comprehensive document processing with pre-built components. Nutrient offers complete UI, 30+ features, WebAssembly performance, and commercial support — reducing development time compared to building custom solutions with react-pdf.
How do I build a React PDF viewer with react-pdf?
To create a React PDF viewer with react-pdf: 1) Install the library (npm install react-pdf), 2) Import Document and Page components, 3) Configure the PDF.js worker, and 4) Build your own UI controls. However, this approach requires significant development time compared to using Nutrient's ready-made solution.
What are the main limitations of react-pdf for production apps?
The main react-pdf limitations include:
No built-in UI (requires custom development)Poor text selection experiencePerformance issues with large filesNo annotation or form-filling capabilitiesOngoing maintenance burdenSee the complete limitations comparison.
Should I use react-pdf or Nutrient for my React PDF project?
Consider your project requirements and development resources. react-pdf works well for prototypes and simple PDF viewing with custom UI development. Nutrient provides enterprise-grade PDF functionality with rapid setup, professional UI components, annotations, forms, signatures, and optimized performance. Evaluate development timeline and feature needs when making this decision.
Can I migrate from react-pdf to Nutrient easily?
Yes! Migrating from react-pdf to Nutrient is straightforward and provides immediate benefits. Nutrient's React integration replaces your custom react-pdf implementation with a single component that includes all the features you were building manually. Most teams complete the migration in a few hours.