Get Started with the Apryse WebViewer SDK in a Project Powered by Vite

The WebViewer SDK base package is robust, allowing you to do the following with PDFs inside your app:

• View
• Annotate
• Flatten
• Extract
• Search
• Build forms
• Calculate using measurements
• Support layers
• Customize the UI
• Meet global accessibility standards through the UI

You can also take advantage of our add-on packages for further capabilities.

Adding WebViewer to your application allows users to use PDFs without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

This guide walks you through how to integrate the WebViewer SDK into a application powered by Vite. By the end, you'll be able to render a PDF document in the UI.

Before you start:

• Install Node and npm to use as your run-time environment and package manager.
• Open a text editor like Visual Studio Code.
• Get your Apryse trial key.

This video teaches you the fundamentals of installing and initializing the Apryse WebViewer SDK in any web application. If you wish, you may skip this section and proceed to the steps below.

First, you'll create your project.

1. On the command line, cd to where you want your new project to sit.

2. Run the following on the command line to use the Vite CLI to generate a project:

1npm create vite@latest

3. Next, complete the following tasks from the command line during project creation:

a. Change the default Project name to a project name of your choice.

b. Select either React, Vanilla, Vue, or Svelte as your framework if you want to use our ready-made code samples later in this tutorial. You can, of course, select any framework and write your own code.

c. Select Javascript for your variant.

Options you must select during Vite project setup.

Enter the following on the command line to navigate into your new project, replacing <project-name> with the name you chose:

1cd <project-name>

Run the following command on the command line from within your project directory to install Vite dependencies:

1npm install

Next, you'll integrate WebViewer into your project.

Run the following command on the command line, from your project directory:

1npm i @pdftron/webviewer

Next, you'll use a Vite plugin to copy WebViewer's static assets into a public folder in the project.

Run the following command on the command line within your project directory:

1npm i -D vite-plugin-static-copy

You'll use this dependency no matter what framework you're using.

WebViewer comes with many static assets that can't be bundled directly by Vite. Instead, these static assets need to be served from the filesystem.

To do this, you'll copy these static WebViewer assets into the public folder created by Vite using the vite-plugin-static-copy plugin you installed earlier.

From your text editor, in the vite.config file, you'll add viteStaticCopy plugin to the plugins array like this (select the framework you're using from the tabs below since the code is framework specific):

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react'
3import { viteStaticCopy } from 'vite-plugin-static-copy'
4
5// https://vite.dev/config/
6export default defineConfig({
7  plugins: [react(), viteStaticCopy({
8    targets: [
9      {
10        src: 'node_modules/@pdftron/webviewer/public/*',
11        dest: 'lib/webviewer'
12      }
13    ]
14  })],
15})

1import { defineConfig } from 'vite'
2import { viteStaticCopy } from 'vite-plugin-static-copy'
3
4// https://vite.dev/config/
5export default defineConfig({
6  plugins: [viteStaticCopy({
7    targets: [
8      {
9        src: 'node_modules/@pdftron/webviewer/public/*',
10        dest: 'lib/webviewer'
11      }
12    ]
13  })],
14})

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import { viteStaticCopy } from 'vite-plugin-static-copy'
4
5// https://vite.dev/config/
6export default defineConfig({
7  plugins: [vue(), viteStaticCopy({
8    targets: [
9      {
10        src: 'node_modules/@pdftron/webviewer/public/*',
11        dest: 'lib/webviewer'
12      }
13    ]
14  })],
15})
16

1import { defineConfig } from 'vite'
2import {svelte} from '@sveltejs/vite-plugin-svelte'
3import { viteStaticCopy } from 'vite-plugin-static-copy'
4
5// https://vite.dev/config/
6export default defineConfig({
7  plugins: [svelte(), viteStaticCopy({
8    targets: [
9      {
10        src: 'node_modules/@pdftron/webviewer/public/*',
11        dest: 'lib/webviewer'
12      }
13    ]
14  })],
15})

Your config file might look slightly different, depending on what framework you're using. What's important is that you're adding the viteStaticCopy plugin to the plugins array.

1import { defineConfig } from 'vite'
2import { viteStaticCopy } from 'vite-plugin-static-copy'
3
4// https://vite.dev/config/
5export default defineConfig({
6  plugins: [viteStaticCopy({
7    targets: [
8      {
9        src: 'node_modules/@pdftron/webviewer/public/*',
10        dest: 'lib/webviewer'
11      }
12    ]
13  })],
14})
15

Now, all of the configuration is done and you're ready to start using WebViewer.

Initialization varies depending on your framework, but, in general, the process is:

1. Import WebViewer.

2. Create a DOM element to mount WebViewer to.

3. Call the WebViewer constructor and provide the DOM element you want to mount it to and the path to your static WebViewer assets you copied in the previous step.

Below are some code samples of what this would look like in a few frameworks. Select the framework you need from the tabs below, then, from your text editor, add the code to the corresponding file.

ReactVanillaVueSvelte

JavaScript

App.jsx

1import { useRef, useEffect } from 'react';
2import WebViewer from '@pdftron/webviewer';
3
4import './App.css';
5
6function App() {
7  const viewer = useRef(null);
8
9  useEffect(() => {
10    WebViewer(
11      {
12        path: 'lib/webviewer',
13        licenseKey: 'demo:1753377545348:618e38b40300000000e13942a8dd6e3489c602466c4fb74d9ed12d0902',
14        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
15      },
16      viewer.current
17    ).then((instance) => {
18      // You can access the WebViewer instance here if needed
19    });
20  }, []);
21
22  return (
23    <div className="webviewer" ref={viewer}></div>
24  );
25}
26
27export default App;

Report Invalid Code

Copy

JavaScript

App.css

1body {
2place-items: center;
3}
4 
5.webviewer{
6height: 80vh;
7width: 80vw;
8}

Report Invalid Code

Copy

If you were to run WebViewer in the browser now for your React project, a second WebViewer instance would display. This isn’t an issue with WebViewer. It's caused by recent versions of React. Prior to React v18, a useEffect with an empty dependency array would fire just a single time when the page loaded, and this was used to construct WebViewer.

However, since React v18, if StrictMode is specified (and Vite does so by default), then the useEffect fires a second time in Development builds. This isn’t an issue with Production builds though – so it’s an artificial problem.

A simple way to solve the problem in a Development build is to remove the StrictMode tags. We'll do that for this simple proof of concept.

Delete the StrictMode tags from the src/main.jsx file. Your file should look like this after the deletion:

The main.jsx file after you've deleted the StrictMode tags

Removing StrictMode isn’t ideal. It was implemented as a way to find memory leaks. That might not be a problem in a proof of concept like this, but you would definitely care about in a more complex project. Read more about common workarounds.

JavaScript

main.js

1import WebViewer from '@pdftron/webviewer'
2import './style.css'
3
4WebViewer({
5  path: '/lib/webviewer',
6  licenseKey: 'YOUR_LICENSE_KEY',
7  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
8}, document.getElementById('app'))
9 .then(instance => {
10
11 })

Report Invalid Code

Copy

JavaScript

components/HelloWorld.vue

1<template>
2  <div id="webviewer" ref="viewer"></div>
3</template>
4
5<script>
6import { ref, onMounted } from 'vue';
7import WebViewer from '@pdftron/webviewer';
8
9export default {
10  name: 'WebViewer',
11  props: { initialDoc: { type: String } },
12  setup(props) {
13    const viewer = ref(null);
14    onMounted(() => {
15      WebViewer({ 
16        path: '/lib/webviewer', 
17        licenseKey: 'YOUR LICENSE KEY',
18        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
19      }, viewer.value).then(
20        (instance) => {
21          
22        }
23      );
24    });
25    return {
26      viewer,
27    };
28  },
29};
30</script>
31
32<style>
33#webviewer {
34  height: 100vh;
35}
36</style>

Report Invalid Code

Copy

JavaScript

lib/App.svelte

1<script>
2  import { onMount } from 'svelte';
3  import WebViewer from '@pdftron/webviewer';
4
5	onMount(async () => {
6		const ele = document.getElementById('viewer');
7	  WebViewer({
8      path: '/lib/webviewer',
9      licenseKey: 'YOUR LICENSE KEY',
10      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
11      
12		}, ele).then(instance => {
13			
14		})
15	});
16</script>
17
18<style>
19	#viewer {
20		width: 100%;
21	}
22</style>
23
24<div id='viewer' style="height: 100vh;">
25
26</div>

Report Invalid Code

Copy

JavaScript

App.svelte

1<script lang="ts">
2  import WebViewer from './lib/WebViewer.svelte'
3</script>
4
5<WebViewer />

Report Invalid Code

Copy

After you've saved all of the files, you'll serve the webpage so you can see the WebViewer UI and the PDF you included to open in WebViewer.

1. Run the following command on the command line from your project directory to run the project.

1npm run dev

2. Click the localhost link created in your terminal to view the WebViewer UI and PDF file locally.