Build a Vite PDF viewer with Apryse WebViewer SDK

This guide shows how to build a Vite PDF viewer using the Apryse WebViewer SDK. You’ll learn how to integrate the SDK into React, Vanilla, Vue, or Svelte applications to render, view, and interact with PDF documents in the WebViewer UI.

For more, explore the interactive Showcase demo to see WebViewer's full capabilities in action.

Prerequisites

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

• Install Node.js and npm. See the Vite 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 Vite project

In this section, you’ll create a new Vite application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have a React 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-vite project using a minimal setup:

React

npm create vite@latest webviewer-vite -- --template react

Vanilla

npm create vite@latest webviewer-vite -- --template vanilla

Vue

npm create vite@latest webviewer-vite -- --template vue

Svelte

npm create vite@latest webviewer-vite -- --template svelte

Info

Flags are used to skip prompts during project configuration. These flags determine which framework is used and select JavaScript as the variant. Select different options if preferred.

1. If prompted to install with npm and start now, select No.

2. Navigate to your new Vite project directory and install dependencies:

Shell

cd webviewer-vite
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 Vite application.

After navigating to your webviewer-vite 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 Vite project, you must copy these assets into the public directory so they can be served correctly. We'll use a Vite plugin to copy WebViewer's static assets into the public folder. For more, see Copying WebViewer static assets.

1. From your project directory, run the following to install the vite-plugin-static-copy package:

Shell

npm i -D vite-plugin-static-copy

1. In Visual Studio Code, update the vite.config.js file to import the viteStaticCopy plugin and save. If you don't see a vite.config.js file in your project, create one at the project root and add the necessary configuration:

React

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteStaticCopy } from 'vite-plugin-static-copy';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@pdftron/webviewer/public/**/*',
          dest: 'lib/webviewer',
          rename: { stripBase: 4 },
        },
      ],
    }),
  ],
});

Vanilla

vite.config.js

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@pdftron/webviewer/public/**/*',
          dest: 'lib/webviewer',
          rename: { stripBase: 4 },
        },
      ],
    }),
  ],
});

Vue

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteStaticCopy } from 'vite-plugin-static-copy';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@pdftron/webviewer/public/*/**',
          dest: 'lib/webviewer',
          rename: { stripBase: 4 },
        },
      ],
    }),
  ],
});

Svelte

vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { viteStaticCopy } from 'vite-plugin-static-copy';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@pdftron/webviewer/public/**/*',
          dest: 'lib/webviewer',
          rename: { stripBase: 4 },
        },
      ],
    }),
  ],
});

Info

Your vite.config.js file may look slightly different depending on the framework you’re using. The key requirement is to add the viteStaticCopy plugin to the plugins array. Make sure to import the plugin correctly:

JavaScript

import { viteStaticCopy } from 'vite-plugin-static-copy';

4. Create the PDF viewer

Next, instantiate the Apryse WebViewer SDK and mount it in your Vite project. This involves creating a container for the viewer and initializing WebViewer so it loads correctly at runtime.

React

1. In Visual Studio Code, replace the contents of the src/App.jsx file with the following and save:

import { useEffect, useRef } from 'react';
import WebViewer from '@pdftron/webviewer';

function App() {
  // Create reference to DOM element where WebViewer will mount
  const viewerRef = useRef(null);

  useEffect(() => {
    // Initialize WebViewer once when component mounts
    WebViewer(
      {
        // Path to copied WebViewer static assets
        path: 'lib/webviewer',
        // Replace with your Apryse license key
        licenseKey: 'YOUR_LICENSE_KEY',
        // Initial document to load when WebViewer starts (optional)
        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
      },
      // Attach WebViewer to container element
      viewerRef.current
    ).then((instance) => {
      // Access WebViewer instance here if needed
      // const { UI, Core } = instance;
    });
  // Empty dependency array ensures this runs only once  
  }, []);
  return (
    // Container element for WebViewer
    <div
	    ref={viewerRef}
	    style={{ height: '100vh', width: '100%', margin: '0 auto' }}
	  />
  );
}

export default App;

Info

If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.

1. Replace the contents of the src/main.jsx file with the following and save:

src/main.jsx

import { StrictMode } from 'react'; 
import { createRoot } from 'react-dom/client';

import App from './App.jsx';

createRoot(document.getElementById('root')).render( 
    <App /> 
);

Info

In React 18 and later, useEffect may run twice in development when Strict Mode is enabled (which Vite uses by default). This can cause WebViewer to initialize twice and to display a duplicate instance. This behavior is expected and doesn't affect production builds.

For this example, you can avoid duplicate initialization by removing the StrictMode wrapper in src/main.jsx. However, note that Strict Mode helps identify issues like memory leaks, so removing it isn't recommended for production or more complex applications.

Vanilla

1. In Visual Studio Code, replace the contents of the src/main.js file with the following and save:

import WebViewer from '@pdftron/webviewer';
import './style.css';

// Initialize WebViewer and mount it to a DOM element
WebViewer(
  {
    // Path to the WebViewer static assets
    path: 'lib/webviewer',
    // Replace with your Apryse license key
    licenseKey: 'YOUR_LICENSE_KEY',
    // Initial document to load when WebViewer starts
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  },
  // The container element where WebViewer will be injected
  document.getElementById('app')
).then((instance) => {
  // This callback runs once WebViewer has fully initialized

  // The 'instance' gives access to:
  // - Core APIs (documentViewer, annotationManager, etc.)
  // - UI customization APIs
  // - Methods for loading documents, handling events, and more

  // Example:
  // const { documentViewer } = instance.Core;
});

Info

If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.

1. Replace the src/style.css with the following and save:

src/style.css

.webviewer {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

Vue

1. In Visual Studio Code, replace the contents of the src/components/HelloWorld.vue file with the following and save:

<template>
  <!-- Container element where WebViewer will be mounted -->
  <div ref="viewer" style="height: 100vh; width: 100%; margin: 0 auto;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import WebViewer from '@pdftron/webviewer';

// Define component props
const props = defineProps({
  initialDoc: String,
});

// Reference to DOM element used as the WebViewer mount point
const viewer = ref(null);

/**
 * Initialize WebViewer once the component is mounted
 * and the DOM element is available
 */
onMounted(() => {
  WebViewer(
    { 
      // Public path where the WebViewer lib assets are served
      path: '/lib/webviewer',
      // Document to load initially (passed in from App.vue)
      initialDoc: props.initialDoc,
      // Replace with your Apryse license key
      licenseKey: 'YOUR_LICENSE_KEY'
    },
    viewer.value,
  );
});
</script>

Info

If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.

1. Replace the contents of the src/App.vue file with the following and save:

src/App.vue

<script setup>
import WebViewer from './components/HelloWorld.vue'
</script>

<template>
  <WebViewer
    initialDoc="https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf"
  />
</template>

Svelte

1. In Visual Studio Code, create a src/lib/WebViewer.svelte file, add the following code to it, and save:

<script>
  // @ts-nocheck
  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.

1. Replace the contents of the src/App.svelte file with the following and save:

src/App.svelte

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

<WebViewer />

5. Verify your output

You can now load and display a PDF document in the WebViewer UI. Run your React 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-vite@0.0.0 dev
> vite


  VITE v8.0.16  ready in 920 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
[vite-plugin-static-copy] Collected 817 items.

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

Clean up CSS

If you created your project using Vite’s scaffolding tool, the default CSS files included with the template can interfere with WebViewer’s layout. If the viewer doesn't appear or renders incorrectly, remove or clear the styles from any default CSS files (such as style.css or index.css).

---

Get started video

In this 4-minute video, learn the fundamentals of Apryse WebViewer, including key concepts for installation and initialization in any web application.

Overview of Apryse WebViewer fundamentals, including installation and initialization.

Next steps

UsageGuidesSamplesAPI docs