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.

Prerequisites

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.

1. Create a Svelte project

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:

Shell

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

Info

Flags are used to skip prompts during project configuration. The setup uses a SvelteKit minimal template, excludes type checking, omits project add-ons, and defaults to npm as the package manager. Select different options if preferred.

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

Shell

cd webviewer-svelte
npm install

2. Install WebViewer

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:

Shell

npm i @pdftron/webviewer

3. Copy WebViewer assets

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:

Shell

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

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

Shell

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

Your project should now include a similar structure:

webviewer-svelte/
├── .svelte-kit/
├── .vscode/
├── node_modules/
├── src/
├── static/
│   ├── lib/
│   │   └── webviewer/
│   │       ├── core/
│   │       └── ui/
│   └── robots.txt
└── .gitignore
└── ...

Info

The path option used when initializing WebViewer must point to this directory (for example, /lib/webviewer). If the path is incorrect, WebViewer will fail to load.

4. Create the PDF viewer

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:

Shell

npx --yes shx touch src/WebViewer.svelte

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

<script>
  import { onMount } from 'svelte';
  
  // Reference DOM element that will host WebViewer
  let viewer;

  // Run WebViewer setup once component is mounted in DOM
  onMount(() => {
    // Load WebViewer dynamically to avoid build/SSR issues
	  import("@pdftron/webviewer").then(({default: WebViewer}) => {

      // Initialize WebViewer instance
      WebViewer({
        // Path to WebViewer library assets
        path: '/lib/webviewer',
        // Replace with your Apryse license key
        licenseKey: 'YOUR_LICENSE_KEY',
        // Initial document to load into viewer
        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
        }, viewer,
      ).then((instance) => {
	        // WebViewer APIs are available via the instance
	    });
	  });
  });
</script>

<style>
#viewer {
  /* Fill viewport with the viewer */
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}
</style>

<!-- Container element bound to viewer variable -->
<div id="viewer" bind:this={viewer}></div>

Info

• If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.
• SvelteKit manages its Vite version internally. Recent versions use Vite 8, which requires a small configuration change when using WebViewer. For more, see Using WebViewer with Vite 8.
• In this example, WebViewer is imported dynamically to avoid running it during server‑side rendering. If your app doesn't use server‑side rendering, you can import WebViewer statically at the top of the file instead.

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

Svelte

src/routes/+page.svelte

<script>
	import WebViewer from '../WebViewer.svelte';
</script>

<WebViewer />

5. Verify your output

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:

Shell

npm run dev

A successful output looks similar to:

Shell

> webviewer-svelte@0.0.1 dev
> vite dev

11:31:01 AM [vite] (client) Forced re-optimization of dependencies

  VITE v8.0.16  ready in 740 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

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

Get started video

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.

Integrate WebViewer in a Svelte project with PDF editing and DOCX Editor.

Next steps

UsageGuidesSamplesAPI docs