Javascript pdf viewer
Integrate document functionality in minutes with our JavaScript PDF Viewer
Seamlessly integrate comprehensive document viewing, annotation, and editing capabilities into your web applications using any JavaScript framework. Our JavaScript PDF viewer lets you enjoy fast setup and flexible deployment options tailored to your needs.
FEATURE-RICH PDF VIEWER
Customizable for you, seamless for your users
Benefits of our PDF technology
Build faster
Speed up your launch with Nutrient Web SDK’s easy setup, detailed docs, and plug-and-play code. Process PDFs client-side for speed, with server support for complex tasks.
Improve ROI
Save time and resources with our JavaScript Web PDF SDK. It ensures smooth, fast document rendering, even for large files with embedded fonts and graphics.
Customize PDF files more easily
Seamlessly blend PDFs into your app with a custom UI; full control over splitting, merging, extracting; and HTML-to-PDF conversion for dynamic workflows.
Scale with security
Stay secure and compliant — our up-to-date PDF library supports digital signatures, redaction, and GDPR/HIPAA compliance, with expert support on hand.
Relied upon by industry leaders
EXAMPLES
Easy to integrate
1import PSPDFKit from "pspdfkit";
2
3const instance = await PSPDFKit.load({
4 container: "#pspdfkit",
5 document: "<pdf-file-path>",
6 licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
7});
8
9console.log("PSPDFKit for Web is ready!");
10console.log(instance);1const PSPDFKit = require("pspdfkit");
2
3PSPDFKit.load({
4 container: "#pspdfkit",
5 document: "<pdf-file-path>",
6 licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
7}).then(function(instance) {
8 console.log("PSPDFKit for Web is ready!");
9 console.log(instance);
10})1import PSPDFKit from "pspdfkit";
2
3const instance = await PSPDFKit.load({
4 container: "#pspdfkit",
5 document: "<pdf-file-path>",
6 licenseKey: "YOUR_LICENSE_KEY_GOES_HERE",
7 toolbarItems: [...PSPDFKit.defaultToolbarItems, {
8 type: "custom",
9 id: "my-button",
10 title: "My Button",
11 onPress: event => {
12 alert("hello from my button");
13 }
14 }]
15});1const PSPDFKit = require("pspdfkit");
2
3PSPDFKit.load({
4 container: "#pspdfkit",
5 document: "<pdf-file-path>",
6 licenseKey: "YOUR_LICENSE_KEY_GOES_HERE",
7 toolbarItems: PSPDFKit.defaultToolbarItems.concat([{
8 type: "custom",
9 id: "my-button",
10 title: "My Button",
11 onPress: function(event) {
12 alert("hello from my button");
13 }
14 }])
15});1import PSPDFKit from "pspdfkit";
2
3const instance = await PSPDFKit.load({
4container: "#pspdfkit",
5document: "<pdf-file-path>",
6licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
7});
8
9const annotation = new PSPDFKit.Annotations.LineAnnotation({
10 pageIndex: 0,
11 startPoint: new PSPDFKit.Geometry.Point({ x: 95, y: 95}),
12 endPoint: new PSPDFKit.Geometry.Point({ x: 195, y: 195}),
13 boundingBox: new PSPDFKit.Geometry.Rect({
14 left: 90,
15 top: 90,
16 width: 200,
17 height: 200,
18 }),
19});
20
21instance.createAnnotation(annotation);1const PSPDFKit = require("pspdfkit");
2
3PSPDFKit.load({
4 container: "#pspdfkit",
5 document: "<pdf-file-path>",
6 licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
7}).then(instance => {
8 const annotation = new PSPDFKit.Annotations.LineAnnotation({
9 pageIndex: 0,
10 startPoint: new PSPDFKit.Geometry.Point({ x: 95, y: 95}),
11 endPoint: new PSPDFKit.Geometry.Point({ x: 195, y: 195}),
12 boundingBox: new PSPDFKit.Geometry.Rect({
13 left: 90,
14 top: 90,
15 width: 200,
16 height: 200,
17 }),
18 });
19
20 instance.createAnnotation(annotation);
21})Play in our sandbox
Play in our interactive JavaScript PDF viewer playground to build and test code
Knowledge center
Deployment Options
Choose the best deployment option for your business
Nutrient Web SDK operates fully client-side in the browser, or it can be combined with either Document Engine or DWS Viewer API for server-supported document streaming, real-time collaboration, and improved performance.
Web SDK | Web 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 | Get started | Get started | Get started |
View and render documents how you want
WebAssembly
Our JavaScript PDF Viewer runs 100 percent on the client's browser leveraging Wasm technology
Document Engine
Pair Document Engine with our Web SDK, either self-hosted (with Docker) or managed by Nutrient
DWS Viewer API
Deploy the Web SDK with cloud-based processing for fast, secure document rendering — no infrastructure needed.
Pick your perfect solution
Our PDF software development kit is a complete suite of tools made to grow with your web app. You can start with what you need now to create your PDF documents and add more tools later. The Web PDF SDK is built to support cross-platform applications, ensuring compatibility across desktop, mobile, and cloud-based solutions.
Viewing
Open all documents with high fidelity in a well-designed viewer.
Open all documents with high fidelity in a well-designed viewer.
Comparison
Visually compare documents side by side.
Visually compare documents side by side.
Markup
Improve the review process with a suite of annotation tools.
Improve the review process with a suite of annotation tools.
Collaboration
Bring real-time collaboration to your documents.
Bring real-time collaboration to your documents.
Editing
Modify documents and easily edit PDF text directly in your app.
Modify documents and easily edit PDF text directly in your app.
Forms
Easy for users to fill forms. Easy for you to create them programmatically.
Easy for users to fill forms. Easy for you to create them programmatically.
Signing
Streamline contract execution and approval workflows by enabling eSignatures and PDF digital signatures.
Streamline contract execution and approval workflows by enabling eSignatures and PDF digital signatures.
Generation
Effortlessly generate PDFs from HTML and DOCX.
Effortlessly generate PDFs from HTML and DOCX.
OCR and Data Extraction
Give new life to scanned documents by easily converting them into text that's selectable and searchable.
Give new life to scanned documents by easily converting them into text that's selectable and searchable.
Conversion
Easily convert any Office document, image, email, or webpage into a high-quality PDF.
Easily convert any Office document, image, email, or webpage into a high-quality PDF.
Scanning and Barcodes
Capture and process information from physical documents and products.
Capture and process information from physical documents and products.
Security and Compliance
Protect sensitive information and meet regulatory requirements within your application.
Protect sensitive information and meet regulatory requirements within your application.
Frequently asked questions
What core features does Nutrient’s Web PDF SDK offer?
The SDK provides comprehensive tools for viewing, annotating, editing, and signing PDF documents directly within web applications. It supports high-fidelity rendering, form filling, redaction, and document manipulation, enhancing user interaction with PDFs.
Is the SDK compatible with various JavaScript frameworks?
Yes. Nutrient’s Web PDF 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 SDK be customized to match the look and feel of an application?
Yes. The SDK offers a fully customizable user interface, allowing developers to tailor toolbars, dialogs, and other UI components to align with their application’s design and branding requirements.
Does the SDK support client-side processing, and what are its benefits?
Yes. The SDK supports client-side PDF processing using WebAssembly technology. This approach offloads tasks to the browser, reducing server dependency, enhancing performance, and improving scalability.
What deployment options are available for the SDK?
The SDK offers flexible deployment options. It can operate fully client-side in the browser or be combined with Nutrient Document Engine for server-supported document streaming, real-time collaboration, and improved performance.
Is the SDK compatible with various browsers and platforms?
Yes. Nutrient’s Web PDF 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 SDK handle document security and compliance?
The SDK includes features such as digital signatures, redaction, and encryption to ensure document security. It supports compliance with regulations like GDPR and HIPAA, providing tools to manage sensitive information effectively.
Web PDF SDK
What is a web PDF SDK?
A web PDF SDK is a developer toolkit that allows you to embed 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.
- Fast, high-fidelity PDF rendering in the browser.
- Full support for annotations, editing, and signing.
- Drag-and-drop viewer customization with JavaScript APIs.
- Secure, client-side processing with optional server-side support.
- Works across all modern browsers and JavaScript frameworks.
How to choose the right web PDF SDK?
When choosing a web-based PDF SDK, developers should prioritize flexibility, performance, and ease of integration. Here’s what to consider:
- Rendering speed and quality — Can it handle large or complex PDFs without lag?
- UI flexibility — Does it allow deep customization of toolbars and layout?
- Browser compatibility — Is it stable across Chrome, Firefox, Safari, and Edge?
- Security and compliance — Does it support encryption, redaction, and digital signatures?
- Framework support — Does it play nicely with React, Angular, Vue, or vanilla JS?
What are the best solutions to solve my web-based PDF needs?
For building PDF tools directly into web apps, here’s how leading SDKs compare:
- Nutrient SDK — Lightning-fast rendering, full-featured annotation/editing, deep customization, and easy integration.
- PDF.js (open source) — Good for simple viewing but lacks advanced features like signing, collaboration, or UI flexibility.
- PDFTron Web SDK — Enterprise-ready but heavier and harder to customize quickly.
- Adobe PDF Embed API — Great for viewing, but limited interaction and branding flexibility.
What are the benefits of using Nutrient’s web PDF SDK?
Nutrient’s web PDF SDK is built for developers who want control, speed, and flexibility without compromise — perfect for embedding rich PDF workflows directly into your browser-based app.
- Fast setup, faster performance — Load and display large files in seconds.
- Customize everything — Toolbars, buttons, layouts — tweak it all with clean JS APIs.
- Rich feature set — Viewing, markup, form filling, digital signing, redaction, and more.
- Lightweight and secure — Processes files in the browser or server-side, depending on your use case.
- Scalable for enterprises or startups — Built for everything from internal tools to high-traffic apps.
How does Nutrient’s SDK compare to other web PDF solutions?
Nutrient Web 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 full PDF functionality without giving control to other viewers.
- More customization — Tailor the viewer and tools to your exact UI/UX needs.
- Superior speed — Handles embedded fonts, complex layouts, and large PDFs effortlessly.
- Rich JavaScript API — Integrate quickly into any frontend stack.
- Secure and compliant — Support for redaction, signatures, and GDPR/HIPAA compliance.
- Documentation you’ll actually like — Clear examples, interactive demos, and fast-start boilerplate code.
Latest from the blog
Blog