The ultimate Svelte PDF viewer for your next project. Choose our pre-built viewer for instant results, or use our headless components to build a completely custom UI.
Works seamlessly with your favorite libraries
Choose the level of control that fits your project
A complete, polished PDF viewer with toolbar and thumbnails. Drop it in and you're done.
Use our powerful components to build a viewer that perfectly matches your design system.
Get a fully featured PDF viewer in your Svelte app with just a few lines of code.
<script lang="ts">
import { PDFViewer } from '@embedpdf/svelte-pdf-viewer';
function onready(registry) {
console.log('PDF viewer ready!', registry);
}
</script>
<PDFViewer
config={{ src: 'https://snippet.embedpdf.com/ebook.pdf' }}
style="height: 500px"
{onready}
/>This is the default UI you get with the <PDFViewer /> component.
Want a different look? Scroll down to see our headless architecture.
Pick only the features you need. Each plugin is a separate package—your bundle stays lean, your app stays fast.
<script lang="ts">
import { EmbedPDF, createPluginRegistration }
from '@embedpdf/core/svelte';
import { ZoomPluginPackage, zoomStore }
from '@embedpdf/plugin-zoom/svelte';
// Register only what you need
const plugins = [
createPluginRegistration(DocumentManagerPluginPackage),
createPluginRegistration(ZoomPluginPackage, {
defaultZoomLevel: ZoomMode.FitPage
}),
];
// Use stores for reactive state
const { zoomIn, zoomOut, currentZoomLevel } = zoomStore(documentId);
</script>
Use zoomStore(), selectionStore(), or any store with your own buttons, sliders, and components.
Technical excellence you can rely on. Designed for high-performance applications.
Not an afterthought. Every prop, store, and event is fully typed, giving you a superior developer experience with robust autocomplete.
Handle documents with thousands of pages. We only render what is visible in the viewport, keeping your application memory usage low and frame rates high.
Works seamlessly with Server Side Rendering. Components handle client-only logic gracefully, so you don't have to fight with hydration errors.
Don't ship a 5MB viewer when you only need to show a simple invoice. Our modular architecture means you import only the parts you need, keeping your initial bundle size tiny.
Everything you need to know about integrating the viewer.
Most Svelte libraries wrap PDF.js. EmbedPDF uses a custom WebAssembly engine powered by PDFium (Google Chrome's PDF engine). This delivers significantly faster rendering, better accuracy, and a true headless architecture that gives you full UI control.
Yes! All components are designed to work seamlessly with SvelteKit. We handle the client-side browser APIs (like Canvas) gracefully, so you don't get hydration mismatches. Just ensure components are only mounted on the client.
Yes! The component is fully compatible with both Svelte 4 and Svelte 5. Use it in any Svelte project regardless of version.
No. The viewer runs entirely in the user's browser using WebAssembly. Your documents stay on the client, and you don't need to pay for any cloud processing or manage API keys.
We use a virtualization engine that only renders the pages currently visible in the viewport. This keeps memory usage low and scrolling smooth, even for documents with 1000+ pages.
Yes. The core library and all standard plugins are MIT licensed. You can use them in personal, commercial, and enterprise projects without any restrictions or hidden fees.
Join thousands of developers using EmbedPDF to create amazing experiences.