skills.rest
GQAdonis
GQAdonisCOMMUNITY
Explore all skills by this author →
Website𝕏@gqadonisctoGitHub

convert-htmx-pdf

Convert branded HTML artifacts into paginated, print-correct PDFs via headless Chromium.

Updated Feb 16, 2026
Search Tags:#pdf#html#playwright#pagination#chromium#font embedding#print css
One-click install
npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill convert-htmx-pdf-gqadonis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convert-htmx-pdf
Source: https://github.com/GQAdonis/artifact-refiner-skill/tree/main/skills/convert-htmx-pdf
Command: npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill convert-htmx-pdf-gqadonis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve? Converting a designed HTML page to PDF often breaks fonts, pagination, and brand colors because most converters do not render CSS the way a browser does. This Skill uses headless Chromium to produce a PDF that matches the original artifact, with embedded fonts, running headers, page numbers, and a verification loop that proves the output before it ships. ## Core Features & Use Cases - Browser-faithful rendering: Uses Chromium via Playwright with print media emulation, preserving grid, flexbox, web fonts, and brand background colors. - Font embedding and pagination discipline: Inlines Google Fonts as base64 data URIs (Latin subsets only) and injects a conservative print stylesheet that prevents orphaned headings, split tables, and blank pages. - Automated verification: Checks content preservation, page density, font embedding via pdffonts, and text extractability, plus renders a page-1 preview PNG. - Use Case: You have a branded HTML report generated from Markdown and need a Letter-size PDF with a running header and page numbers for client delivery, without font substitution or orphaned pages. ## Quick Start Convert my branded report.html into a Letter-size PDF with a running header and page numbers, and show me a preview of the first page.

Frequently Asked Questions about convert-htmx-pdf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert HTML to PDF with correct fonts and pagination?▼

Render the HTML in headless Chromium via Playwright with print media emulation and printBackground enabled. Embed web fonts as base64 data URIs before rendering, and inject a print stylesheet with break-inside and orphans rules to control pagination.

Why use Chromium instead of WeasyPrint or wkhtmltopdf for HTML to PDF?▼

Chromium reproduces modern CSS such as grid, flexbox, print-color-adjust, and web fonts exactly as the page was authored. WeasyPrint, pdfkit, and wkhtmltopdf diverge from browser rendering in precisely the areas branded artifacts depend on.

Why does my PDF header overlap the page content?▼

A @page margin declaration in the document's print CSS overrides the margins passed to the renderer, so the header draws into the text. Keep @page to size only and let the renderer own margins; the preflight stage strips conflicting declarations automatically.

Why does the PDF text look different from the browser rendering?▼

A web font failed to load and Chromium substituted a fallback, changing glyph widths and line breaks. Embed fonts as base64 data URIs before rendering and verify with pdffonts that every font reports emb: yes.

Can I add page numbers and a running header to the PDF?▼

Yes. Pass header-left, header-right, and footer-left options, and the script uses Chromium's headerTemplate and footerTemplate, which draw inside the page margin on every page. Page numbers always occupy the footer-right via the pageNumber and totalPages spans.

What are the limitations of this HTML to PDF approach?▼

The source HTML must be self-contained with inline CSS, JavaScript, and data-URI images, since external network dependencies make the PDF non-reproducible. Header and footer templates also use system fonts only because they render in a separate document without the page's @font-face rules.

Related Skills

Explore More Design & Creative Skills→
screenpipescreenpipe
21.3k

render-html-report

Generate self-contained HTML reports that render as live pages in the screenpipe viewer.

Official
Basic
whatagraphwhatagraph

whatagraph-automations

Schedule recurring marketing report deliveries via email with PDF attachments.

Official
Advanced
mhaackmhaack

preview-import

Validate imported HTML rendering on the local AEM Edge Delivery Services development server.

Community
Intermediate
ever-justever-just
3

markdown-to-pdf

Convert markdown files to styled PDFs using pandoc and WeasyPrint with CSS.

Community
Basic