svelte-pdf-view

A modern, modular PDF viewer component for Svelte 5. Built on top of PDF.js , with full TypeScript support and Shadow DOM isolation.

Features

• PDF Rendering: High-quality PDF rendering powered by PDF.js.
• Text Search: Full-text search with highlight navigation.
• Rotation: Rotate pages clockwise/counter-clockwise.
• Zoom: Zoom in/out controls.
• Responsive: Works on desktop and mobile.
• Customizable: Style the scrollbar, background, and more.
• Modular: Use the default layout or build your own toolbar.
• Shadow DOM: Renderer styles are isolated and won't leak.
• Multiple Sources: Load from URL, ArrayBuffer, Uint8Array, or Blob.

Components

The library provides three main components for building a PDF viewer:

• <PdfViewer>: The main container component that provides context for toolbar and renderer. It accepts the PDF source (src) and manages the viewer state.
• <PdfToolbar>: The default toolbar with page navigation, zoom, rotation, and search controls. It automatically connects to the viewer context.
• <PdfRenderer>: The PDF rendering component that uses Shadow DOM for style isolation. It accepts styling props for background, scrollbar, and page shadows.

Custom Toolbar & Context API

You can create a custom toolbar using the provided context API. The getPdfViewerContext() function returns state and actions objects.

• state: Contains properties like loading, error, totalPages, currentPage, scale, rotation, and search-related states.
• actions: Provides methods for controlling the viewer, including zoomIn(), zoomOut(), goToPage(), search(), rotateClockwise(), and download().

Target Audience

This library is designed for developers using Svelte 5 who need an embeddable, customizable PDF viewer with modern features like text search, zoom, and rotation. It is suitable for applications requiring PDF document display with a clean, modular architecture.