Getting Started

The EmbedPDF Snippet is a pre-built, production-ready PDF viewer. Unlike the headless libraries which require you to build your own UI, the snippet comes with a polished interface, toolbars, and sidebars out of the box.

1. Using a Framework?

If you are building a modern web application with React, Vue, or Svelte, we strongly recommend using our official component wrappers. They handle lifecycle management and type safety for you.

2. Vanilla HTML/JS (CDN)

If you aren’t using a build tool, or just want to test quickly, you can load the viewer directly from our CDN.

<div id="pdf-viewer" style="height: 100vh"></div>
 
<script type="module">
  import EmbedPDF from 'https://cdn.jsdelivr.net/npm/@embedpdf/snippet@2/dist/embedpdf.js';
 
  EmbedPDF.init({
    type: 'container',
    target: document.getElementById('pdf-viewer'),
    src: 'https://snippet.embedpdf.com/ebook.pdf',
    theme: { preference: 'system' }
  });
</script>

3. NPM Package (Vanilla JS)

If you are using a bundler (Vite, Webpack, etc.) but don’t need a framework wrapper, you can install the snippet directly from NPM.

Installation

npm install @embedpdf/snippet

pnpm add @embedpdf/snippet

yarn add @embedpdf/snippet

bun add @embedpdf/snippet

Usage

import EmbedPDF from '@embedpdf/snippet';
 
const container = document.getElementById('pdf-viewer');
 
if (container) {
  EmbedPDF.init({
    type: 'container',
    target: container,
    src: 'https://snippet.embedpdf.com/ebook.pdf',
    theme: { preference: 'system' }
  });
}

Configuration

The config object allows you to customize the viewer’s behavior and appearance.

Next Steps

If you need complete control over the UI (e.g., building your own toolbar from scratch), check out our Headless Libraries instead.