Documents

The PDF viewer shows a PDF in the page — a report, a contract, a statement, a manual — with the library's own PDF engine: no browser plug-in, no server and no third-party code, and the file never leaves the page. It reads compressed and damaged files and documents protected with a password, and draws embedded fonts, images, transparency, gradients and patterns.

Readers get what they expect: page width or whole page, zoom and rotation, find with every match lit, thumbnails and the outline, links that work, comments with their notes, and form fields with their values. Each page's text lies over its picture as real text, so it can be selected, copied and read by a screen reader. Print and download are one button each. Only the pages in view are drawn, so a document of thousands of pages opens as quickly as one of ten.

An annual report

A five-page report with an outline, a chart, a table, links, two comments and a customer's feedback form. Open the side panel for the outline or the thumbnails, follow the contents, open the comments on “Our regions”, and search for repair.

Find “repair”

Go to the figures

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-pdf-viewer id="dc-report" src="./assets/samples/annual-report.pdf" sidebar="outline" file-name="annual-report-2026.pdf" label="Annual report 2026" style="--bmx-pdf-viewer-height: 40rem"></bmx-pdf-viewer>

Your own file

Drop a PDF here, or choose one. It is read and drawn in this page; nothing is uploaded, and closing the page is the end of it.

Drop a PDF here, or choose a file

Your PDF will open here.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-pdf-viewer id="dc-own" label="Your PDF" style="--bmx-pdf-viewer-height: 34rem">
  <p slot="empty">Your PDF will open here.</p>
</bmx-pdf-viewer>

A protected document

A board pack protected with AES-256. The viewer asks for the password and opens it in the page; a wrong password is said to be wrong. The password is showcase.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-pdf-viewer id="dc-board" src="./assets/samples/board-pack.pdf" label="Board pack" allow-download="false" style="--bmx-pdf-viewer-height: 30rem"></bmx-pdf-viewer>

Two thousand pages

A year of invoices, two thousand pages, written by this page as a PDF and opened. Only the pages in view are drawn, so it opens at once and scrolls smoothly. Find goes through all of it.

Make and open the invoices

Find the last invoice

Press the button to make the invoices.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-pdf-viewer id="dc-invoices" zoom="whole-page" label="Invoices" style="--bmx-pdf-viewer-height: 34rem">
  <p slot="empty">Press the button to make the invoices.</p>
</bmx-pdf-viewer>