What this is
Stapler is a zero-dependency web component library for rendering print-accurate, multi-page documents in the browser. Authors drop in one <script> tag. The library registers six custom elements. Pages appear.
There is no npm package to install. There is no build step to configure. There is no configuration file to misread at 11pm before a client presentation. There is a .js file. You include it. You write HTML. It works.
Why it exists
The problem it solves is old and well understood: web browsers render content into an infinite vertical scroll, but business documents — reports, proposals, invoices, briefs — are structured around the page. The CSS @media print rules intended to bridge this gap are browser-dependent, poorly documented, and reliably inconsistent across operating systems.
Several solutions exist. Most of them involve server-side PDF generation, which requires a runtime, a dependency, a deployment, and eventually a security audit. Others involve JavaScript libraries that recreate the browser's layout engine in JavaScript, a project whose ambition exceeds its accuracy.
Stapler takes a different position: it does not try to replicate PDF generation. It renders the document in the browser, in HTML, with full CSS support, in the same environment where the content was created. When you are ready for a PDF, you print it. The browser's print engine — which is excellent at its job — does the conversion.
Design principles
Light DOM by default. Authors must be able to style headers and footers with their own CSS. Shadow DOM breaks that, so every component uses Light DOM — the one exception is embed mode, which isolates the document's CSS from the host page on purpose.
No hidden overlays. Headers and footers are stamped directly into each page's DOM. Nothing is hidden with an overlay. Everything stays accessible and styleable with plain CSS.
Print via CSS only. Each page is a fixed-size, hard-clipped container with an auto-injected @page rule. There is no beforeprint or afterprint DOM surgery. What you see in the browser is what prints.
Zero runtime dependencies. The compiled output is a standalone IIFE. It will run in any browser that supports custom elements. It does not phone home. It does not require a CDN. It does not have opinions about your build toolchain because it does not know you have one.
On the subject of AI
A substantial motivation for this library is the emerging use of large language models to generate structured documents. An LLM asked to produce a business report will write coherent, well-organized content. It will not reliably produce correct CSS @media print rules, accurate pixel calculations for header heights, or consistent behavior across browsers.
Stapler is designed to be the layout layer that AI-generated content drops into. The model writes the words. The library handles the pages. A companion component, <print-element-button>, handles the print button for documents embedded in a host application. The combination produces a document that looks like it was designed, even when it was generated.
License and source
MIT License. Source available on GitHub. Contributions welcome. Bug reports appreciated. Feature requests considered in the order in which they can be implemented without adding runtime dependencies.