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)