PSPDFKit for Web

Add a PDF Web Viewer to Your Web App in No Time

View and annotate PDF files on the web. Use on both mobile and desktop. Choose from standalone or server-side deployment.

Easy Integration with

React PDF Viewer Angular PDF Viewer jQuery PDF Viewer Ember PDF Viewer Vue PDF Viewer Backbone PDF Viewer

Features

Unrivaled PDF support for the web.

Powerful Features

Fast document rendering, easy navigation, and intuitive annotation tools including highlighting, drawing, and notes.

Easy to Integrate

Integrate with just a few lines of code, and customize with a rich API. Supports both server and standalone deployment.

Desktop and Mobile

Optimized for a great experience across mobile, tablet, and desktop. All modern browsers, including IE 11, are supported.

PSPDFKit for Web — PDF Web Viewer - PDF Viewing Feature

PDF Viewing

A fast and smooth viewing experience — even with large documents. Supports both single- and double-page layouts and page rotation. Intuitive document navigation via scrolling, pagination, pan, and zoom.


PSPDFKit for Web — PDF Web Viewer - Responsive Feature

Responsive

Fluid, responsive design, including a smart adaptive toolbar. Full touch support for mobile, and browser 
support from IE 11 and up.


PSPDFKit for Web — PDF Web Viewer - Forms Feature

Forms

Full support for PDF AcroForms, so your users can view, fill out, and submit forms with ease. All form widgets are built with responsiveness in mind and work on both desktop and mobile.


PSPDFKit for Web — PDF Web Viewer - Text Highlighting Feature

Text Highlighting

Easily mark up text on a document via an intuitive highlight menu with support for highlighting, strikethrough, and underlining.


PSPDFKit for Web — PDF Web Viewer - Freehand Drawing Feature

Freehand Drawing

Draw anywhere on a document. Move and resize, and change appearance — including color, thickness, and opacity.


PSPDFKit for Web — PDF Web Viewer - Text Annotation Feature

Text Annotation

Add text anywhere on a document. Move and resize, and change appearance — including font, size, alignment, and color.


PSPDFKit for Web — PDF Web Viewer - Note Annotation Feature

Note Annotation

Add longer comments, which can be collapsed or expanded, to a document. Change appearance with a variety of shapes and colors.


PSPDFKit for Web — PDF Web Viewer - Search Feature

Search

Quickly search documents with a native-like search experience. Adapts to both mobile and desktop, with intuitive keyboard shortcuts for power users.


PSPDFKit for Web — PDF Web Viewer - Thumbnail Sidebar Feature

Thumbnail Sidebar

Get a quick overview of all pages in a document. Show and hide at any time, resize, or expand into a full gallery view.


PSPDFKit for Web — PDF Web Viewer - Localization Feature

Localization NEW

Built-in support for 27 languages, with the ability to add and customize localization and change locale at runtime.


PSPDFKit for Web — PDF Web Viewer - Printing Feature

Printing

Print and export documents, including all annotations. Use the system print dialog to allow for full control of the output.


Browser Support

Fully tested across all modern browsers, 
and includes support for IE 11.

WebAssembly

Powered by WebAssembly

Great performance, no server required

Simple drop-in integration for your app with no server-side component required. Behind the scenes, we run our proven and robust C++ core in the browser using state-of-the-art WebAssembly technology.

Learn more about standalone deployment

Read our WebAssembly series


Deployment

PDF Web Viewer: Built for Easy Integration.

Server Deployment

Host on-premises or in the cloud:

PDF Web Viewer powered by Docker Google Cloud Platform Microsoft Azure Amazon Web Services

Server-backed deployment requires the installation of our PSPDFKit Server component.

With rendering taking place on the server, the experience is smooth no matter the device. The client intelligently downloads pages on demand, providing a fast viewing experience for documents of any size. Your users’ data remains safe with you thanks to precise access control via JWT.

The server is delivered as a Docker container for easy deployment, and it can work with a dedicated file server or Amazon S3 cloud storage.

Unique Features:

  • Opens large PDF documents in milliseconds.
  • Built-in document and annotation management and
 archiving on Amazon S3 or a dedicated file server.
  • Fine-grained authentication control over who has
 access to the original PDF document.
  • Supports collaboration with PSPDFKit Instant.

Learn more about server deployment


Standalone Deployment

Web Assembly

Uses state-of-the-art WebAssembly technology
Learn more

PSPDFKit for Electron

Create cross-platform native apps using web technologies.
Learn more

Deploying and maintaining a dedicated server component is not always feasible, so we also offer a standalone deployment option that uses WebAssembly technology (with asm.js fallback for older browsers).

This deployment method requires nothing but the JavaScript files and essential assets.

The absence of a server component makes it easier to integrate this solution and allows you to rapidly deploy it into your existing website.

Unique Features:

  • Workload is offloaded to clients.
  • Runs in contexts where no server is available.
  • Simple integration.
  • Ability to easily manage and share document changes with support for both XFDF and Instant JSON .

Learn more about standalone deployment

Integration

Using PSPDFKit

PSPDFKit can be integrated with just a few lines of code,
and it comes with a rich API, which allows for complete customization.

Copy
1
2
3
4
5
6
7
8
9
import PSPDFKit from "pspdfkit";

const instance = await PSPDFKit.load({
  container: "#pspdfkit",
  pdf: "<pdf-file-path>",
  licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
});

console.log("PSPDFKit for Web loaded", instance);
Copy
1
2
3
4
5
6
7
8
9
10
11
var PSPDFKit = require("pspdfkit");

PSPDFKit.load({
  container: "#pspdfkit",
  pdf: "<pdf-file-path>",
  licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
}).then(function(instance) {
  console.log("PSPDFKit for Web loaded", instance);
}).catch(function(error) {
  console.error(error.message);
});
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import PSPDFKit from "pspdfkit";

const toolbarItems = PSPDFKit.defaultToolbarItems;
toolbarItems.reverse();
toolbarItems.push({
  type: "custom",
  id: "cat",
  icon: "https://example.com/icons/cat.svg",
  mediaQueries: ["(min-width: 480px)"],
  onPress: () => alert("meow"),
});

PSPDFKit.load({
  // ...
  toolbarItems
});
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var PSPDFKit = require("pspdfkit");

var toolbarItems = PSPDFKit.defaultToolbarItems;
toolbarItems.reverse();
toolbarItems.push({
  type: "custom",
  id: "cat",
  icon: "https://example.com/icons/cat.svg",
  mediaQueries: ["(min-width: 480px)"],
  onPress: function () {
    alert("meow");
  },
});

PSPDFKit.load({
  // ...
  toolbarItems: toolbarItems
});
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import PSPDFKit from "pspdfkit";

const { List, Rect } = PSPDFKit.Immutable;
const { DrawingPoint } = PSPDFKit.Geometry;
const { InkAnnotation } = PSPDFKit.Annotations;

PSPDFKit.load(configuration).then(async (instance) => {
  var annotation = new InkAnnotation({
    pageIndex: 0,
    boundingBox: new Rect({ width: 100, height: 100 }),
    lines: new List([
      new List([
        new DrawingPoint({ x: 0,   y: 0  }),
        new DrawingPoint({ x: 100, y: 100}),
      ])
    ])
  });

  const createdAnnotation = await instance.createAnnotation(annotation);
  console.log(createdAnnotation.id); // => "01BS964AM5Z01J9MKBK64F22BQ"
});
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var PSPDFKit = require("pspdfkit");

PSPDFKit.load(configuration).then(function(instance) {
  var annotation = new PSPDFKit.Annotations.InkAnnotation({
    pageIndex: 0,
    boundingBox: new PSPDFKit.Geometry.Rect({ width: 100, height: 100 }),
    lines: new PSPDFKit.Immutable.List([
      new PSPDFKit.Immutable.List([
        new PSPDFKit.Geometry.DrawingPoint({ x: 0,   y: 0  }),
        new PSPDFKit.Geometry.DrawingPoint({ x: 100, y: 100}),
      ])
    ])
  });

  instance.createAnnotation(annotation).then(function(createdAnnotation) {
    console.log(createdAnnotation.id); // => "01BS964AM5Z01J9MKBK64F22BQ"
  });
});

Check out our guides and API docs for more examples.

Free 60-Day Trial

Download PSPDFKit for Web — PDF Web Viewer and try it in your app today.

Web