Zoom

The PDFViewer comes with a built-in zoom toolbar, but you can also control zoom behavior through configuration and the plugin API.

Configuration

You can set the default zoom level and limits in the config prop.


<script lang="ts">
  import { PDFViewer, ZoomMode } from '@embedpdf/svelte-pdf-viewer';
</script>
 
<PDFViewer
  config={{
    zoom: {
      defaultZoomLevel: ZoomMode.FitPage, // or a number like 1.5
      minZoom: 0.5,
      maxZoom: 3.0
    }
  }}
/>

Available Zoom Modes

The ZoomMode enum provides standard presets:

Mode	Description
`ZoomMode.Automatic`	Tries to find the best fit for the screen.
`ZoomMode.FitPage`	Fits the entire page within the view.
`ZoomMode.FitWidth`	Fits the page width to the view width.

Programmatic Control

You can control the zoom level from outside the viewer using the plugin registry. This is useful for building custom toolbars or resetting the view based on external events.

Accessing the API


<script lang="ts">
  import { PDFViewer, ZoomMode, type PluginRegistry, type ZoomPlugin } from '@embedpdf/svelte-pdf-viewer';
 
  let registry = $state<PluginRegistry | null>(null);
 
  const handleReady = (r: PluginRegistry) => {
    registry = r;
  };
 
  const zoomIn = () => {
    const zoomPlugin = registry?.getPlugin<ZoomPlugin>('zoom')?.provides();
    const docZoom = zoomPlugin?.forDocument('my-document-id');
    docZoom?.zoomIn();
  };
 
  const zoomOut = () => {
    const zoomPlugin = registry?.getPlugin<ZoomPlugin>('zoom')?.provides();
    const docZoom = zoomPlugin?.forDocument('my-document-id');
    docZoom?.zoomOut();
  };
 
  const fitWidth = () => {
    const zoomPlugin = registry?.getPlugin<ZoomPlugin>('zoom')?.provides();
    const docZoom = zoomPlugin?.forDocument('my-document-id');
    docZoom?.requestZoom(ZoomMode.FitWidth);
  };
</script>
 
<PDFViewer onready={handleReady} config={{ src: '/doc.pdf' }} />

Listening to Zoom Changes

You can listen for zoom changes using the event system.


<script lang="ts">
  import { PDFViewer, type PluginRegistry } from '@embedpdf/svelte-pdf-viewer';
 
  const handleReady = (registry: PluginRegistry) => {
    const zoomPlugin = registry.getPlugin('zoom')?.provides();
    const docZoom = zoomPlugin?.forDocument('my-document-id');
 
    // Subscribe to state changes
    docZoom?.onStateChange((state) => {
      console.log('Current Zoom:', state.currentZoomLevel);
    });
  };
</script>
 
<PDFViewer onready={handleReady} config={{ src: '/doc.pdf' }} />