EmbedPDF Snippet
Introduction
The EmbedPDF snippet is the simplest and most complete way to add PDF viewing capabilities to your website. It’s a “batteries included” solution that gives you a fully functional PDF viewer with just a few lines of code.
What makes the EmbedPDF snippet special?
Unlike other PDF solutions that require complex setup or building your own interface, the EmbedPDF snippet comes with everything you need:
- Complete UI included: Professional toolbar, navigation, zoom controls, search, and more
- Zero build required: Works with any website, no bundlers or build tools needed
- Copy and paste setup: Add it to your site in under 30 seconds
- Fully customizable: Adjust settings to match your needs perfectly
- Works everywhere: Compatible with any JavaScript framework or plain HTML
Installation
No installation required! The EmbedPDF snippet loads directly from our CDN. Just add the script to your HTML:
index.html
<div id="pdf-viewer" style="height: 500px"></div>
<script async type="module">
import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';
const viewer = EmbedPDF.init({
type: 'container',
target: document.getElementById('pdf-viewer'),
src: 'https://snippet.embedpdf.com/ebook.pdf'
});
</script>
That’s it! Your PDF viewer is ready to use with a professional interface.
Basic Usage
The EmbedPDF snippet follows a simple three-step pattern:
- Create a container: Add a
<div>
where you want the PDF viewer to appear - Import the library: Load EmbedPDF from our fast, reliable CDN
- Initialize: Call
EmbedPDF.init()
with your configuration
Minimal Example
basic-example.html
<!DOCTYPE html>
<html>
<head>
<title>My PDF Viewer</title>
</head>
<body>
<div id="pdf-viewer" style="height: 100vh"></div>
<script async type="module">
import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';
EmbedPDF.init({
type: 'container',
target: document.getElementById('pdf-viewer'),
src: 'https://snippet.embedpdf.com/ebook.pdf'
});
</script>
</body>
</html>
Troubleshooting
Common Issues
PDF not loading?
- Verify the PDF URL is publicly accessible
- Check CORS headers if loading from a different domain
- Ensure the file is a valid, non-corrupted PDF
- Test the URL directly in your browser
Viewer appears blank or empty?
- Check browser console for JavaScript errors
- Verify the target element exists when the script runs
- Ensure the container has a defined height (not 0px)
- Confirm you’re using a modern browser with ES6 module support
Performance issues or slow loading?
- Keep web workers enabled (
worker: true
- this is the default) - Optimize your PDF files by compressing them
- Use a CDN to serve your PDF files faster
- Consider reducing tile size for lower-end devices
Browser Compatibility
The EmbedPDF snippet works in all modern browsers that support:
- ES6 modules (for the import statement)
- WebAssembly (for the PDF rendering engine)
- Web Workers (optional, but strongly recommended for performance)
Last updated on June 12, 2025