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.
Choose your preferred method of integration below.
1. Vanilla HTML/JS (Easiest)
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.0.0-next.4/dist/embedpdf.js';
EmbedPDF.init({
type: 'container',
target: document.getElementById('pdf-viewer'),
src: 'https://snippet.embedpdf.com/ebook.pdf',
theme: { preference: 'system' }
});
</script>2. Framework Components
For modern web applications, we provide native wrappers that handle lifecycle management and type safety for you.
React
Installation
npm install @embedpdf/react-pdf-viewer Usage
import { PDFViewer } from '@embedpdf/react-pdf-viewer';
export default function App() {
return (
<div style={{ height: '100vh' }}>
<PDFViewer
config={{
src: 'https://snippet.embedpdf.com/ebook.pdf',
theme: { preference: 'light' }
}}
/>
</div>
);
}Configuration
The config object allows you to customize the viewer’s behavior and appearance.
| Option | Type | Description |
|---|---|---|
src | string | URL to the PDF document to load on startup. |
theme | object | Customize colors or set preference. See Theme. |
disabledCategories | string[] | Disable specific UI features by category. See Customizing UI. |
i18n | object | Configure internationalization and translations. See I18n Plugin. |
scroll | object | Configure scroll behavior and page display modes. See Scroll Plugin. |
Next Steps
If you need complete control over the UI (e.g., building your own toolbar from scratch), check out our Headless Libraries instead.
Need Help?
Join our community for support, discussions, and to contribute to EmbedPDF's development.