Embed any PDF on any website.

PDF.js is the JavaScript-based PDF rendering engine Mozilla built for Firefox. It is the same viewer that ships natively in Firefox today, and it is the engine behind most production-grade web PDF embeds. PDF.js renders each page to a canvas, which means it does not depend on a browser's native PDF plug-in and behaves consistently across browsers. Poper's PDF widget uses PDF.js for its Viewer layout, so when a visitor opens an embedded document they get the same inline reading experience whether they are on Chrome, Safari, Edge, or Firefox. PDF.js is BSD-2-Clause licensed and used in production by a large number of sites, which means it is battle-tested across PDF versions and the common edge cases you encounter with documents in the wild.

The widget ships three layouts and the right one depends on whether you are showing a single document or a set of them. The Viewer layout embeds one PDF inline for reading, with page navigation, zoom, fullscreen, and a thumbnail strip. Use it on a page built around a single report, contract, or brochure. The Grid layout shows several files as cards in a column count you choose, each with a preview image, name, description, size, and date. Use it for a resource hub or download center where visitors pick from a list. The List layout shows the same file information in a stacked row instead of a card grid, which suits a denser document index. Grid and List both let you toggle the preview image, description, size, and date, so you can show as much or as little metadata as the page needs.

The Viewer layout exposes four controls, each of which you can turn on or off. Page navigation lets the visitor move forward and back through the document. Zoom supports zooming in and out, and on a trackpad a pinch gesture zooms as well. Fullscreen expands the viewer to fill the screen and the Escape key returns it. The thumbnail strip shows small page previews so a visitor can jump directly to a page. If you want a stripped-down reading surface, you can hide any of these. If you want the full reading experience, leave them all on. Because the controls are part of the widget rather than the browser's native viewer, they look and behave the same for every visitor.

The Style tab keeps the embed looking like part of your site rather than a bolted-on box. You set the widget width and its alignment on the page, the title and text colors, the card and background colors, the button color and button text color, the border width and color, the corner radius, and an optional shadow. The download button has its own controls: you can show it, hide it entirely for view-only documents, relabel it, and choose whether it opens in a new tab. Hiding the download button is useful when you want a document read on the page but not redistributed. None of this requires writing CSS.

Before you embed a PDF, it is worth asking whether PDF is the right format for the content. PDFs were designed for print: a fixed page size and a fixed layout. That is the right choice for documents where the layout is the point, such as signed contracts, regulatory filings, tax forms, designed brochures, and catalogs. For long-form content like blog posts and documentation, native HTML usually beats an embedded PDF because it reflows to any screen and is easier to read on mobile. The PDF widget is the right tool when you genuinely have a fixed-layout document to show: a report, a contract, an ebook sample, or a brochure. Pick the format based on what the visitor needs to do with the content.