Getting Started on Web

Integrate into a Vanilla JavaScript Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

If you prefer a video tutorial, watch our step-by-step Getting Started with PSPDFKit video guide.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

cp -R ./node_modules/pspdfkit/dist/ ./assets/
  1. Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Integrating into Your Project

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

import "./assets/pspdfkit.js";

// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.
const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

PSPDFKit.load({
	baseUrl,
	container: "#pspdfkit",
	document: "document.pdf"
})
.then(instance => {
	console.log("PSPDFKit loaded", instance);
})
.catch(error => {
	console.error(error.message);
});
  1. Import index.js into your HTML page:

    <script type="module" src="index.js"></script>

See the full index.html file below:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

    <script type="module" src="index.js"></script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

cp -R ./node_modules/pspdfkit/dist/ ./assets/
  1. Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Integrating into Your Project

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

import "./assets/pspdfkit.js";

// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.
const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

PSPDFKit.load({
	baseUrl,
	container: "#pspdfkit",
	document: "document.pdf"
})
.then(instance => {
	console.log("PSPDFKit loaded", instance);
})
.catch(error => {
	console.error(error.message);
});
  1. Import index.js into your HTML page:

    <script type="module" src="index.js"></script>

See the full index.html file below:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

    <script type="module" src="index.js"></script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a Vanilla JavaScript Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

If you prefer a video tutorial, watch our step-by-step Getting Started with PSPDFKit video guide.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

cp -R ./node_modules/pspdfkit/dist/ ./assets/
  1. Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Integrating into Your Project

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

import "./assets/pspdfkit.js";

// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.
const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

PSPDFKit.load({
	baseUrl,
	container: "#pspdfkit",
	document: "document.pdf"
})
.then(instance => {
	console.log("PSPDFKit loaded", instance);
})
.catch(error => {
	console.error(error.message);
});
  1. Import index.js into your HTML page:

    <script type="module" src="index.js"></script>

See the full index.html file below:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

    <script type="module" src="index.js"></script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

cp -R ./node_modules/pspdfkit/dist/ ./assets/
  1. Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Integrating into Your Project

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

import "./assets/pspdfkit.js";

// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.
const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

PSPDFKit.load({
	baseUrl,
	container: "#pspdfkit",
	document: "document.pdf"
})
.then(instance => {
	console.log("PSPDFKit loaded", instance);
})
.catch(error => {
	console.error(error.message);
});
  1. Import index.js into your HTML page:

    <script type="module" src="index.js"></script>

See the full index.html file below:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

    <script type="module" src="index.js"></script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a Vanilla JavaScript Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

If you prefer a video tutorial, watch our step-by-step Getting Started with PSPDFKit video guide.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.4.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Integrating into Your Project

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Include pspdfkit.js in your HTML page:

<script src="assets/pspdfkit.js"></script>
  1. Initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
  	document: "document.pdf"
	})
	.then(function(instance) {
		console.log("PSPDFKit loaded", instance);
	})
	.catch(function(error) {
		console.error(error.message);
	});
</script>

See the full index.html file below:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

    <script src="assets/pspdfkit.js"></script>

    <script>
      PSPDFKit.load({
        container: "#pspdfkit",
        document: "document.pdf",
      })
        .then(function(instance) {
          console.log("PSPDFKit loaded", instance);
        })
        .catch(function(error) {
          console.error(error.message);
        });
    </script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.4.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Integrating into Your Project

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Include pspdfkit.js in your HTML page:

<script src="assets/pspdfkit.js"></script>
  1. Initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
  	document: "document.pdf"
	})
	.then(function(instance) {
		console.log("PSPDFKit loaded", instance);
	})
	.catch(function(error) {
		console.error(error.message);
	});
</script>

See the full index.html file below:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

    <script src="assets/pspdfkit.js"></script>

    <script>
      PSPDFKit.load({
        container: "#pspdfkit",
        document: "document.pdf",
      })
        .then(function(instance) {
          console.log("PSPDFKit loaded", instance);
        })
        .catch(function(error) {
          console.error(error.message);
        });
    </script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a Vanilla JavaScript Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

If you prefer a video tutorial, watch our step-by-step Getting Started with PSPDFKit video guide.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.4.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Integrating into Your Project

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

import "./assets/pspdfkit.js";

// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.
const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

PSPDFKit.load({
	baseUrl,
	container: "#pspdfkit",
	document: "document.pdf"
})
.then(instance => {
	console.log("PSPDFKit loaded", instance);
})
.catch(error => {
	console.error(error.message);
});
  1. Import index.js into your HTML page:

    <script type="module" src="index.js"></script>

See the full index.html file below:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

    <script type="module" src="index.js"></script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.4.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Integrating into Your Project

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

import "./assets/pspdfkit.js";

// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.
const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

PSPDFKit.load({
	baseUrl,
	container: "#pspdfkit",
	document: "document.pdf"
})
.then(instance => {
	console.log("PSPDFKit loaded", instance);
})
.catch(error => {
	console.error(error.message);
});
  1. Import index.js into your HTML page:

    <script type="module" src="index.js"></script>

See the full index.html file below:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

    <script type="module" src="index.js"></script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a React Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Creating a New Project

  1. Create a new React app using the Create React App tool:

yarn create react-app pspdfkit-react-example
npx create-react-app pspdfkit-react-example
  1. Change to the created project directory:

cd pspdfkit-react-example

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the src/components/ folder, create the PdfViewerComponent.js file with the following content. This adds a component wrapper for the PSPDFKit library:

import { useEffect, useRef } from "react";

export default function PdfViewerComponent(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current; // This `useRef` instance will render the PDF.

    let PSPDFKit, instance;
    
    (async function () {
      PSPDFKit = await import("pspdfkit")

		PSPDFKit.unload(container) // Ensure that there's only one PSPDFKit instance.

      instance = await PSPDFKit.load({
        // Container where PSPDFKit should be mounted.
        container,
        // The document to open.
        document: props.document, 
        // Use the public directory URL as a base URL. PSPDFKit will download its library assets from here.
        baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`
      });
    })();
    
    return () => PSPDFKit && PSPDFKit.unload(container)
  }, []);
  
  // This div element will render the document to the DOM.
  return <div ref={containerRef} style={{ width: "100%", height: "100vh" }} />
}
  1. In the src folder, replace the contents of the App.js file with the following. This includes the newly created component in your app:

import PdfViewerComponent from './components/PdfViewerComponent';

function App() {
	return (
		<div className="App">
			<div className="PDF-viewer">
			<PdfViewerComponent
				document={"document.pdf"}
			/>
			</div>
		</div>
	);
}

export default App;
  1. Your project structure should now look like this:

pspdfkit-react-example
├── public
│   ├── pspdfkit-lib
│   └── document.pdf
├── src
│   ├── components
│   |   └── PdfViewerComponent.js
|   └── App.js
├── package.json
└── yarn.lock
pspdfkit-react-example
├── public
│   ├── pspdfkit-lib
│   └── document.pdf
├── src
│   ├── components
│   |   └── PdfViewerComponent.js
|   └── App.js
├── package.json
└── package-lock.json
  1. Start the app and run it in your default browser:

yarn start
npm start

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Creating a New Project

  1. Create a new React app using the Create React App tool:

yarn create react-app pspdfkit-react-example
npx create-react-app pspdfkit-react-example
  1. Change to the created project directory:

cd pspdfkit-react-example

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the src/components/ folder, create the PdfViewerComponent.js file with the following content. This adds a component wrapper for the PSPDFKit library:

import { useEffect, useRef } from "react";

export default function PdfViewerComponent(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current; // This `useRef` instance will render the PDF.

    let PSPDFKit, instance;
    
    (async function () {
      PSPDFKit = await import("pspdfkit")

		PSPDFKit.unload(container) // Ensure that there's only one PSPDFKit instance.

      instance = await PSPDFKit.load({
        // Container where PSPDFKit should be mounted.
        container,
        // The document to open.
        document: props.document, 
        // Use the public directory URL as a base URL. PSPDFKit will download its library assets from here.
        baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`
      });
    })();
    
    return () => PSPDFKit && PSPDFKit.unload(container)
  }, []);
  
  // This div element will render the document to the DOM.
  return <div ref={containerRef} style={{ width: "100%", height: "100vh" }} />
}
  1. In the src folder, replace the contents of the App.js file with the following. This includes the newly created component in your app:

import PdfViewerComponent from './components/PdfViewerComponent';

function App() {
	return (
		<div className="App">
			<div className="PDF-viewer">
			<PdfViewerComponent
				document={"document.pdf"}
			/>
			</div>
		</div>
	);
}

export default App;
  1. Your project structure should now look like this:

pspdfkit-react-example
├── public
│   ├── pspdfkit-lib
│   └── document.pdf
├── src
│   ├── components
│   |   └── PdfViewerComponent.js
|   └── App.js
├── package.json
└── yarn.lock
pspdfkit-react-example
├── public
│   ├── pspdfkit-lib
│   └── document.pdf
├── src
│   ├── components
│   |   └── PdfViewerComponent.js
|   └── App.js
├── package.json
└── package-lock.json
  1. Start the app and run it in your default browser:

yarn start
npm start

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a React Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the src/components/ folder, create the PdfViewerComponent.js file with the following content. This adds a component wrapper for the PSPDFKit library:

import { useEffect, useRef } from "react";

export default function PdfViewerComponent(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current; // This `useRef` instance will render the PDF.

    let PSPDFKit, instance;
    
    (async function () {
      PSPDFKit = await import("pspdfkit")

		PSPDFKit.unload(container) // Ensure that there's only one PSPDFKit instance.

      instance = await PSPDFKit.load({
        // Container where PSPDFKit should be mounted.
        container,
        // The document to open.
        document: props.document, 
        // Use the public directory URL as a base URL. PSPDFKit will download its library assets from here.
        baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`
      });
    })();
    
    return () => PSPDFKit && PSPDFKit.unload(container)
  }, []);
  
  // This div element will render the document to the DOM.
  return <div ref={containerRef} style={{ width: "100%", height: "100vh" }} />
}
  1. In your app, add the following below the lines beginning with import. This includes the newly created component in your app:

import PdfViewerComponent from './components/PdfViewerComponent';

function DocumentViewerComponent() {
	return (
		<div className="PDF-viewer">
			<PdfViewerComponent
				document={"document.pdf"}
			/>
		</div>
	);
}
  1. Add the following to the rendering function in your app:

DocumentViewerComponent()
  1. Start the app and run it in your default browser:

yarn start
npm start

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the src/components/ folder, create the PdfViewerComponent.js file with the following content. This adds a component wrapper for the PSPDFKit library:

import { useEffect, useRef } from "react";

export default function PdfViewerComponent(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current; // This `useRef` instance will render the PDF.

    let PSPDFKit, instance;
    
    (async function () {
      PSPDFKit = await import("pspdfkit")

		PSPDFKit.unload(container) // Ensure that there's only one PSPDFKit instance.

      instance = await PSPDFKit.load({
        // Container where PSPDFKit should be mounted.
        container,
        // The document to open.
        document: props.document, 
        // Use the public directory URL as a base URL. PSPDFKit will download its library assets from here.
        baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`
      });
    })();
    
    return () => PSPDFKit && PSPDFKit.unload(container)
  }, []);
  
  // This div element will render the document to the DOM.
  return <div ref={containerRef} style={{ width: "100%", height: "100vh" }} />
}
  1. In your app, add the following below the lines beginning with import. This includes the newly created component in your app:

import PdfViewerComponent from './components/PdfViewerComponent';

function DocumentViewerComponent() {
	return (
		<div className="PDF-viewer">
			<PdfViewerComponent
				document={"document.pdf"}
			/>
		</div>
	);
}
  1. Add the following to the rendering function in your app:

DocumentViewerComponent()
  1. Start the app and run it in your default browser:

yarn start
npm start

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into an Angular Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Creating a New Project

  1. Install the Angular CLI:

yarn global add @angular/cli
npm install -g @angular/cli
  1. Create a new Angular application:

ng new my-app
  1. The Angular CLI will ask you information about the app configuration. Accept the defaults by repeatedly pressing the Enter key.

  2. Change to the created project directory:

cd my-app

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  2. In the angular.json file, add the following to the assets option:

"assets": [
	"src/assets",
+	{
+		"glob": "**/*",
+		"input": "./node_modules/pspdfkit/dist/pspdfkit-lib/",
+		"output": "./assets/pspdfkit-lib/"
+	}
]

Angular will now copy the PSPDFKit library assets to the assets directory before running your app.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the src/assets directory. You can use this demo document as an example.

  2. In the src/app/ folder, replace the contents of the app.component.html file with the following:

<div class="app">
	<!-- We'll mount the PSPDFKit UI to this element. -->
	<div id="pspdfkit-container" style="width: 100%; height: 100vh"></div>
</div>
  1. In the src/app/ folder, replace the contents of the app.component.ts file with the following:

import { Component } from "@angular/core";
import PSPDFKit from "pspdfkit";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["app.component.css"]
})
export class AppComponent {
	title = "PSPDFKit for Web Angular Example";

	ngAfterViewInit() {
		PSPDFKit.load({
			// Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
			baseUrl: location.protocol + "//" + location.host + "/assets/",
			document: "/assets/Document.pdf",
			container: "#pspdfkit-container",
		}).then(instance => {
			// For the sake of this demo, store the PSPDFKit for Web instance
			// on the global object so that you can open the dev tools and
			// play with the PSPDFKit API.
			(window as any).instance = instance;
		});
	}
}
  1. Start the app and open it in your default browser:

yarn start --open
npm start --open

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Creating a New Project

  1. Install the Angular CLI:

yarn global add @angular/cli
npm install -g @angular/cli
  1. Create a new Angular application:

ng new my-app
  1. The Angular CLI will ask you information about the app configuration. Accept the defaults by repeatedly pressing the Enter key.

  2. Change to the created project directory:

cd my-app

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  2. In the angular.json file, add the following to the assets option:

"assets": [
	"src/assets",
+	{
+		"glob": "**/*",
+		"input": "./node_modules/pspdfkit/dist/pspdfkit-lib/",
+		"output": "./assets/pspdfkit-lib/"
+	}
]

Angular will now copy the PSPDFKit library assets to the assets directory before running your app.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the src/assets directory. You can use this demo document as an example.

  2. In the src/app/ folder, replace the contents of the app.component.html file with the following:

<div class="app">
	<!-- We'll mount the PSPDFKit UI to this element. -->
	<div id="pspdfkit-container" style="width: 100%; height: 100vh"></div>
</div>
  1. In the src/app/ folder, replace the contents of the app.component.ts file with the following:

import { Component } from "@angular/core";
import PSPDFKit from "pspdfkit";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["app.component.css"]
})
export class AppComponent {
	title = "PSPDFKit for Web Angular Example";

	ngAfterViewInit() {
		PSPDFKit.load({
			// Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
			baseUrl: location.protocol + "//" + location.host + "/assets/",
			document: "/assets/Document.pdf",
			container: "#pspdfkit-container",
		}).then(instance => {
			// For the sake of this demo, store the PSPDFKit for Web instance
			// on the global object so that you can open the dev tools and
			// play with the PSPDFKit API.
			(window as any).instance = instance;
		});
	}
}
  1. Start the app and open it in your default browser:

yarn start --open
npm start --open

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into an Angular Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  2. In the angular.json file, add the following to the assets option:

"assets": [
	"src/assets",
+	{
+		"glob": "**/*",
+		"input": "./node_modules/pspdfkit/dist/pspdfkit-lib/",
+		"output": "./assets/pspdfkit-lib/"
+	}
]

Angular will now copy the PSPDFKit library assets to the assets directory before running your app.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the src/assets directory. You can use this demo document as an example.

  2. Generate a new PDF viewer component:

ng generate component pdf-viewer
  1. In the src/app/pdf-viewer folder, replace the contents of the pdf-viewer.component.html file with the following:

<div class="pdf-viewer">
	<div id="pspdfkit-container" style="width: 100%; height: 100vh"></div>
</div>
  1. In the src/app/pdf-viewer folder, replace the contents of the pdf-viewer.component.ts file with the following. This initializes PSPDFKit in the PDF viewer component:

import { Component, OnInit } from '@angular/core';
import PSPDFKit from 'pspdfkit';

@Component({
	selector: 'pdf-viewer',
	templateUrl: './pdf-viewer.component.html',
	styleUrls: ['./pdf-viewer.component.css']
})
export class PdfViewerComponent implements OnInit {
	ngOnInit(): void {
		PSPDFKit.load({
			// Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
			baseUrl: location.protocol + "//" + location.host + "/assets/",
			document: "/assets/document.pdf",
			container: "#pspdfkit-container",
		}).then(instance => {
			// For the sake of this demo, store the PSPDFKit for Web instance
			// on the global object so that you can open the dev tools and
			// play with the PSPDFKit API.
			(window as any).instance = instance;
		});
	}
}
  1. In the src/app/ folder, add the following to the app.component.html file in the place where you want to add the PDF viewer:

<pdf-viewer></pdf-viewer>
  1. Start the app and open it in your default browser:

yarn start --open
npm start --open

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  2. In the angular.json file, add the following to the assets option:

"assets": [
	"src/assets",
+	{
+		"glob": "**/*",
+		"input": "./node_modules/pspdfkit/dist/pspdfkit-lib/",
+		"output": "./assets/pspdfkit-lib/"
+	}
]

Angular will now copy the PSPDFKit library assets to the assets directory before running your app.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the src/assets directory. You can use this demo document as an example.

  2. Generate a new PDF viewer component:

ng generate component pdf-viewer
  1. In the src/app/pdf-viewer folder, replace the contents of the pdf-viewer.component.html file with the following:

<div class="pdf-viewer">
	<div id="pspdfkit-container" style="width: 100%; height: 100vh"></div>
</div>
  1. In the src/app/pdf-viewer folder, replace the contents of the pdf-viewer.component.ts file with the following. This initializes PSPDFKit in the PDF viewer component:

import { Component, OnInit } from '@angular/core';
import PSPDFKit from 'pspdfkit';

@Component({
	selector: 'pdf-viewer',
	templateUrl: './pdf-viewer.component.html',
	styleUrls: ['./pdf-viewer.component.css']
})
export class PdfViewerComponent implements OnInit {
	ngOnInit(): void {
		PSPDFKit.load({
			// Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
			baseUrl: location.protocol + "//" + location.host + "/assets/",
			document: "/assets/document.pdf",
			container: "#pspdfkit-container",
		}).then(instance => {
			// For the sake of this demo, store the PSPDFKit for Web instance
			// on the global object so that you can open the dev tools and
			// play with the PSPDFKit API.
			(window as any).instance = instance;
		});
	}
}
  1. In the src/app/ folder, add the following to the app.component.html file in the place where you want to add the PDF viewer:

<pdf-viewer></pdf-viewer>
  1. Start the app and open it in your default browser:

yarn start --open
npm start --open

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a Vue.js Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Installing the Vue.js CLI

First, install the Vue.js command-line tool for managing your Vue.js projects:

yarn global add @vue/cli
npm install -g @vue/cli

Creating the Project

  1. Create a new Vue.js app:

vue create my-app
  1. Select Default (Vue 3) ([Vue 3] babel, eslint) from the list.

Activity controller

  1. Select the package manager you want to use (Yarn is recommended).

  2. Change to the created project directory:

cd my-app

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Create a new directory under public called js:

mkdir -p public/js
  1. Copy the PSPDFKit for Web library assets to the public/js directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/js/pspdfkit-lib
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the src/components/ folder, create the PSPDFKitContainer.vue file with the following content. This adds a component wrapper for the PSPDFKit library:

<template>
  <div class="pdf-container"></div>
</template>

<script>
import PSPDFKit from "pspdfkit";

/**
 * PSPDFKit for Web example component.
 */
export default {
  name: 'PSPDFKit',
  /**
	 * The component receives `pdfFile` as a prop, which is type of `String` and is required.
	 */
  props: {
    pdfFile: {
      type: String,
      required: true,
    },
  },
  /**
	* We wait until the template has been rendered to load the document into the library.
	*/
  mounted() {
    this.loadPSPDFKit().then((instance) => {
      this.$emit("loaded", instance);
    });
  },
  /**
	 * We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
	 */
  watch: {
    pdfFile(val) {
      if (val) {
        this.loadPSPDFKit();
      }
    },
  },
  /**
	 * Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
	 */
  methods: {
    async loadPSPDFKit() {
      PSPDFKit.unload(".pdf-container");
      return PSPDFKit.load({
        // access the pdfFile from props
        document: this.pdfFile,
        container: ".pdf-container",
      });
    },
  },

  /**
	 * Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
	 */
  beforeUnmount() {
    PSPDFKit.unload(".pdf-container");
  },
};
</script>


<style scoped>
.pdf-container {
  height: 100vh;
}
</style>
  1. In the src folder, replace the contents of the App.vue file with the following. This includes the newly created component in your app:

<template>
  <div id="app">
    <label for="file-upload" class="custom-file-upload">
    Open PDF
    </label>
    <input id="file-upload" type="file" @change="openDocument" class="btn" />
    <PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
  </div>
</template>

<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";

export default {
  data() {
    return {
      pdfFile: this.pdfFile || "/document.pdf",
    };
  },
  /**
   * Render the `PSPDFKitContainer` component.
   */
  components: {
    PSPDFKitContainer,
  },
  /**
   * Our component has two methods — one to check when the document is loaded, and the other to open the document.
   */
  methods: {
    handleLoaded(instance) {
      console.log("PSPDFKit has loaded: ", instance);
      // Do something.
    },

    openDocument(event) {
      // To access the Vue.js instance data properties, use `this` keyword.
      if (this.pdfFile && this.pdfFile.startsWith('blob:')) {
        window.URL.revokeObjectURL(this.pdfFile);
      }
      this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

body {
  margin: 0;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background:#4A8FED;
    padding:10px;
    color:#fff;
    font:inherit;
    font-size: 16px;
    font-weight: bold;
}

</style>
  1. Start the app:

yarn serve
npm run serve
  1. Open http://localhost:8080/ in your browser to view the website.

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Installing the Vue.js CLI

First, install the Vue.js command-line tool for managing your Vue.js projects:

yarn global add @vue/cli
npm install -g @vue/cli

Creating the Project

  1. Create a new Vue.js app:

vue create my-app
  1. Select Default (Vue 3) ([Vue 3] babel, eslint) from the list.

Activity controller

  1. Select the package manager you want to use (Yarn is recommended).

  2. Change to the created project directory:

cd my-app

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Create a new directory under public called js:

mkdir -p public/js
  1. Copy the PSPDFKit for Web library assets to the public/js directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/js/pspdfkit-lib
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the src/components/ folder, create the PSPDFKitContainer.vue file with the following content. This adds a component wrapper for the PSPDFKit library:

<template>
  <div class="pdf-container"></div>
</template>

<script>
import PSPDFKit from "pspdfkit";

/**
 * PSPDFKit for Web example component.
 */
export default {
  name: 'PSPDFKit',
  /**
	 * The component receives `pdfFile` as a prop, which is type of `String` and is required.
	 */
  props: {
    pdfFile: {
      type: String,
      required: true,
    },
  },
  /**
	* We wait until the template has been rendered to load the document into the library.
	*/
  mounted() {
    this.loadPSPDFKit().then((instance) => {
      this.$emit("loaded", instance);
    });
  },
  /**
	 * We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
	 */
  watch: {
    pdfFile(val) {
      if (val) {
        this.loadPSPDFKit();
      }
    },
  },
  /**
	 * Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
	 */
  methods: {
    async loadPSPDFKit() {
      PSPDFKit.unload(".pdf-container");
      return PSPDFKit.load({
        // access the pdfFile from props
        document: this.pdfFile,
        container: ".pdf-container",
      });
    },
  },

  /**
	 * Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
	 */
  beforeUnmount() {
    PSPDFKit.unload(".pdf-container");
  },
};
</script>


<style scoped>
.pdf-container {
  height: 100vh;
}
</style>
  1. In the src folder, replace the contents of the App.vue file with the following. This includes the newly created component in your app:

<template>
  <div id="app">
    <label for="file-upload" class="custom-file-upload">
    Open PDF
    </label>
    <input id="file-upload" type="file" @change="openDocument" class="btn" />
    <PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
  </div>
</template>

<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";

export default {
  data() {
    return {
      pdfFile: this.pdfFile || "/document.pdf",
    };
  },
  /**
   * Render the `PSPDFKitContainer` component.
   */
  components: {
    PSPDFKitContainer,
  },
  /**
   * Our component has two methods — one to check when the document is loaded, and the other to open the document.
   */
  methods: {
    handleLoaded(instance) {
      console.log("PSPDFKit has loaded: ", instance);
      // Do something.
    },

    openDocument(event) {
      // To access the Vue.js instance data properties, use `this` keyword.
      if (this.pdfFile && this.pdfFile.startsWith('blob:')) {
        window.URL.revokeObjectURL(this.pdfFile);
      }
      this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

body {
  margin: 0;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background:#4A8FED;
    padding:10px;
    color:#fff;
    font:inherit;
    font-size: 16px;
    font-weight: bold;
}

</style>
  1. Start the app:

yarn serve
npm run serve
  1. Open http://localhost:8080/ in your browser to view the website.

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a Vue.js Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Create a new directory under public called js:

mkdir -p public/js
  1. Copy the PSPDFKit for Web library assets to the public/js directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/js/pspdfkit-lib
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the src/components/ folder, create the PSPDFKitContainer.vue file with the following content. This adds a component wrapper for the PSPDFKit library:

<template>
  <div class="pdf-container"></div>
</template>

<script>
import PSPDFKit from "pspdfkit";

/**
 * PSPDFKit for Web example component.
 */
export default {
  name: 'PSPDFKit',
  /**
	 * The component receives `pdfFile` as a prop, which is type of `String` and is required.
	 */
  props: {
    pdfFile: {
      type: String,
      required: true,
    },
  },
  /**
	* We wait until the template has been rendered to load the document into the library.
	*/
  mounted() {
    this.loadPSPDFKit().then((instance) => {
      this.$emit("loaded", instance);
    });
  },
  /**
	 * We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
	 */
  watch: {
    pdfFile(val) {
      if (val) {
        this.loadPSPDFKit();
      }
    },
  },
  /**
	 * Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
	 */
  methods: {
    async loadPSPDFKit() {
      PSPDFKit.unload(".pdf-container");
      return PSPDFKit.load({
        // access the pdfFile from props
        document: this.pdfFile,
        container: ".pdf-container",
      });
    },
  },

  /**
	 * Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
	 */
  beforeUnmount() {
    PSPDFKit.unload(".pdf-container");
  },
};
</script>


<style scoped>
.pdf-container {
  height: 100vh;
}
</style>
  1. In the src folder, add the newly created component to the App.vue file in the following way:

<template>
  <div id="app">
    <label for="file-upload" class="custom-file-upload">
    Open PDF
    </label>
    <input id="file-upload" type="file" @change="openDocument" class="btn" />
    <PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
  </div>
</template>

<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";

export default {
  data() {
    return {
      pdfFile: this.pdfFile || "/document.pdf",
    };
  },
  /**
   * Render the `PSPDFKitContainer` component.
   */
  components: {
    PSPDFKitContainer,
  },
  /**
   * Our component has two methods — one to check when the document is loaded, and the other to open the document.
   */
  methods: {
    handleLoaded(instance) {
      console.log("PSPDFKit has loaded: ", instance);
      // Do something.
    },

    openDocument(event) {
      // To access the Vue.js instance data properties, use `this` keyword.
      if (this.pdfFile && this.pdfFile.startsWith('blob:')) {
        window.URL.revokeObjectURL(this.pdfFile);
      }
      this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

body {
  margin: 0;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background:#4A8FED;
    padding:10px;
    color:#fff;
    font:inherit;
    font-size: 16px;
    font-weight: bold;
}

</style>
  1. Start the app:

yarn serve
npm run serve
  1. Open http://localhost:8080/ in your browser to view the website.

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Create a new directory under public called js:

mkdir -p public/js
  1. Copy the PSPDFKit for Web library assets to the public/js directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/js/pspdfkit-lib
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the src/components/ folder, create the PSPDFKitContainer.vue file with the following content. This adds a component wrapper for the PSPDFKit library:

<template>
  <div class="pdf-container"></div>
</template>

<script>
import PSPDFKit from "pspdfkit";

/**
 * PSPDFKit for Web example component.
 */
export default {
  name: 'PSPDFKit',
  /**
	 * The component receives `pdfFile` as a prop, which is type of `String` and is required.
	 */
  props: {
    pdfFile: {
      type: String,
      required: true,
    },
  },
  /**
	* We wait until the template has been rendered to load the document into the library.
	*/
  mounted() {
    this.loadPSPDFKit().then((instance) => {
      this.$emit("loaded", instance);
    });
  },
  /**
	 * We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
	 */
  watch: {
    pdfFile(val) {
      if (val) {
        this.loadPSPDFKit();
      }
    },
  },
  /**
	 * Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
	 */
  methods: {
    async loadPSPDFKit() {
      PSPDFKit.unload(".pdf-container");
      return PSPDFKit.load({
        // access the pdfFile from props
        document: this.pdfFile,
        container: ".pdf-container",
      });
    },
  },

  /**
	 * Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
	 */
  beforeUnmount() {
    PSPDFKit.unload(".pdf-container");
  },
};
</script>


<style scoped>
.pdf-container {
  height: 100vh;
}
</style>
  1. In the src folder, add the newly created component to the App.vue file in the following way:

<template>
  <div id="app">
    <label for="file-upload" class="custom-file-upload">
    Open PDF
    </label>
    <input id="file-upload" type="file" @change="openDocument" class="btn" />
    <PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
  </div>
</template>

<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";

export default {
  data() {
    return {
      pdfFile: this.pdfFile || "/document.pdf",
    };
  },
  /**
   * Render the `PSPDFKitContainer` component.
   */
  components: {
    PSPDFKitContainer,
  },
  /**
   * Our component has two methods — one to check when the document is loaded, and the other to open the document.
   */
  methods: {
    handleLoaded(instance) {
      console.log("PSPDFKit has loaded: ", instance);
      // Do something.
    },

    openDocument(event) {
      // To access the Vue.js instance data properties, use `this` keyword.
      if (this.pdfFile && this.pdfFile.startsWith('blob:')) {
        window.URL.revokeObjectURL(this.pdfFile);
      }
      this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

body {
  margin: 0;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background:#4A8FED;
    padding:10px;
    color:#fff;
    font:inherit;
    font-size: 16px;
    font-weight: bold;
}

</style>
  1. Start the app:

yarn serve
npm run serve
  1. Open http://localhost:8080/ in your browser to view the website.

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a Next.js Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Creating a New Project

  1. Create a new Next.js app using the create-next-app tool:

yarn create next-app pspdfkit-nextjs-example
npx create-next-app pspdfkit-nextjs-example
  1. During the setup process, Next.js will prompt you with a series of questions, allowing you to customize your project. One of the questions will ask if you want to use TypeScript. Respond with your preference (No or Yes) to set up your project accordingly.

  2. Change to the created project directory:

cd pspdfkit-nextjs-example

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. If you chose JavaScript during the setup of your project, add the following code to your app/page.js file:

'use client';
import { useEffect, useRef } from 'react';

export default function Home() {
	const containerRef = useRef(null);

	useEffect(() => {
		const container = containerRef.current;
	
		if (typeof window !== 'undefined') {
		  import('pspdfkit').then((PSPDFKit) => {
			if (PSPDFKit) {
			  PSPDFKit.unload(container);
			}
	
			PSPDFKit.load({
			  container,
			  document: '/document.pdf',
			  baseUrl: `${window.location.protocol}//${window.location.host}/`,
			});
		  });
		}
	  }, []);

	return <div ref={containerRef} style={{ height: '100vh' }} />;
}
  1. If you chose TypeScript during the setup of your project, add the following code to your app/page.tsx file:

"use client";
import { useEffect, useRef } from 'react';

const App: React.FC = () => {
  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const container = containerRef.current;

    if (container && typeof window !== 'undefined') {
      import('pspdfkit').then((PSPDFKit) => {
        if (PSPDFKit) {
          PSPDFKit.unload(container);
        }

        PSPDFKit.load({
          container,
          document: '/document.pdf',
          baseUrl: `${window.location.protocol}//${window.location.host}/`,
        });
      });
    }
  }, []);

  return <div ref={containerRef} style={{ height: '100vh' }} />;
};

export default App;
  1. Your project structure should now look like this:

pspdfkit-next-js-example
├── app
│   └── page.js
├── public
│   ├── document.pdf
│   └── pspdfkit-lib
└── next.config.js
  1. Start the app:

yarn dev
npm run dev
  1. Open http://localhost:3000 in your browser to view the website.

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Creating a New Project

  1. Create a new Next.js app using the create-next-app tool:

yarn create next-app pspdfkit-nextjs-example
npx create-next-app pspdfkit-nextjs-example
  1. During the setup process, Next.js will prompt you with a series of questions, allowing you to customize your project. One of the questions will ask if you want to use TypeScript. Respond with your preference (No or Yes) to set up your project accordingly.

  2. Change to the created project directory:

cd pspdfkit-nextjs-example

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. If you chose JavaScript during the setup of your project, add the following code to your app/page.js file:

'use client';
import { useEffect, useRef } from 'react';

export default function Home() {
	const containerRef = useRef(null);

	useEffect(() => {
		const container = containerRef.current;
	
		if (typeof window !== 'undefined') {
		  import('pspdfkit').then((PSPDFKit) => {
			if (PSPDFKit) {
			  PSPDFKit.unload(container);
			}
	
			PSPDFKit.load({
			  container,
			  document: '/document.pdf',
			  baseUrl: `${window.location.protocol}//${window.location.host}/`,
			});
		  });
		}
	  }, []);

	return <div ref={containerRef} style={{ height: '100vh' }} />;
}
  1. If you chose TypeScript during the setup of your project, add the following code to your app/page.tsx file:

"use client";
import { useEffect, useRef } from 'react';

const App: React.FC = () => {
  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const container = containerRef.current;

    if (container && typeof window !== 'undefined') {
      import('pspdfkit').then((PSPDFKit) => {
        if (PSPDFKit) {
          PSPDFKit.unload(container);
        }

        PSPDFKit.load({
          container,
          document: '/document.pdf',
          baseUrl: `${window.location.protocol}//${window.location.host}/`,
        });
      });
    }
  }, []);

  return <div ref={containerRef} style={{ height: '100vh' }} />;
};

export default App;
  1. Your project structure should now look like this:

pspdfkit-next-js-example
├── app
│   └── page.js
├── public
│   ├── document.pdf
│   └── pspdfkit-lib
└── next.config.js
  1. Start the app:

yarn dev
npm run dev
  1. Open http://localhost:3000 in your browser to view the website.

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a Next.js Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. If you chose JavaScript during the setup of your project, add the following code to your app/page.js file:

'use client';
import { useEffect, useRef } from 'react';

export default function Home() {
	const containerRef = useRef(null);

	useEffect(() => {
		const container = containerRef.current;
	
		if (typeof window !== 'undefined') {
		  import('pspdfkit').then((PSPDFKit) => {
			if (PSPDFKit) {
			  PSPDFKit.unload(container);
			}
	
			PSPDFKit.load({
			  container,
			  document: '/document.pdf',
			  baseUrl: `${window.location.protocol}//${window.location.host}/`,
			});
		  });
		}
	  }, []);

	return <div ref={containerRef} style={{ height: '100vh' }} />;
}
  1. If you chose TypeScript during the setup of your project, add the following code to your app/page.tsx file:

"use client";
import { useEffect, useRef } from 'react';

const App: React.FC = () => {
  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const container = containerRef.current;

    if (container && typeof window !== 'undefined') {
      import('pspdfkit').then((PSPDFKit) => {
        if (PSPDFKit) {
          PSPDFKit.unload(container);
        }

        PSPDFKit.load({
          container,
          document: '/document.pdf',
          baseUrl: `${window.location.protocol}//${window.location.host}/`,
        });
      });
    }
  }, []);

  return <div ref={containerRef} style={{ height: '100vh' }} />;
};

export default App;
  1. Start the app:

yarn dev
npm run dev
  1. Open http://localhost:3000 in your browser to view the website.

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. If you chose JavaScript during the setup of your project, add the following code to your app/page.js file:

'use client';
import { useEffect, useRef } from 'react';

export default function Home() {
	const containerRef = useRef(null);

	useEffect(() => {
		const container = containerRef.current;
	
		if (typeof window !== 'undefined') {
		  import('pspdfkit').then((PSPDFKit) => {
			if (PSPDFKit) {
			  PSPDFKit.unload(container);
			}
	
			PSPDFKit.load({
			  container,
			  document: '/document.pdf',
			  baseUrl: `${window.location.protocol}//${window.location.host}/`,
			});
		  });
		}
	  }, []);

	return <div ref={containerRef} style={{ height: '100vh' }} />;
}
  1. If you chose TypeScript during the setup of your project, add the following code to your app/page.tsx file:

"use client";
import { useEffect, useRef } from 'react';

const App: React.FC = () => {
  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const container = containerRef.current;

    if (container && typeof window !== 'undefined') {
      import('pspdfkit').then((PSPDFKit) => {
        if (PSPDFKit) {
          PSPDFKit.unload(container);
        }

        PSPDFKit.load({
          container,
          document: '/document.pdf',
          baseUrl: `${window.location.protocol}//${window.location.host}/`,
        });
      });
    }
  }, []);

  return <div ref={containerRef} style={{ height: '100vh' }} />;
};

export default App;
  1. Start the app:

yarn dev
npm run dev
  1. Open http://localhost:3000 in your browser to view the website.

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a TypeScript Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Run the following command to install TypeScript globally:

npm install -g typescript

Creating a New Project

  1. Run the following command to initialize a new npm workspace in an empty directory:

yarn init -y
npm init -y
  1. In the root folder of your application, create a tsconfig.json file with the following content:

{
	"compilerOptions": {
		"removeComments": true,
		"preserveConstEnums": true,
		"module": "commonjs",
		"target": "es5",
		"sourceMap": true,
		"noImplicitAny": true,
		"esModuleInterop": true
	},
	"include": ["src/**/*"]
}

Adding PSPDFKit and Configuring webpack

  1. PSPDFKit for TypeScript is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:

yarn add pspdfkit
npm install pspdfkit
  1. Run the following command to install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:

npm i -D webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin cross-env copy-webpack-plugin clean-webpack-plugin

mkdir config && touch config/webpack.js
  1. In the config folder, add the following code to the webpack.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const filesToCopy = [
	// PSPDFKit files.
	{
		from: './node_modules/pspdfkit/dist/pspdfkit-lib',
		to: './pspdfkit-lib',
	},
	// Application CSS.
	{
		from: './src/index.css',
		to: './index.css',
	},
	// Example PDF.
	{
		from: './assets/document.pdf', 
		to: './document.pdf', 
	},
];

/**
 * webpack main configuration object.
 */
const config = {
	entry: path.resolve(__dirname, '../src/index.ts'),
	mode: 'development',
	devtool: 'inline-source-map',
	output: {
		path: path.resolve(__dirname, '../dist'),
		filename: '[name].js',
	},
	resolve: {
		extensions: ['.ts', '.tsx', '.js'],
	},
	module: {
		rules: [
			// All files with a `.ts` or `.tsx` extension will be handled by `ts-loader`.
			{
				test: /\.tsx?$/,
				loader: 'ts-loader',
				exclude: /node_modules/,
			},
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
		}),

		// Copy the WASM/ASM and CSS files to the `output.path`.
		new CopyWebpackPlugin({ patterns: filesToCopy }),
	],

	optimization: {
		splitChunks: {
			cacheGroups: {
				// Creates a `vendor.js` bundle that contains external libraries (including `pspdfkit.js`).
				vendor: {
					test: /node_modules/,
					chunks: 'initial',
					name: 'vendor',
					priority: 10,
					enforce: true,
				},
			},
		},
	},
};

module.exports = config;

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the assets directory. You can use this demo document as an example.

  2. In the src folder, create an index.html file with the following content. This adds an empty <div> element where PSPDFKit is loaded:

<!DOCTYPE html>
<html>
	<head>
		<title>PSPDFKit for Web — TypeScript example</title>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<div class="container"></div>
	</body>
</html>
  1. In the src folder, create an index.css file with the following content. This declares the height of the PSPDFKit element:

.container {
	height: 100vh;
}
  1. In the src folder, create an index.ts file with the following content:

import PSPDFKit from 'pspdfkit';

function load(document: string) {
	console.log(`Loading ${document}...`);
	PSPDFKit.load({
		document,
		container: '.container',
	})
		.then((instance) => {
			console.log('PSPDFKit loaded', instance);
		})
		.catch(console.error);
}

load('document.pdf'); // Pass your PDF file.
  1. Your project structure should now look like this:

pspdfkit-typescript-example
├── assets
│   └── document.pdf
├── config
│   └── webpack.js
├── src 
│   ├── index.css
│   ├── index.html
│   └── index.ts
├── package-lock.json
├── package.json
└── tsconfig.json

Running the Project

  1. Run the following command to install the serve package:

yarn global add serve
npm install --global serve
  1. Add the following to the scripts section of the package.json file:

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.js",
    "prestart": "npm run build",
    "dev": "tsc",
    "start": "serve -l 8080 ./dist"
},
  1. Run the following command to start the project:

yarn start
npm start
  1. Open http://localhost:8080 in your browser to view the website.

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Run the following command to install TypeScript globally:

npm install -g typescript

Creating a New Project

  1. Run the following command to initialize a new npm workspace in an empty directory:

yarn init -y
npm init -y
  1. In the root folder of your application, create a tsconfig.json file with the following content:

{
	"compilerOptions": {
		"removeComments": true,
		"preserveConstEnums": true,
		"module": "commonjs",
		"target": "es5",
		"sourceMap": true,
		"noImplicitAny": true,
		"esModuleInterop": true
	},
	"include": ["src/**/*"]
}

Adding PSPDFKit and Configuring webpack

  1. PSPDFKit for TypeScript is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:

yarn add pspdfkit
npm install pspdfkit
  1. Run the following command to install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:

npm i -D webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin cross-env copy-webpack-plugin clean-webpack-plugin

mkdir config && touch config/webpack.js
  1. In the config folder, add the following code to the webpack.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const filesToCopy = [
	// PSPDFKit files.
	{
		from: './node_modules/pspdfkit/dist/pspdfkit-lib',
		to: './pspdfkit-lib',
	},
	// Application CSS.
	{
		from: './src/index.css',
		to: './index.css',
	},
	// Example PDF.
	{
		from: './assets/document.pdf', 
		to: './document.pdf', 
	},
];

/**
 * webpack main configuration object.
 */
const config = {
	entry: path.resolve(__dirname, '../src/index.ts'),
	mode: 'development',
	devtool: 'inline-source-map',
	output: {
		path: path.resolve(__dirname, '../dist'),
		filename: '[name].js',
	},
	resolve: {
		extensions: ['.ts', '.tsx', '.js'],
	},
	module: {
		rules: [
			// All files with a `.ts` or `.tsx` extension will be handled by `ts-loader`.
			{
				test: /\.tsx?$/,
				loader: 'ts-loader',
				exclude: /node_modules/,
			},
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
		}),

		// Copy the WASM/ASM and CSS files to the `output.path`.
		new CopyWebpackPlugin({ patterns: filesToCopy }),
	],

	optimization: {
		splitChunks: {
			cacheGroups: {
				// Creates a `vendor.js` bundle that contains external libraries (including `pspdfkit.js`).
				vendor: {
					test: /node_modules/,
					chunks: 'initial',
					name: 'vendor',
					priority: 10,
					enforce: true,
				},
			},
		},
	},
};

module.exports = config;

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the assets directory. You can use this demo document as an example.

  2. In the src folder, create an index.html file with the following content. This adds an empty <div> element where PSPDFKit is loaded:

<!DOCTYPE html>
<html>
	<head>
		<title>PSPDFKit for Web — TypeScript example</title>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<div class="container"></div>
	</body>
</html>
  1. In the src folder, create an index.css file with the following content. This declares the height of the PSPDFKit element:

.container {
	height: 100vh;
}
  1. In the src folder, create an index.ts file with the following content:

import PSPDFKit from 'pspdfkit';

function load(document: string) {
	console.log(`Loading ${document}...`);
	PSPDFKit.load({
		document,
		container: '.container',
	})
		.then((instance) => {
			console.log('PSPDFKit loaded', instance);
		})
		.catch(console.error);
}

load('document.pdf'); // Pass your PDF file.
  1. Your project structure should now look like this:

pspdfkit-typescript-example
├── assets
│   └── document.pdf
├── config
│   └── webpack.js
├── src 
│   ├── index.css
│   ├── index.html
│   └── index.ts
├── package-lock.json
├── package.json
└── tsconfig.json

Running the Project

  1. Run the following command to install the serve package:

yarn global add serve
npm install --global serve
  1. Add the following to the scripts section of the package.json file:

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.js",
    "prestart": "npm run build",
    "dev": "tsc",
    "start": "serve -l 8080 ./dist"
},
  1. Run the following command to start the project:

yarn start
npm start
  1. Open http://localhost:8080 in your browser to view the website.

Setting Up Document Engine

To set up Document Engine so that it’ll be the backend for PSPDFKit for Web, follow the instructions in the Getting Started with Document Engine guide.

Once Document Engine has been set up, you’ll need to update your code to open a document from Document Engine. This is accomplished by replacing properties included in the configuration object passed to PSPDFKit.load(). Refer to the code snippets located earlier in this guide to find where PSPDFKit.load() will need to be updated.

The document property in PSPDFKit.load() will be replaced with the documentId provided by Document Engine, while the authPayload and the serverUrl properties will be added. If you’d like to enable Instant synchronization, set the instant property to true. See the following example:

PSPDFKit.load({
+  container: "#pspdfkit",
+  documentId: "[DOCUMENT ID FROM DOCUMENT ENGINE]",
+  serverUrl: "[DOCUMENT ENGINE URL]",
+  authPayload: { jwt: "[JWT]" },
+  instant: true
})

Integrate into a TypeScript Project

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.

Select the preferred products

The Web SDK uses the Standalone operational mode, where our JavaScript library renders and edits documents directly in the browser. It’s powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access.

A serverless solution has the following advantages:

  • Get up and running faster — No servers need to be deployed or maintained.

  • Lower infrastructure costs — Rendering and processing are offloaded to the client.

  • Security and privacy — Documents don’t need to be transferred across a network.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit and Configuring webpack

  1. PSPDFKit for TypeScript is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:

yarn add pspdfkit
npm install pspdfkit
  1. Run the following command to install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:

npm i -D webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin cross-env copy-webpack-plugin clean-webpack-plugin

mkdir config && touch config/webpack.js
  1. In the config folder, add the following code to the webpack.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const filesToCopy = [
	// PSPDFKit files.
	{
		from: './node_modules/pspdfkit/dist/pspdfkit-lib',
		to: './pspdfkit-lib',
	},
	// Application CSS.
	{
		from: './src/index.css',
		to: './index.css',
	},
	// Example PDF.
	{
		from: './assets/document.pdf', 
		to: './document.pdf', 
	},
];

/**
 * webpack main configuration object.
 */
const config = {
	entry: path.resolve(__dirname, '../src/index.ts'),
	mode: 'development',
	devtool: 'inline-source-map',
	output: {
		path: path.resolve(__dirname, '../dist'),
		filename: '[name].js',
	},
	resolve: {
		extensions: ['.ts', '.tsx', '.js'],
	},
	module: {
		rules: [
			// All files with a `.ts` or `.tsx` extension will be handled by `ts-loader`.
			{
				test: /\.tsx?$/,
				loader: 'ts-loader',
				exclude: /node_modules/,
			},
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
		}),

		// Copy the WASM/ASM and CSS files to the `output.path`.
		new CopyWebpackPlugin({ patterns: filesToCopy }),
	],

	optimization: {
		splitChunks: {
			cacheGroups: {
				// Creates a `vendor.js` bundle that contains external libraries (including `pspdfkit.js`).
				vendor: {
					test: /node_modules/,
					chunks: 'initial',
					name: 'vendor',
					priority: 10,
					enforce: true,
				},
			},
		},
	},
};

module.exports = config;

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the assets directory. You can use this demo document as an example.

  2. In the src folder, create an index.html file with the following content. This adds an empty <div> element where PSPDFKit is loaded:

<!DOCTYPE html>
<html>
	<head>
		<title>PSPDFKit for Web — TypeScript example</title>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<div class="container"></div>
	</body>
</html>
  1. In the src folder, create an index.css file with the following content. This declares the height of the PSPDFKit element:

.container {
	height: 100vh;
}
  1. In the src folder, create an index.ts file with the following content:

import PSPDFKit from 'pspdfkit';

function load(document: string) {
	console.log(`Loading ${document}...`);
	PSPDFKit.load({
		document,
		container: '.container',
	})
		.then((instance) => {
			console.log('PSPDFKit loaded', instance);
		})
		.catch(console.error);
}

load('document.pdf'); // Pass your PDF file.

Running the Project

  1. Run the following command to install the serve package:

yarn global add serve
npm install --global serve
  1. Add the following to the scripts section of the package.json file:

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.js",
    "prestart": "npm run build",
    "dev": "tsc",
    "start": "serve -l 8080 ./dist"
},
  1. Run the following command to start the project:

yarn start
npm start
  1. Open http://localhost:8080 in your browser to view the website.

Next Steps

When the Web SDK is combined with Document Engine, it uses the Server-Backed operational mode, where rendering is handled by the server and documents are streamed down to the web viewer. It’s delivered as a Docker container, but it can also be managed by PSPDFKit infrastructure.

Web Server-Backed has the following advantages:

  • Faster performance — Leveraging both client-side viewing and server-side rendering, it ensures swift performance, enhancing user interactions. This results in a lighter end user experience by shifting operations from the browser to the backend.

  • Seamless syncing — Annotations and form field values synchronize across servers and sessions without additional configuration, streamlining collaborative workflows.

  • Security and privacy — Designed with privacy and security in mind, it offers a resilient infrastructure to protect sensitive data.

  • High-performance capabilities — Developers can harness advanced features like OCR (web) and Instant Collaboration (web, mobile), empowering real-time collaborative document management.

  • Scalability — Its scalable architecture caters to evolving needs, providing a reliable foundation for projects of all sizes.

  • Headless processing — Supports headless document processing, enabling automated tasks such as batch conversion and manipulation without the need for a graphical user interface, thus enhancing efficiency and integration capabilities.

Compare operational modes.

Information

PSPDFKit for Web can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Adding PSPDFKit and Configuring webpack

  1. PSPDFKit for TypeScript is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:

yarn add pspdfkit
npm install pspdfkit
  1. Run the following command to install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:

npm i -D webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin cross-env copy-webpack-plugin clean-webpack-plugin

mkdir config && touch config/webpack.js
  1. In the config folder, add the following code to the webpack.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWeb