Paste HTML code or upload an .html file, watch the live preview, then download a clean PDF. Custom page size, margins, page numbers, and quality control — all running in your browser with nothing uploaded.
Khalil Rahman
Built and maintained by
Paste HTML code on the left, or click "Load sample" for a demo document you can edit and convert.
<div style="page-break-before: always;"></div> anywhere in your HTML to force a new page.
HTML is a description of content. A PDF is a fixed page. Converting HTML to PDF means taking the description, asking the browser to lay it out as if on a page, capturing that laid-out result as pixels, and placing those pixels into a PDF page.
That middle step — capturing the layout as pixels — is the key. Unlike Word to PDF (where the source has selectable text that can be transferred), HTML to PDF is inherently a rasterization step. The browser renders the HTML into a canvas, and the canvas is embedded in the PDF as an image. The result looks exactly like the preview, but the text is not selectable.
This tool uses html2pdf.js, which internally runs html2canvas (to capture the DOM as a canvas) and jsPDF (to write the PDF). Everything runs in your browser — no server renders your page, no template engine processes your HTML, no third party sees your content.
There's a specific kind of content where HTML to PDF shines, and a specific kind where it doesn't. Knowing the difference saves time.
| Task | HTML to PDF works well? | Why |
|---|---|---|
| Printing an invoice layout built in HTML/CSS | ✅ Yes | Layout precision is what this tool is for |
| Turning a styled report template into a PDF | ✅ Yes | The CSS styling carries through faithfully |
| Archiving a static web page's content | ✅ Yes | Rendered as it appears in the browser |
| Creating a certificate or certificate-style document | ✅ Yes | Backgrounds, borders, images all render |
| Getting selectable/searchable text in the PDF | ❌ No | Text becomes an image during rendering |
| Converting a live web page from a URL | ⚠️ Partial | Save the HTML source first, then paste it here |
| Pages with heavy JavaScript content | ❌ No | Scripts aren't run — only the static HTML renders |
| Documents with fixed headers/footers | ⚠️ Partial | Fixed positioning doesn't repeat across pages reliably |
| Category | Support | Notes |
|---|---|---|
| Headings, paragraphs, lists | ✅ Full | Any HTML tag works |
| Bold, italic, underline | ✅ Full | Inline and via CSS |
| Tables | ✅ Full | With borders, backgrounds, and cell spacing |
| Images (base64 or CORS-enabled) | ✅ Full | Remote images without CORS headers may fail |
| Background colors, gradients | ✅ Full | Enabled by the background graphics toggle |
| Borders, radius, box-shadow | ✅ Full | Rendered as expected |
| Flexbox and CSS Grid | ⚠️ Partial | Simple layouts work; complex ones may shift |
| Web fonts | ⚠️ Depends | Fonts must be loaded before rendering |
| CSS transforms and animations | ❌ Not supported | Static rendering only |
| position: fixed / sticky | ⚠️ Partial | Renders once at the top of the first page |
| JavaScript-generated content | ❌ Not supported | Scripts are sandboxed and won't execute |
| SVG graphics | ✅ Full | Inline SVG is captured like any other element |
When content is longer than one page, html2pdf splits it at natural break points. You have two ways to influence this:
<div style="page-break-before: always;"></div> where you want a new page to start.style="page-break-inside: avoid;" to a container to keep its content on one page (useful for cards, table rows, or image+caption blocks).page-break-inside: avoid;. That's the standard CSS approach and html2pdf respects it.
Most HTML to PDF services upload your HTML to a server, render it with headless Chrome, and return the PDF. That's fine for a public invoice template. It matters more when the HTML contains internal data — customer names, employee details, financial figures — that shouldn't be sitting on someone else's disk.
This tool never leaves your browser. The HTML is rendered in a sandboxed iframe on your device, captured as a canvas, and written as a PDF by jsPDF — all in the same tab. No upload step exists, so there's nothing to intercept.
The preview and the final render should be identical since both use the same iframe. If they differ, the most common cause is images that finished loading after the render started. The tool waits for images, but very slow-loading assets or ones from unreliable servers can still miss the capture. Try running the download again.
Remote images need CORS headers on the source server. If a website blocks cross-origin image requests (which many do), the tool can't capture them. The fix: download those images and embed them as base64 data URIs in your HTML, or host them somewhere with permissive CORS (GitHub raw URLs work well).
If your HTML uses a web font (Google Fonts, Adobe Fonts, etc.), the font needs to finish loading before the render starts. The tool waits for document.fonts.ready but this only covers fonts that the browser actually fetches. If a font URL is broken, the fallback font is used. To guarantee rendering, embed the font as a base64 @font-face rule, or use system fonts (Arial, Helvetica, Georgia, Times).
Add explicit page-break controls to your HTML. Without them, html2pdf breaks at the nearest natural boundary — usually a margin between elements. Wrapping logical blocks in a container with page-break-inside: avoid; gives much better results.
Rendered images always produce larger PDFs than vector text. Try reducing render quality to Draft, lowering JPEG compression, or reducing the number of large images. A typical one-page HTML invoice at Standard quality ends up around 200–400 KB.
Rendering 50+ pages of HTML at high quality can take 10–30 seconds. The progress bar shows what's happening. If it feels stuck, try lowering the quality to Draft for a first pass, then regenerate at High quality once you know the layout is right.
Yes. Here's exactly what happens when you use this tool:
At no point does the HTML leave your device. No data is sent to SkillsInsider's servers. No tracking cookies watch your conversion. Turn off Wi-Fi after the page loads and it still works perfectly.
Yes — completely free. No sign-up, no watermark, no page limits, no per-file fee.
No. Everything runs locally in your browser using html2pdf.js. Your HTML never leaves your device.
Headings, paragraphs, bold, italic, lists, tables, images, background colors, borders, and basic CSS layout. Complex features like JS-generated content, position:fixed elements, animations, and CSS transforms may not render correctly.
Not directly — this tool works from HTML source, not a URL. If you want a live webpage as a PDF, use your browser's Print → Save as PDF feature. If you have the HTML source (for example, from View Source), you can paste it here.
No. HTML to PDF conversion is inherently a rasterization step — the HTML is rendered to a canvas, then the canvas is embedded in the PDF as an image. The output looks identical but the text is not selectable. If you need selectable text, use our Create PDF tool or export from a text-based source.
Add <div style="page-break-before: always;"></div> anywhere in your HTML to force a new page starting at that point. You can also add page-break-inside: avoid to a div to keep its content on one page.
Yes. Click the upload box in the sidebar and select an .html or .htm file. The content is loaded into the editor and the preview updates automatically.
Once the page has fully loaded, yes. Turn off Wi-Fi and it still converts.