How to integrate WebViewer into a Svelte project

This guide will show you how to integrate WebViewer Document Viewer & Editor into a Svelte application.

You can also download a ready-to-go sample on GitHub.

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

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

To get our project set up, we will use SvelteKit. Start by setting up the project with the following command, replacing <project-name> with your desired project name.

1npx sv create <project-name>

You may be asked if you want to install the sv package - in this case, enter "y".

When asked which template you want to use, select SvelteKit minimal. For the rest of the questions, you may select anything you wish - your choices will not impact the rest of this guide.

Once the project has been set up, we can navigate into our project directory.

1cd <project-name>

We can now install WebViewer by running:

1npm i @pdftron/webviewer

In addition to installing WebViewer, we will need to set up a script to copy the static WebViewer dependencies into statically served folder in your project (in Svelte it's the static folder). The reason for this is because WebViewer contains many assets that cannot be bundled by the build system. Instead, these assets need to be served statically.

In package.json we will add a command that copies these static assets to our static folder. You'll also notice that we run this new command before any of the Svelte tools to ensure the files are always in the proper place when running our app.

1{
2  "scripts": {
3		"dev": "npm run copy-webviewer && vite dev",
4		"build": "npm run copy-webviewer && vite build",
5		"copy-webviewer": "mkdir -p ./static/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./static/lib/webviewer"
6  }
7}

Read more about copying WebViewer static assets.

Now we are ready to start using WebViewer.

Create a file called WebViewer.svelte and add the following code. This will be our WebViewer component that we use elsewhere in our app.

1<script>
2  import { onMount } from 'svelte';
3
4	onMount(async () => {
5    import("@pdftron/webviewer").then(({default: WebViewer}) => {
6      const ele = document.getElementById('viewer');
7      WebViewer({
8        path: '/lib/webviewer',
9        licenseKey: 'YOUR_LICENSE_KEY',
10        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
11      }, ele).then(instance => {
12        // Use APIs here
13      })
14    })
15  });
16
17</script>
18
19<style>
20	#viewer {
21		width: 100%;
22    height: 100vh;
23	}
24</style>
25
26<div id='viewer'>
27
28</div>

Now we can implement this component elsewhere.

1<script>
2	import WebViewer from '../WebViewer.svelte';
3</script>
4
5<WebViewer />

Now we can start our app with npm run dev - you should see WebViewer loaded with the default document displayed.