@embedpdf/svelte-pdf-viewer
v2.0.0-next.3TypeScript
Svelte component for embedding PDF documents
0/weekUpdated 4 days agoMITUnpacked: 8.3 KB
Published by bobsingor
npm install @embedpdf/svelte-pdf-viewer
Svelte PDF Viewer
The easiest way to embed PDF files in your Svelte application with a complete, ready‑to‑use interface.
---
📚 Documentation
The full walkthrough, advanced examples, and API reference live in our docs site:
👉 https://www.embedpdf.com/svelte-pdf-viewer
---
🚀 Introduction
The @embedpdf/svelte-pdf-viewer package provides a complete, production-ready PDF viewing experience for Svelte applications.
It is designed to be the fastest way to get a high-quality PDF viewer into your app. You don't need to build toolbars, handle layout logic, or worry about CSS—it just works.
$3
- Ready-to-use UI — Includes a polished toolbar, sidebar, and thumbnails.
- Responsive — Adapts seamlessly to mobile and desktop screens.
- Themable — Built-in light/dark modes and support for custom brand colors.
- Configurable — Easily disable features you don't need (e.g., printing or downloading).
- TypeScript — Fully typed for a great developer experience.
- Svelte 4 & 5 — Works with both Svelte 4 and Svelte 5 projects.
- SvelteKit Ready — Works seamlessly with SSR.
---
📦 Installation
``bash`
npm install @embedpdf/svelte-pdf-vieweror
pnpm add @embedpdf/svelte-pdf-vieweror
yarn add @embedpdf/svelte-pdf-viewer
---
🛠 Basic Usage
Import the PDFViewer component and render it with a PDF source.
`svelte
src: 'https://snippet.embedpdf.com/ebook.pdf',
theme: { preference: 'light' },
}}
/>
`
That's it! You now have a fully functional PDF viewer.
$3
The component works seamlessly with SvelteKit. Since it uses browser APIs (Canvas, WebAssembly), it should be used in a browser context. The component handles this internally, but you can also lazy load it if needed.
---
🎨 Customization
$3
The viewer includes a robust theming system. You can set the preference to
, 'dark', or 'system', and even override specific colors to match your brand.`svelte
src: '/document.pdf',
theme: {
preference: 'system',
light: {
accent: {
primary: '#ff3e00', // Custom brand color (Orange)
},
},
},
}}
/>
`$3
Easily customize the UI by disabling features you don't need via the
option:`svelte
src: '/document.pdf',
disabledCategories: ['annotation', 'print', 'export'],
}}
/>
`Available categories include:
, annotation, redaction, document, page, panel, tools, selection, and history.---
⚙️ Configuration Options
The
config prop accepts the following top-level options:| Option | Type | Description |
| :------------------- | :---------------------------------- | :--------------------------------------------- |
|
src | string | URL or path to the PDF document. |
| theme | object | Theme configuration (preference, overrides). |
| tabBar | 'always' \| 'multiple' \| 'never' | Control visibility of the document tab bar. |
| disabledCategories | string[] | Hide specific UI features by category. |
| i18n | object | Configure locales and translations. |
| annotations | object | Configure annotation defaults (author, tools). |
| zoom | object | Configure default zoom levels and limits. |
| scroll | object | Configure scroll direction and logic. |---
🔌 Callbacks & Registry
Use callback props to access the viewer instance and plugin registry.
`svelte
`$3
| Callback | Payload | Description |
| :-------- | :------------------ | :---------------------------------------------- |
|
| EmbedPdfContainer | Fired when the viewer container is initialized. |
| onready | PluginRegistry | Fired when the plugin registry is ready. |---
🧩 Headless Mode
Need complete control over the UI? Building a custom design system?
Check out our Headless Components which provide stores and logic without the UI:
`bash
npm install @embedpdf/core @embedpdf/plugin-zoom ...
``Read the Headless Documentation for more details.
---
📄 License
EmbedPDF is MIT licensed. Commercial use is welcome—just keep the copyright headers intact.