WEB PDF SDK

Accelerate web development with a powerful PDF SDK

Seamlessly integrate comprehensive document viewing, annotation, and editing capabilities into your web applications using any JavaScript framework. 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

See it in action!

Don't take our word for it. Give our Web SDK a test drive today with an interactive demo.

Benefits

Build faster

Go to market faster than your competition with our straightforward setup process, extensive documentation, support resources, and ready-to-use code samples and templates.

Improve ROI

Reduce the resources associated with building and maintaining robust document technology internally. Focus your efforts on creating more value for your users.

Customize more easily

Tailor the UI to match the look and feel of your app — your customers will never know you used a third-party vendor.

Scale with security

Rest easy knowing our SDKs are completely secure, reliable, and always up to date. Our dedicated support team is always on hand, giving you peace of mind, and your users a better experience.

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

Changelog

API

Guides

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

Example projects

Node.js

Vue.js

TypeScript

Example integration and guides

npm

Yarn

Migration guide

PDF.js

Customer reviews

See why Nutrient stands out in the world of document SDKs.

Knowledge center

Show all

Guides

Code samples

Blog

Free 30-Day Trial

Want to see Nutrient in your web app today?

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