Understanding Plugins

Plugins are the heart of EmbedPDF’s headless architecture. They are modular packages that add specific features and capabilities to your core viewer. This à la carte approach ensures your application remains lean, loading only the functionality you actually need.

Think of the <EmbedPDF> component as a smartphone: it’s powerful on its own, but it’s the apps (plugins) you install that give it new features like navigation, social media, or games.

Example: Adding a Zoom Feature

Let’s walk through a complete example of adding a zoom feature to a basic viewer.

1. Install the Plugin Package

First, install the zoom plugin package:


npm install @embedpdf/plugin-zoom


pnpm add @embedpdf/plugin-zoom


yarn add @embedpdf/plugin-zoom


bun add @embedpdf/plugin-zoom

2. Register the Plugin

Next, import ZoomPluginPackage and add it to the plugins array that you pass to the <EmbedPDF> component. This activates the zoom functionality.


<script lang="ts">
// ... other imports
import { createPluginRegistration } from '@embedpdf/core';
import { ZoomPluginPackage } from '@embedpdf/plugin-zoom/svelte';
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Add the zoom plugin to the array
  createPluginRegistration(ZoomPluginPackage),
];
</script>

3. Create a UI Component with the Plugin’s Store

With the plugin registered, you can create a new component that uses the useZoom store to access reactive state and functions.

ZoomToolbar.svelte


<script lang="ts">
import { useZoom } from '@embedpdf/plugin-zoom/svelte';
 
// The function returns a readable Svelte store
const zoom = useZoom();
</script>
 
{#if zoom.provides}
  <div style="padding: 8px; background: #eee; display: flex; gap: 8px; align-items: center;">
    <span>Zoom: {Math.round(zoom.state.currentZoomLevel * 100)}%</span>
    <button onclick={() => zoom.provides.zoomOut()}>-</button>
    <button onclick={() => zoom.provides.zoomIn()}>+</button>
    <button onclick={() => zoom.provides.requestZoom(1.0)}>Reset</button>
  </div>
{/if}

4. Add the Component to Your Viewer

Finally, import and place your new <ZoomToolbar /> component inside the <EmbedPDF> provider. This is essential, as it allows the useZoom store to access the context provided by the ZoomPluginPackage.

PDFViewer.svelte


<script lang="ts">
import { EmbedPDF } from '@embedpdf/core/svelte';
import ZoomToolbar from './ZoomToolbar.svelte'; // 1. Import the toolbar
// ... other setup
</script>
 
<div style="height: 500px; border: 1px solid black; display: flex; flex-direction: column;">
  <EmbedPDF engine={pdfEngine.engine} {plugins}>
    <ZoomToolbar />     
    <div style="flex: 1; overflow: hidden; position: relative;">
      <Viewport>
        {/* ... Scroller and RenderLayer ... */}
      </Viewport>
    </div>
  </EmbedPDF>
</div>