WebPDF

Files and pages

A <pdf-file> loads one PDF document from a URL, from bytes or from the user's device. It draws nothing itself. A <pdf-page> shows one page of a file: the file its of attribute names, or the file it is nested in. One file serves any number of pages, so you can show the first page here, the last page there, and a whole document in a column:

<script src=//new.webpdf.pro/.js type=module></script>
<pdf-file id=report src=report.pdf></pdf-file>
<pdf-page of=report no=1></pdf-page>
<pdf-page of=report no=-1></pdf-page>

Files and pages are linked: load another document into the file, and every page shows it. Pages of the same file share its form values as you type.

Pages are documents, not pictures

A page draws its image with one of three renderers, PDF.js (the engine of Firefox), PDFium (the engine of Chrome) or SVG, and lays its text, links and form fields over it as real HTML. So you can select the text and find words in it, screen readers can read it, links work, and forms fill and save. See Choosing a renderer.

Sized like images

A page has the size of the PDF page, times its scale, the way an image has the size of its picture. Size it with CSS instead, and scale only sets how sharp it is drawn. Before its PDF arrives, a page already keeps a box of the right size, so nothing jumps, and lazy pages draw only when your readers reach them. See Lazy pages and placeholders.

Settings that cascade

Many attributes work on the WebPDF <script>, on a file and on a page: set controls on the script, and every page has controls; set controls=- on one page, and that page does not. These multi-homed attributes let you configure a whole site in one place. See Multi-homed attributes.

A viewer when you want one

Without attributes, a page is just the page. With controls, like a <video controls>, it becomes a viewer: keys to turn, rotate and zoom it, a bar on hover or tap, touch gestures, fullscreen, and a menu to switch the renderer, copy and save. See Viewer controls.

Forms, saving and exporting

Form fields in a page are real form controls. A file saves the filled PDF to the user's device, gives you its bytes to upload, and reads and writes the form values as XFDF. A page exports its image as PNG, WebP, JPEG, AVIF or SVG. See Forms and XFDF and Saving and exporting.

Signatures you can check

A signed file verifies its signatures by itself: whether the signed part is intact, who signed and when, whether a certificate path leads to an anchor you trust, and whether a certificate was revoked. Pages can show a card for each signature. You choose what to trust: your own root certificates, or well-known root stores such as the Adobe Approved Trust List and the EU trusted lists. See Verifying signatures.

Everything stays in the browser

Pages are drawn, forms are filled and saved, and signatures are checked in your visitor's browser. The PDF is never uploaded anywhere; checking a signature fetches certificate status and trust lists, never the document.

Your markup stays yours

<pdf-file> and <pdf-page> are standard custom elements, so they work anywhere HTML does, with or without a framework. They never add attributes or classes to your elements: their state is exposed as custom states, and their insides as parts and custom properties you can style. See Styling WebPDF.

The basic approach

Showing a PDF with WebPDF generally looks like this:

1. Load WebPDF: <script src=//new.webpdf.pro/.js type=module></script>.
2. Add a <pdf-file> with the src of your PDF and an id.
3. Add a <pdf-page> for each page you want to show, naming the file with of and the page with no.
4. Add attributes for what you need: controls, signatures, loading=lazy and so on, on the script, the file or a page.
5. Script the elements through their properties, methods and events, and style them with CSS.

WebPDF works on any domain, with every feature; until a domain is licensed, its pages show a watermark. See Evaluation and licensing.