Advanced HTML to PDF Maker

Author a PDF from raw HTML and CSS — page size (A4 / Letter / Legal / A3 / A5), portrait or landscape, custom margins, headers, footers with page numbers, embedded fonts, and a live print-accurate preview. Generates real selectable PDFs via the browser engine. 100% client-side.

Tool Web Dev Updated Apr 26, 2026

How to Use

Paste or write HTML in the left editor. Add CSS in the styles panel.
Pick page size, orientation, and margins. Add a header / footer if needed.
Watch the live preview update — it renders exactly what the PDF will contain.
Click "Save as PDF" — the browser print dialog opens with PDF as the default destination.

HTML body

CSS styles

Sample templates

Page size

Custom W × Hmm

Orientation

Marginmm

PDF title

Header texttokens: {page} {total}

Footer texttokens: {page} {total}

Preview reflects page size, margin, and orientation. Headers / footers appear only in the printed PDF (browser limitation in iframe).

How printing → PDF actually works here

This tool doesn't ship a giant JavaScript PDF library. Instead it builds a clean printable HTML document with proper @page CSS rules and triggers your browser's native print dialog. Modern browsers (Chrome, Edge, Firefox, Safari) all include "Save as PDF" as a print destination, and they produce real PDFs with selectable text, working hyperlinks, embedded fonts, and crisp vector graphics — not raster images of the page.

This means: smaller page weight (no 600 KB library), better PDF quality, faster generation, and complete privacy (your HTML never leaves the browser). The trade-off is one extra click in the print dialog to confirm "Save as PDF" as the destination.

CSS print rules cheat sheet

@page {
    size: A4 portrait;        /* or Letter, Legal, A3, A5, or "210mm 297mm" */
    margin: 20mm;             /* applies to every page */
}
@page :first {                 /* override the first page */
    margin-top: 40mm;
}
.page-break {
    page-break-after: always;  /* force a new page */
}
.no-break {
    page-break-inside: avoid;  /* keep this block on one page */
}
.print-only { display: none; }
@media print {
    .print-only { display: block; }
    .screen-only { display: none; }
    a { color: inherit; text-decoration: none; }
}

About

The HTML / CSS editor pair lets you author print-ready documents with the same flexibility you'd get in a static-site generator. Each preview re-render is debounced so typing stays fast. Your work auto-saves to localStorage so a refresh doesn't lose data — clear it with the Reset button.

Frequently Asked Questions

Why use the browser print engine instead of a JS library?

Two reasons: (1) Quality — the browser renders text as real selectable text in the PDF (not a raster image), preserves links, and handles fonts perfectly. (2) Privacy + size — no 600KB jsPDF / html2pdf bundle to download, no third-party code in your build, and your HTML never leaves the browser.

Will it work in any browser?

Yes, every modern browser (Chrome / Edge / Firefox / Safari) has "Save as PDF" built into its print dialog. Chrome and Edge default to it; Firefox and Safari list it as the first destination option.

How do I add page numbers?

Use the Header or Footer field with the special tokens <code>{page}</code> (current page) and <code>{total}</code> (total pages). Example: <code>Page {page} of {total}</code>. The browser renders these via CSS @page rules during print.

Can I embed images?

Yes. Use base64 data URIs (e.g. <code><img src="data:image/png;base64,..."></code>) for guaranteed inclusion. Regular http/https image URLs work too if your CORS allows it. Avoid linking to local file:// paths.

How about multiple pages?

CSS handles it natively: any content over the page height auto-flows. To force a page break: <code><div style="page-break-after: always;"></div></code>. To prevent breaks inside an element: <code>page-break-inside: avoid;</code>.

Can I save my template?

The HTML and CSS are saved to your browser's localStorage automatically. Reload the page and your work is still there. To clear, hit Reset.

Common Use Cases

Invoice / receipt

Author a one-page invoice with company logo, line items, totals, due date.

Resume / CV

Print-quality CV with custom fonts and exact margin control — better than Word's "Save as PDF".