WEB PDF SDK

Accelerate web development with a powerful Web SDK

Seamlessly integrate comprehensive document viewing, annotation, and editing capabilities into your web applications using any JavaScript framework. Our web PDF SDK lets you enjoy fast setup and flexible deployment options tailored to your needs.

Launch Demo

guides

FEATURE-RICH VIEWER

Customizable for you, seamless for your users

Digital document with toolbar spanning along the top of the doc, and labels above describing the functionality of each tool in Nutrient PDF Viewer.

Toolbar of web user interface explained with labels

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

Basic example

Custom toolbar

Create annotation

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})

API

Guides

Changelog

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});

Changelog

API

Guides

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})

Changelog

API

Guides

Play in our sandbox

Try our interactive Web SDK playground to build and test code

Try it

Example projects

Node.js

Vue.js

TypeScript

Example integration and guides

npm

Yarn

Migration guide

PDF.js

Knowledge center

Show all

Guides

Code samples

Blog

Deployment Options

Choose the best deployment option for your business

The Nutrient Web SDK operates fully client-side in the browser, or it can be combined with Document Engine for server-supported document streaming, real-time collaboration, and improved performance.

	Web SDK	Web SDK + Document Engine
User interface	HTML5-based	HTML5-based
Deployment	Viewer: In-browser via WebAssembly	Viewer: In-browser via WebAssembly Rendering: Self-hosted (with Docker), or managed by Nutrient
Rendering	Client-side	Server-side
Key notes	Deploy instantly using JavaScript files and the Baseline UI design framework Handle document edits via XFDF or Instant JSON Opt to keep documents offline — and in the browser — for additional security	On-demand page streaming for faster loading Secure document access using JWTs Unlocks document syncing and real-time collaboration OCR and collaboration tools AI Assistant available
Documentation	Get started	Get started

Client-side or server-backed

The choice is yours

WebAssembly

Our standalone Web SDK runs 100 percent in the browser using robust WebAssembly technology

guides

Blog

Three unique blocks showing how native browser support and a web app can be assembled with Nutrient Web SDK.

Document Engine

Pair Document Engine with our Web SDK, either self-hosted (with Docker) or managed by Nutrient

learn more

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