HTML
Input Editor
PDF
Live Preview
This free HTML to PDF converter turns HTML code into a PDF in your browser. Paste your code into the Input Editor, check the Live Preview, set page size, orientation, margins and scale, then click Convert to PDF and choose Save as PDF in the print dialog. Nothing is uploaded and you do not need to sign up.
The preview updates as you type, and Open in Tab shows the full rendered page before you print.
Choose A4, Letter or Legal, Portrait or Landscape, Normal, Minimum or None margins, and 75% to 100% scale.
The page runs locally in your browser, so your HTML is not sent to a server to convert.
Convert to PDF opens your browser's print dialog, where Save as PDF writes the file.
Three steps from a blank form to a result you can use.
Paste code into the Input Editor, or click Load Sample to try an example document first.
Pick Page Size, Orientation, Margins and Scale, and check the Live Preview or Open in Tab.
Click Convert to PDF, choose Save as PDF as the destination in the print dialog, and save the file.
This converter does not rewrite or generate anything. It shows your HTML in a live preview and uses your browser's own print function to save that page as a PDF, so what you see in the preview is close to what you get.
The tool is a browser page, not an upload service. You paste HTML and CSS into the Input Editor and the Live Preview renders it as you type. When you click Convert to PDF, the page opens your browser's print dialog with your settings applied. You pick Save as PDF as the destination and the browser writes the file.
Because the conversion happens in your browser, the PDF matches how that browser renders your code. The page recommends Chrome or Edge for the most accurate results. Firefox and Safari also work, but output may differ slightly.
| Setting | Options |
|---|---|
| Page Size | A4, Letter, Legal |
| Orientation | Portrait, Landscape |
| Margins | Normal, Minimum, None |
| Scale | 100%, 90%, 80%, 75% |
Many online converters work differently. Smallpdf's HTML to PDF tool, for example, asks you to upload an HTML file and keeps files on its servers for a short time. Here you paste code, and the page itself says everything runs locally on your device.
The dropdowns cover the basics. For finer control, add print CSS to your HTML. These rules come from MDN's CSS reference.
| Goal | CSS | What MDN says |
|---|---|---|
| Start a section on a new page | break-before: page; | Forces a page break right before the element. The older page-break-before: always is treated as an alias. |
| Keep a block together | break-inside: avoid; | Avoid values mean no break is applied at that point. |
| Keep background colours | print-color-adjust: exact; | By default a browser may leave out background images and adjust colours when printing. User print settings still take priority. |
| Set page size and margins in code | @page | Modifies the printed page's dimensions, orientation and margins. Baseline since December 2024, so older browsers may ignore it. |
| Hide buttons and menus | @media print | Styles inside apply only when printing. |
If your CSS already sets @page size or margins, we suggest choosing matching values in the dropdowns, then checking the browser's print preview before you save. The tool page also advises absolute units such as px, mm or pt for more predictable layouts.
Example: an illustration, not output from a real account. A freelancer has an invoice built in HTML with a coloured header, a line item table, a Print button and a terms section.
style block:@media print {
.no-print { display: none; }
}
.invoice-header { print-color-adjust: exact; }
.terms { break-before: page; }
table { width: 100%; }
tr { break-inside: avoid; }no-print and the terms section the class terms.The result: a two page PDF with the invoice on page one, the terms on page two, no button, no table rows split across pages, and the header colour kept. If the colour still disappears, they turn on background graphics in the print dialog settings, since user settings override the CSS. For a wide report, they could instead set the page in CSS:
@page {
size: a4 landscape;
margin: 15mm;
}images/logo.png refers to a file next to your original HTML, which the tool does not have. Use full URLs or Base64.Use Chrome or Edge for the most accurate output. Firefox and Safari can differ slightly.
Wrap buttons and menus in a class hidden by an @media print rule so they do not appear in the PDF.
Add break-before: page to any section that should start on a new page.
Embed images as Base64 data URIs so they show even when an image server blocks embedding.
If a table is cut off, switch to Landscape or lower Scale to 90% or 80%.
Turn off Headers and footers in the print dialog to remove the date and URL from each page.
These tools produce high-quality PDFs programmatically but require a server, a Node.js or Python environment, and engineering setup time. They are not accessible to non-developers or teams without a backend. For one-off conversions or quick document exports, the overhead is not worth it.
Pasting raw HTML into a word processor strips styles, breaks layouts, and loses formatting. You would need to manually reformat everything before exporting. This approach is slow and the output rarely matches the original HTML design.
Printing directly from a live webpage captures the full browser chrome and any live JavaScript state, and requires the page to actually be hosted. This converter gives you control: provide the exact HTML, adjust layout settings, and convert cleanly without deploying anything.
Yes. The converter is free and needs no account. It relies on the Save as PDF option already built into your browser's print dialog, so there is no separate conversion service involved. Paste your HTML, set the page options and save the PDF as many times as you like.
No. The page states that everything runs locally in your browser, so your code stays on your device. The preview and the print step both happen in your browser. That makes it a good fit for invoices, reports or internal documents you would rather not upload to a third party converter.
CSS works, including inline styles and style blocks, and you can add print rules such as page breaks. JavaScript runs in the Live Preview but may not run in the PDF, which is a static snapshot. Make sure interactive elements look right in their default state before you convert.
Not directly. The tool converts HTML code you paste in. To save a live page, open it and press Ctrl+P, or Cmd+P on a Mac, then choose Save as PDF. You can also view the page source with Ctrl+U, copy it and paste it into the Input Editor.
Browsers may leave out background colours and images when printing to save ink. Add print-color-adjust: exact to the elements that need their colours, and turn on the background graphics option in the print dialog. MDN notes that the user's print settings take priority over the CSS, so check both.
Those come from the browser's print headers and footers, not from your HTML. In the Chrome or Edge print dialog, open More settings and untick Headers and footers before you save. Check the print preview afterwards to confirm they are gone from every page.