Build a Svelte PDF viewer with Apryse WebViewer SDK

This guide shows how to build a Svelte PDF viewer using the Apryse WebViewer SDK. You'll learn how to integrate the SDK into a Svelte application to render, view, and interact with PDF documents using the WebViewer UI.

You can also download a ready-to-use GitHub sample to get started quickly, or explore the interactive Showcase demo to see WebViewer's full capabilities in action.

This guide assumes basic familiarity with Svelte development. Before you start:

• Install Node.js and npm. See the Svelte documentation for version details.
• Install Visual Studio Code or another code editor to develop and debug your code.
• Get your Apryse trial key.

In this section, you’ll create a new Svelte application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have a Svelte app, skip this and continue to Install WebViewer.

1. In your terminal, go to the directory where you want to create the project.
2. Create a new webviewer-svelte project using a minimal setup:

1npx --yes sv create webviewer-svelte --template minimal --no-types --no-add-ons --install npm

3. Navigate to your new Svelte project directory and install dependencies:

1cd webviewer-svelte
2npm install

Next, install the Apryse WebViewer SDK using npm. This command adds the WebViewer package to your project, allowing you to integrate the PDF viewer and editor into your Svelte application.

After navigating to your webviewer-svelte project directory, run the following command to install WebViewer:

1npm i @pdftron/webviewer

WebViewer needs access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. In a Svelte project, you must copy these assets into the static directory so they can be served correctly. For more, see Copying WebViewer static assets.

1. From your project root, create the static/lib/webviewer directory if it doesn't already exist:

1npx --yes shx mkdir -p static/lib/webviewer 

2. Copy all WebViewer static assets from node_modules/@pdftron/webviewer/public into the new static/lib/webviewer directory:

1npx --yes cpy-cli "node_modules/@pdftron/webviewer/public/**/*" static/lib/webviewer

Your project should now include a similar structure:

1webviewer-svelte/
2├── .svelte-kit/
3├── .vscode/
4├── node_modules/
5├── src/
6├── static/
7│   ├── lib/
8│   │   └── webviewer/
9│   │       ├── core/
10│   │       └── ui/
11│   └── robots.txt
12└── .gitignore
13└── ...

In this section, you'll add WebViewer to your Svelte app by creating a component and initializing the viewer. This mounts the WebViewer UI and loads a document in your application.

1. Create a WebViewer.svelte file in the src folder of your project:

1npx --yes shx touch src/WebViewer.svelte

2. In Visual Studio Code, add this code to the WebViewer.svelte file and save:

1<script>
2  import { onMount } from 'svelte';
3  
4  // Reference DOM element that will host WebViewer
5  let viewer;
6
7  // Run WebViewer setup once component is mounted in DOM
8  onMount(() => {
9      // Load WebViewer dynamically to avoid build/SSR issues
10	    import('@pdftron/webviewer').then((module) => {
11	
12      // Normalize export to handle CommonJS ↔ ESM interop
13      // (required for Vite 8 and other strict ESM bundlers)
14      const WebViewer = module.default?.default || module.default;
15
16      // Initialize WebViewer instance
17      WebViewer({
18          // Path to WebViewer library assets
19          path: '/lib/webviewer',
20          // Replace with your Apryse license key
21          licenseKey: 'YOUR_LICENSE_KEY',
22          // Initial document to load into viewer
23          initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
24      }, viewer,
25      ).then((instance) => {
26	       // WebViewer APIs are available via the instance
27	       });
28	    });
29	});
30</script>
31
32<style>
33#viewer {
34  /* Fill viewport with the viewer */
35  width: 100%;
36  height: 100vh;
37  margin: 0 auto;
38}
39</style>
40
41<!-- Container element bound to viewer variable -->
42<div id="viewer" bind:this={viewer}></div>

3. Replace the contents of the src/routes/+page.svelte file with the following and save:

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

You can now load and display a PDF document in the WebViewer UI. Run your Svelte application to launch WebViewer and see the PDF in your browser.

1. From your project directory, run the following command to start the application:

1npm run dev

A successful output looks similar to:

1> webviewer-svelte@0.0.1 dev
2> vite dev
3
411:31:01 AM [vite] (client) Forced re-optimization of dependencies
5
6  VITE v8.0.16  ready in 740 ms
7
8  ➜  Local:   http://localhost:5173/
9  ➜  Network: use --host to expose
10  ➜  press h + enter to show help

2. Open the localhost URL from your terminal to view the WebViewer UI and PDF document.

In this 4-minute video, learn how to install and integrate the Apryse WebViewer SDK into a Svelte project using TypeScript. You’ll set up the PDF viewer and explore the DOCX Editor.