React file viewer: Display PDFs, images, and Office documents in your app
Learn how to build a React file viewer that opens PDFs, images, and Office docs client side with Nutrient Web SDK. Full code, Vite setup, and demo.
JAVASCRIPT PDF VIEWER
Integrate advanced document viewing, annotations, forms, signing, and editing capabilities into your web apps using any JavaScript framework. Whether you prefer the convenience of client-side rendering and processing or powerful server-side performance and security, we have you covered.
JAVASCRIPT PDF VIEWER
Build faster with our JavaScript PDF viewer’s easy setup, detailed documentation, and plug-and-play code. Process PDFs client-side and offline, with server support for performance and security.
Save time and resources by choosing to build with our JavaScript PDF viewer. No more bugs and open source nightmares. Just performant document support without the headaches.
Seamlessly blend our web viewer into your app through your own custom UI and brand identity so that no user would ever know you didn’t build it yourself.
Deliver AI functionality with AI Assistant. Whether you’re looking to add AI summarization, translation, redaction, data extraction, or comparison, our web viewer is the simplest way to add intelligence to your documents.
Nutrient Web Viewer SDK is a modular JavaScript bundle you can drop into any stack today and extend tomorrow.
Render large PDFs instantly, layer on markups and threaded comments, and watch feedback appear live.
Add, reorder, or rewrite pages and build dynamic forms in a browser — zero desktop tools.
Apply tamper‑proof eSignatures, run pixel‑perfect diffs, and scrub sensitive data before release.
Ask a document anything, classify content, generate PDFs, and auto‑convert at scale with one endpoint.
Output long‑term PDF/A, enforce encryption, and breeze through audits with built‑in accessibility standards.
WEB PLAYGROUND
CODE EXAMPLES
Drop in a viewer that’s fast, framework-friendly, and fully client-side — no server, no setup.
Basic Example
import PSPDFKit from "pspdfkit";
const instance = await PSPDFKit.load({ container: "#pspdfkit", document: "<pdf-file-path>", licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"});
console.log("PSPDFKit for Web is ready!");console.log(instance);const PSPDFKit = require("pspdfkit");
PSPDFKit.load({ container: "#pspdfkit", document: "<pdf-file-path>", licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"}).then(function(instance) { console.log("PSPDFKit for Web is ready!"); console.log(instance);})Custom Toolbar
import PSPDFKit from "pspdfkit";
const instance = await PSPDFKit.load({ container: "#pspdfkit", document: "<pdf-file-path>", licenseKey: "YOUR_LICENSE_KEY_GOES_HERE", toolbarItems: [...PSPDFKit.defaultToolbarItems, { type: "custom", id: "my-button", title: "My Button", onPress: event => { alert("hello from my button"); } }]});const PSPDFKit = require("pspdfkit");
PSPDFKit.load({ container: "#pspdfkit", document: "<pdf-file-path>", licenseKey: "YOUR_LICENSE_KEY_GOES_HERE", toolbarItems: PSPDFKit.defaultToolbarItems.concat([{ type: "custom", id: "my-button", title: "My Button", onPress: function(event) { alert("hello from my button"); } }])});Create Annotation
import PSPDFKit from "pspdfkit";
const instance = await PSPDFKit.load({container: "#pspdfkit",document: "<pdf-file-path>",licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"});
const annotation = new PSPDFKit.Annotations.LineAnnotation({ pageIndex: 0, startPoint: new PSPDFKit.Geometry.Point({ x: 95, y: 95}), endPoint: new PSPDFKit.Geometry.Point({ x: 195, y: 195}), boundingBox: new PSPDFKit.Geometry.Rect({ left: 90, top: 90, width: 200, height: 200, }),});
instance.createAnnotation(annotation);const PSPDFKit = require("pspdfkit");
PSPDFKit.load({ container: "#pspdfkit", document: "<pdf-file-path>", licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"}).then(instance => { const annotation = new PSPDFKit.Annotations.LineAnnotation({ pageIndex: 0, startPoint: new PSPDFKit.Geometry.Point({ x: 95, y: 95}), endPoint: new PSPDFKit.Geometry.Point({ x: 195, y: 195}), boundingBox: new PSPDFKit.Geometry.Rect({ left: 90, top: 90, width: 200, height: 200, }), });
instance.createAnnotation(annotation);})Nutrient SDKs and Cloud APIs add full document lifecycle support to any platform, tech stack, or infrastructure in minutes. The same technology meets Fortune 500 requirements while helping startups ship fast.
Clean documentation, drop-in code, and MCP hooks for both hands-on developers and AI agents.
Web, mobile, desktop, server, or Nutrient Cloud — with no lock-in.
SOC 2 Type II and WCAG 2.2-compliant workflows with PDF/UA-accessible documents.
Built-in document AI with support for leading LLMs and their private implementations.
DEPLOYMENT OPTIONS
Nutrient Web Viewer SDK operates fully client-side with in-browser processing, or it can be combined with either Document Engine or DWS Viewer API for server-side document streaming, real-time collaboration, and powerful performance.
| Web Viewer SDK | Web Viewer SDK + Document Engine | DWS Viewer API | |
|---|---|---|---|
| User interface | HTML5-based | HTML5-based | HTML5-based |
| Deployment | Viewer: In-browser via WebAssembly |
Viewer: In-browser Rendering: Self-hosted (with Docker), or managed by Nutrient |
Viewer: In-browser Rendering: Hosted in the cloud by Nutrient |
| Rendering | Client-side | Server-side | Server-side |
| Key notes |
|
|
|
| Documentation |
Learn how to build a React file viewer that opens PDFs, images, and Office docs client side with Nutrient Web SDK. Full code, Vite setup, and demo.
A WebAssembly benchmark for browser vendors to test a real-world production application.
Discover how WebAssembly enhances document processing speed and efficiency directly in JavaScript applications.
PROVEN AT SCALE
Renders multipage PDFs and signature tags with Nutrient, keeping 200 million users in 188 countries moving at the speed of eSignature.
Rolled out nationwide PAdES-compliant signatures with the Nutrient PDF SDK, letting every Austrian citizen sign official documents securely in seconds.
Construction ERP powering one‑quarter of ENR’s Top 400 contractors embeds Nutrient SDKs for mobile drawing management across iOS, Android, and Web, slashing developer time and fueling double‑digit growth.
FREE TRIAL
Start building with Web Viewer SDK in minutes — no payment information required.
A JavaScript PDF viewer is a developer toolkit that enables embedding powerful PDF features — like viewing, editing, annotating, and signing — directly into web applications using JavaScript. Nutrient’s web PDF SDK delivers high-performance rendering, a customizable UI, and built-in tools for collaboration, redaction, and compliance — all without relying on external apps.
When picking a JavaScript PDF viewer, developers should prioritize flexibility, performance, and ease of integration. Here’s what to consider:
Nutrient (formerly PSPDFKit) is built for developers who want control, speed, and flexibility without compromise — perfect for embedding rich PDF workflows directly into your browser-based app.
Nutrient Web Viewer SDK is the best in its category for being flexible, fast, and easy to use for developers. This is especially true when you want to use our full PDF functionality without giving control to other viewers.
What core features does Nutrient Web Viewer offer?
Our web viewer is a JavaScript PDF viewer that developers can integrate to enable their users to view, annotate, edit, and sign PDF documents directly within their web applications. It supports high-fidelity rendering, form viewing and filling, redaction, text editing, text comparison, measurement tools, comments, and so much more.
Is the JavaScript PDF viewer compatible with various JavaScript frameworks?
Yes. Nutrient Web Viewer SDK is designed for seamless integration with all major JavaScript frameworks, including React, Angular, Vue, Svelte, and Next.js. It requires only a DOM container for appending the viewer, ensuring flexibility across different development environments.
Can the JavaScript PDF viewer be customized to match the look and feel of an application?
Nutrient Web Viewer SDK makes it easy to customize every part of the user interface. Our robust API for configuring behavior and appearance lets you hide or add buttons, change the theme to match your look and feel, trigger workflows, create overlays, and much more. See our user interface customization guide for more details.
Does the JavaScript PDF viewer support client-side processing, and what are its benefits?
Yes. Nutrient Web Viewer SDK supports completely in-browser client-side PDF processing and rendering by leveraging the latest WebAssembly technology. This approach offloads processing to the browser, reducing server dependency, enabling offline processing, and providing the ability to integrate it into other low-code applications on major business platforms like Salesforce, SharePoint, Mendix, and more.
What deployment options are available for the JavaScript PDF viewer?
Nutrient Web Viewer SDK supports three flexible deployment
options to fit your technical needs:
1) A fully
client-side deployment that runs entirely in the browser
powered by WebAssembly technology.
2) A paired
deployment with Document Engine for advanced control and
server-side performance.
3) Integration with our
cloud-hosted DWS Viewer API for backend-performant features
without any backend setup.
The variety of
deployment options gives you the freedom to choose the best
model for your application and use case needs.
Is the JavaScript PDF viewer compatible with various browsers and platforms?
Yes. Nutrient Web Viewer SDK ensures compatibility across all major web browsers, including Chrome, Firefox, Safari, Edge, and Firefox ESR. It also supports cross-platform applications, ensuring consistent performance on desktop and mobile and in cloud-based solutions.
How does the JavaScript PDF viewer ensure document security and compliance?
Nutrient Web Viewer SDK supports features — including digital signatures, redaction, and encryption — that enable users to maintain document security and compliance with regulations such as GDPR, HIPPA, and more. Our client-side deployment inherently ensures data privacy by only processing documents on the client’s device. Nutrient is SOC 2 Type II certified and continuously monitors, maintains, audits, and updates internal security procedures, in addition to regularly engaging in third-party penetration testing of all software.