PSPDFKit for Web

Add PDF Support to Your Web App in No Time

View and annotate PDF files on the web. Works great on mobile and desktop. 
 No server-side component required.

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, 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 supported including IE 11.

Features

Unrivalled PDF support for the web.

PDF Viewing

A fast and smooth viewing experience – even with large documents, with support for both single and double page layouts. Intuitive document navigation via scrolling, pagination, pan and zoom.


Responsive

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


Highlight Text

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


Freehand Drawing

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


Text Annotation

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


Note Annotation

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


Search

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


Printing

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


Browser Support

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


Coming Soon FormsDigital SignaturesThumbnails & Outlines

Deployment

Built for easy integration.

Server Deployment

Host on-premise or in the cloud:

Docker Google Cloud Platform Microsoft Azure Amazon Web Services

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

With rendering happening on the server, the experience is smooth no matter the device. The client intelligently downloads pages on demand, so even large documents can be browsed quickly. Your users' data remains safe with you, with fine-grained access control using JWT.

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

Unique Features:

  • Open 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 for who has
 access to the original PDF document.
  • Supports collaboration with PSPDFKit Instant.

Learn more about server deployment


Standalone Deployment

Uses state-of-the-art WebAssembly
Learn more

Deploying and maintaining a dedicated server component is not always feasible, so we also offer a standalone deployment option using state-of-the-art WebAssembly technology (with asm.js fallback for older browsers).

This deployment method requires nothing else 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.

Learn more about standalone deployment

Integration

PSPDFKit for Web can be integrated with just a few lines of code, and comes with a rich API to allow for complete customization.

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

PSPDFKit.load({
  container: "#pspdfkit",
  pdf: "<pdf-file-path>",
  licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
}).then(instance => {
  console.log("PSPDFKit loaded", instance);
}).catch(error => {
  console.error(error.message);
});
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 loaded", instance);
}).catch(function(error) {
  console.error(error.message);
});
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const toolbarItems = PSPDFKit.defaultToolbarItems;
toolbarItems.reverse();
toobarItems.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
var toolbarItems = PSPDFKit.defaultToolbarItems;
toolbarItems.reverse();
toobarItems.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
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); // => -1
});
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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); // => -1
  });
});

Check out the Guides and API docs for more examples.

Get up and running in no time with our example projects:

Or integrate yourself, with easy installation via your package manager of choice:

Migrating from PDF.js?

Free 60-Day Trial

Download the PSPDFKit for Web SDK and try it in your app today.

Web