How to build a Svelte PDF viewer

Hulya Masharipov

Updated: July 16, 2025

This article will walk you through implementing a Svelte PDF viewer using Nutrient Web SDK. Whether you’re building a document management system, a collaborative platform, or a simple PDF viewer, Nutrient’s powerful features and seamless Svelte integration make it an excellent choice. It’ll also explore performance considerations and tips for optimizing Svelte PDF rendering.

Summary

In this tutorial, you’ll integrate Nutrient Web SDK into a Svelte application by loading its global NutrientViewer object (via CDN or npm). It’ll cover project setup, usage of a lightweight wrapper component, performance optimizations, and cleanup best practices.

Svelte(opens in a new tab) is a component framework similar to React.js and Vue.js. What makes Svelte different from other frameworks is that it’s a compiler that takes declarative code and turns it into imperative JavaScript. With Svelte, you’ll write less code, and your code will be more performant. It doesn’t use a virtual DOM on every state change like React does, and it’s about 30 percent faster than other frameworks.

What is a Svelte PDF viewer?

A Svelte PDF viewer renders PDF documents directly in the browser with zero server‑side rendering, no downloads required, and a small footprint—perfect for lightweight document apps.

Why choose Nutrient for your Svelte PDF viewer?

Nutrient Web SDK for Svelte lets you drop a full‑featured, high‑performance PDF viewer into any Svelte app with just a few lines of code. At its heart is the global NutrientViewer API (loaded via CDN or npm), which handles everything — from simple page rendering, all the way up to annotations, form support, digital signatures, redaction, and real‑time collaboration.

Key highlights:

Framework‑agnostic entry point Load the SDK once (e.g. via a <script> tag or npm), and then call window.NutrientViewer.load({ container, document }) inside any Svelte component’s onMount.
Built‑in features
- ✔️ Annotations (highlight, underline, comments)
- ✔️ PDF form filling and field editing
- ✔️ Legally binding electronic signatures
- ✔️ Redaction tools
- ✔️ Real‑time collaboration and instant synchronization
- ✔️ Office documents and image support (JPEG, PNG, TIFF)
Polished, extendable UI Out of the box, you get a production‑ready viewer that you can theme or pare back via CSS variables.
Performance‑first Lazy‑load only on the route where it’s needed, and call NutrientViewer.unload(container) in your Svelte cleanup to free memory.

Example of our Svelte PDF viewer

To demo our Svelte PDF viewer, upload a PDF, JPG, PNG, or TIFF file by clicking Open Document under the Standalone option (if you don’t see this option, select Choose Example from the dropdown). Once your document is displayed in the viewer, try drawing freehand, adding a note, or applying a crop or an eSignature.

Requirements to get started

Node.js(opens in a new tab) (v16+ recommended)
npm(opens in a new tab), Yarn(opens in a new tab), or pnpm(opens in a new tab)
A Svelte tooling setup (e.g. SvelteKit or degit sveltejs/template + Rollup/Vite)

1. Project setup

Scaffold your Svelte app (if you don’t already have one):

npx degit sveltejs/template my-svelte-pdf
cd my-svelte-pdf
npm install

This gives you a bare‑bones Svelte project using Rollup.

2. Loading the NutrientViewer SDK

Open public/index.html and add the SDK script before your bundle:

<body>
  <!-- Load NutrientViewer from Nutrient’s CDN -->
  <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.0.0/nutrient-viewer.js"></script>
</body>

Once loaded, you’ll have access to:

window.NutrientViewer; // the global SDK entrypoint

3. Create your PDF viewer component

Replace src/App.svelte with:

<script>
  import { onMount } from 'svelte';

  // Will be bound to our <div> below.
  let container = null;

  onMount(() => {
    const { NutrientViewer } = window;
    if (!container || !NutrientViewer) return;

    // Load your PDF (static file or external URL).
    NutrientViewer.load({
      container,
      document: '/example.pdf',
    });

    // Clean up when this component unmounts.
    return () => {
      NutrientViewer.unload(container);
    };
  });
</script>

<div bind:this={container} class="pdf-container" />

<style>
  /* Make the viewer fill the viewport */
  .pdf-container {
    width: 100%;
    height: 100vh;
  }
</style>

How it works

onMount runs once the component is in the DOM.
You grab window.NutrientViewer (the global SDK object loaded from CDN).
If both the container element and the SDK are present, you call .load({ container, document }) to render the PDF.
You return a cleanup callback to .unload(container), ensuring you free memory if the user navigates away.

4. Run and verify

npm run dev

Open http://localhost:5000 (or whatever port Rollup reports) and you should see /example.pdf rendered in your Svelte app.

nutrient demo

You can find the example on GitHub(opens in a new tab).

Performance considerations for Svelte PDF rendering

When building a Svelte PDF viewer, performance is critical, especially when handling large documents. Here are some strategies to optimize your application:

Lazy loading — Load PDF documents only when they’re needed to reduce initial load time.
Efficient memory management — Destroy unused instances of the PDF viewer to free up memory.
Handling large files — Use chunked loading or server-side rendering to handle large PDFs without compromising performance.
Caching — Cache frequently accessed documents to improve load times for returning users.

Conclusion

Building a Svelte PDF viewer with Nutrient is a straightforward process that unlocks powerful document management capabilities. By following the steps outlined in this post, you can integrate Nutrient into your Svelte application, optimize performance, and deliver a seamless user experience. Whether you’re working on a small project or a large-scale application, Nutrient’s feature-rich SDK is the perfect solution for all your PDF needs.

You can also integrate our PDF viewer using web frameworks like Angular, Vue.js, and React.js. To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.

FAQ

Can I import NutrientViewer via npm instead of using the CDN?

Yes. Install the SDK with npm install @nutrient-sdk/viewer, copy its dist assets into your static/directory (or serve them from a CDN), and import types if you’re using TypeScript.

How do I handle multiple PDF documents on one page?

Create separate container elements for each viewer instance. Call NutrientViewer.load({ container, document }) on each, and keep track of each instance so you can unload them independently when they’re no longer needed.

Does NutrientViewer support mobile browsers?

Yes. NutrientViewer is responsive and compatible with modern mobile browsers. Just ensure each container has sufficient width and height set via CSS, and the SDK will handle touch interactions and layout adjustments.

How can I customize the viewer toolbar and UI?

You can override CSS variables provided by the SDK to change colors, spacing, and visibility of UI elements. For advanced theming, use the SDK’s theming hooks or configuration options to show or hide specific toolbar buttons.