Svelte PDF Viewer

Produced by EmbedPDF

A Production-Ready, Open-Source PDF Viewer for Svelte Applications

EmbedPDF's Svelte PDF Viewer is an open-source, MIT-licensed library that brings high-fidelity PDF rendering to Svelte and SvelteKit applications. Built on PDFium compiled to WebAssembly, it delivers the same rendering quality developers expect from Chrome's built-in PDF viewer, directly inside their Svelte apps.

The library ships under two complementary packages, giving teams the flexibility to choose between speed of integration and depth of customization.

Two Ways to Integrate

Option 1: The Drop-in Viewer

The @embedpdf/svelte-pdf-viewer package provides a complete, production-ready PDF viewing experience out of the box. It includes a polished toolbar, a sidebar with page thumbnails, and all the features end users expect: zoom, search, printing, text selection, and more. Integration takes just a few lines of code:

<script lang="ts">
  import { PDFViewer } from '@embedpdf/svelte-pdf-viewer';
</script>

<div style="height: 100vh;">
  <PDFViewer
    config={{
      src: 'https://snippet.embedpdf.com/ebook.pdf',
      theme: { preference: 'light' }
    }}
    style="width: 100%; height: 100%;"
  />
</div>

The Drop-in Viewer is responsive across mobile and desktop, supports light and dark themes (including automatic system preference detection), and offers deep color customization, from accent colors and surface backgrounds to semantic states like error and success. Teams can selectively disable UI categories such as annotations, printing, or document export without writing custom components.

This option is ideal for teams who need a standard PDF viewer, similar to Acrobat or Chrome's viewer, and want to minimize development time.

Option 2: Headless Components

For teams that need complete control over every pixel, the headless library provides the rendering engine, a core provider, and individual plugins, but leaves all styling and layout decisions to you. Developers bring their own UI (buttons, toolbars, layout, and CSS) while the library handles the complex PDF internals.

The headless approach follows a composable, plugin-based architecture. First, the PDFium WebAssembly engine is initialized via @embedpdf/engines. Then, plugins are registered through @embedpdf/core and composed together using Svelte components exported by each plugin package. Developers install only the plugins they need, resulting in minimal bundle sizes and full tree-shaking support.

Here is a minimal but fully working headless example:

<script lang="ts">
  import { usePdfiumEngine } from '@embedpdf/engines/svelte';
  import { EmbedPDF } from '@embedpdf/core/svelte';
  import { createPluginRegistration } from '@embedpdf/core';

  // Import the essential plugins and their Svelte components
  import { ViewportPluginPackage, Viewport } from '@embedpdf/plugin-viewport/svelte';
  import { ScrollPluginPackage, Scroller, type RenderPageProps } from '@embedpdf/plugin-scroll/svelte';
  import { DocumentManagerPluginPackage, DocumentContent } from '@embedpdf/plugin-document-manager/svelte';
  import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/svelte';

  // 1. Initialize the PDFium WASM engine
  const pdfEngine = usePdfiumEngine();

  // 2. Register the plugins you need
  const plugins = [
    createPluginRegistration(DocumentManagerPluginPackage, {
      initialDocuments: [{ url: 'https://snippet.embedpdf.com/ebook.pdf' }],
    }),
    createPluginRegistration(ViewportPluginPackage),
    createPluginRegistration(ScrollPluginPackage),
    createPluginRegistration(RenderPluginPackage),
  ];
</script>

{#if pdfEngine.engine}
  <!-- 3. Wrap your UI with the EmbedPDF provider -->
  <EmbedPDF engine={pdfEngine.engine} {plugins}>
    {#snippet children({ activeDocumentId })}
      {#if activeDocumentId}
        <DocumentContent documentId={activeDocumentId}>
          {#snippet children(documentContent)}
            {#if documentContent.isLoaded}
              {#snippet renderPage(page: RenderPageProps)}
                <div style:width="{page.width}px" style:height="{page.height}px" style:position="relative">
                  <RenderLayer documentId={activeDocumentId} pageIndex={page.pageIndex} />
                </div>
              {/snippet}
              <Viewport documentId={activeDocumentId} class="h-full">
                <Scroller documentId={activeDocumentId} {renderPage} />
              </Viewport>
            {/if}
          {/snippet}
        </DocumentContent>
      {/if}
    {/snippet}
  </EmbedPDF>
{/if}

As the example shows, the headless approach gives you full control over every layer of the UI. The EmbedPDF provider manages the engine and plugin lifecycle, while components like Viewport, Scroller, DocumentContent, and RenderLayer handle the rendering pipeline. You can add additional plugins (zoom, pan, annotations, search, and many more) by registering them and composing their corresponding Svelte components into your layout.

Each plugin also exposes reactive Svelte stores that follow a consistent pattern, making it straightforward to build custom toolbars and controls that stay in sync with the viewer state.

This option is best suited for teams building specialized viewing experiences: document review workflows, split-pane layouts, or applications that need PDF features deeply integrated into an existing design system.

Feature Overview

Rendering and Performance

The viewer uses PDFium via WebAssembly for pixel-perfect PDF rendering. Pages are virtualized, meaning only visible pages are rendered, which allows the library to handle documents with over a thousand pages without degrading performance. For large documents or high zoom levels, an optional Tiling Plugin breaks each page into a grid of smaller tiles, significantly reducing memory usage and keeping the UI responsive. Web Worker support enables non-blocking rendering on a separate thread.

Annotations

The annotation system supports a wide range of annotation types: highlights, underlines, strikeouts, squiggly marks, ink (freehand drawing), shapes (rectangles, circles, lines, arrows, polygons, and polylines), free text boxes, and stamps. Annotations can be created interactively through built-in tools or programmatically via the API. The system includes undo/redo history, auto-commit options, and event hooks for creation, updates, and deletion, making it suitable for collaborative review workflows.

Redaction

True PDF redaction is supported with content permanently removed when redactions are committed. Users can mark redactions by selecting text regions or drawing area marquees. The library supports both a legacy internal mode and an annotation-based mode using standard PDF REDACT annotations, which enables multi-user review workflows where redactions can be proposed, reviewed, and then committed.

Text Selection and Search

Natural text selection is built in, with support for copying to clipboard and programmatic access to selected content including bounding box coordinates. The Search Plugin provides in-document text search with result highlighting and navigation between matches.

Multi-Document Support

The viewer supports multiple documents simultaneously through a tab interface, with each document maintaining independent state for zoom level, scroll position, rotation, and annotations. The View Manager Plugin extends this further with multi-view layouts, enabling split-screen and tab-group configurations.

Export and Printing

Modified PDFs, including annotations and committed redactions, can be downloaded or saved programmatically for server-side storage via the saveAsCopy() API. The Print Plugin produces high-quality output with options for page ranges and annotation inclusion. An Area Capture Plugin allows users to select regions and export them as images.

Internationalization

Built-in support for multiple locales is included out of the box: English, Dutch, German, French, Spanish, and Simplified Chinese. Custom translations can be added, and the i18n system supports parameter interpolation for dynamic strings.

PDF Security and Permissions

The library respects PDF document permissions including print, copy, modify contents, modify annotations, fill forms, extract for accessibility, and assemble document. Permissions can be enforced globally, overridden per-document, or disabled entirely depending on the application's requirements. Password-protected documents with AES-256 and RC4 encryption are supported.

CJK and RTL Font Support

Dedicated font packages are available for Arabic, Hebrew, Japanese, Korean, Simplified Chinese, Traditional Chinese, and Latin scripts, ensuring correct rendering of documents in any language.

Architecture and Extensibility

Under the hood, the library follows a plugin-based architecture. Over 25 individual plugins cover rendering, navigation, interaction, annotation, export, and UI concerns. Each plugin can be used independently, and the system is designed to be extended. Developers can register custom commands with keyboard shortcuts, modify the toolbar schema, or build entirely new interaction tools on top of the provided primitives.

The consistent store-based API means that every plugin exposes its state reactively. Whether checking if a user can print, reading the current zoom level, or listening for annotation changes, the pattern is always the same, making the learning curve gentle even as applications grow in complexity.

Open Source and Community

EmbedPDF's Svelte PDF Viewer is fully open source under the MIT license (with PDFium under Apache 2.0). The source code is available on GitHub at https://github.com/embedpdf/embed-pdf-viewer.

Getting Started

Install the Drop-in Viewer:

npm install @embedpdf/svelte-pdf-viewer

Or start with the headless library:

npm install @embedpdf/engines @embedpdf/core @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-render @embedpdf/plugin-document-manager

Full documentation is available at https://www.embedpdf.com/svelte-pdf-viewer, including interactive examples, plugin references, and guides for both integration approaches.

Check out this product on the member website

---

API / SDK Windows MacOS Linux Android iOS Open source No-cost

---

PDF 1.7 (ISO 32000-1:2008)

---

View / render Print Add, review & markup annotations Redaction AES-256 (PDF 2.0)