Embed PDF files in Quarto HTML documents (including RevealJS presentations) — and, unlike other approaches, they also render on mobile browsers.

On desktop, PDFs are shown with the browser's built-in viewer. On mobile browsers — which cannot display embedded PDFs natively — the extension automatically renders the PDF with PDF.js, Mozilla's JavaScript PDF renderer (pictured above), complete with a small toolbar for zooming, page tracking, and downloading.

📱 Works on mobile, where <object>/<iframe> embeds and Quarto's native ![](file.pdf) show a blank box or a download prompt.
🪶 Light by default — the ~1.7 MB PDF.js library is bundled but only downloaded by browsers that actually need it; desktop visitors never fetch it.
🎛️ One shortcode, sensible options — size, borders, initial page, a download button, and per-document/project defaults.
🖥️ Slides too — renders inside RevealJS presentations.
📄 Degrades gracefully — falls back to a download link with JavaScript off, and to \includepdf (LaTeX) or a link in other output formats.

Note

If you only care about desktop browsers, Quarto has native PDF embedding (![](file.pdf)) that may suffice: native.html

Installing

Run the following command in your terminal while in the same working directory as your Quarto document or project:

quarto add jmgirard/embedpdf

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Using

To embed a PDF file in your document, use the {{< pdf file.pdf >}} shortcode. For example:

{{< pdf dummy.pdf >}}
{{< pdf dummy.pdf width=100% height=800 >}}
{{< pdf dummy.pdf renderer=pdfjs >}}
{{< pdf dummy.pdf button="Download PDF" >}}

Remember to list the PDF file under resources in your YAML header so it gets copied to your output site:

---
title: "My Document"
resources:
  - dummy.pdf
---

Options

Option	Default	Description
`renderer`	`auto`	`auto` uses the browser's native viewer when available and PDF.js otherwise (i.e., on mobile); `native` and `pdfjs` force one or the other
`width`		Width of the viewer (pixels or percent)
`height`		Height of the viewer (pixels or percent)
`page`	`1`	Initial page to display
`toolbar`	`true`	Show the PDF.js toolbar (zoom, page indicator, download)
`border`		Border width in pixels around the viewer
`class`		Extra CSS class(es) for the viewer container
`button`		Adds a download button with the given label below the viewer

Defaults for any option can be set document- or project-wide under the embedpdf metadata key:

embedpdf:
  renderer: pdfjs
  height: 600

Other output formats

In LaTeX/PDF output, embedded PDFs are included page-by-page via the pdfpages package (\includepdf). In all other formats (docx, epub, gfm, typst, ...), a download link is emitted instead.

Known limitations

Self-contained documents (embed-resources: true) inline the viewer code, but PDF.js must fetch the PDF file by URL at view time. Use renderer=native and ship the PDF alongside the HTML file. Note that a self-contained document viewed on mobile cannot render the PDF inline at all (neither the native viewer nor PDF.js works without the separate file), so readers there fall back to the download link.
The viewer requires JavaScript; with it disabled, embeds become a download link.
The PDF.js canvas viewer does not yet support text selection or search; use the native renderer on desktop (the default) if you need those.

Guides

Here is a more in-depth guide to using the embedpdf extension: example.html.