How HTML becomes a PDF here
HTML describes a page's structure and style, and a browser decides how to draw it for the current window. A PDF stores a fixed result. There are two broad ways to get from one to the other: a print engine that lays the markup out onto real pages with selectable text, or a snapshot approach that draws the page as an image and wraps that image in a PDF.
This tool uses the snapshot approach. It places your markup into a hidden 800 pixel wide container with a white background and padding, captures it with a rendering library called html2canvas, and then writes that picture onto a single PDF page the same size as the capture. What you get is a faithful-looking picture of simple HTML, with the limits that come with a picture.
Who needs an HTML snapshot
Developers use it to turn a small piece of markup into something shareable: an invoice mock-up, a styled notice, a formatted email body, or a quick layout test. Writers who are comfortable with a little HTML can produce a one-page handout without opening a word processor.
It works best when the content is self-contained. Inline styles travel with the markup, so a heading with a font family and a paragraph with a color render as expected. Anything that depends on files outside the box, such as a linked stylesheet or a web font, has no way of loading into the capture area.
If your source is plain text with no styling, the Text to PDF tool makes real, selectable text and paginates it automatically. If your source is a Word file, use Word to PDF.
How to convert HTML to PDF with this tool
- Type or paste your markup into the HTML box. It starts with a short "Hello World" example you can replace.
- Look at the Preview below the box. It shows how your markup renders on a white background.
- Adjust the markup until the preview looks right. Inline styles such as
style="font-family:sans-serif"are the most reliable way to control appearance. - Click Download PDF. The button reads "Generating" while the capture runs.
- The browser saves the file as document.pdf.
If the render fails, a short error message appears under the preview and you can edit the markup and try again.
What to watch for
The PDF contains an image, so the text is not selectable or searchable, and zooming in on a very small font will eventually show blur rather than crisp letters. The page is a single tall page sized to the content, not a set of A4 or Letter pages, so long documents produce one long page.
Complex CSS may not match what you see in a normal browser tab. Unusual flexbox cases and web fonts are the usual trouble spots, and the tool says as much on the page. Keep layouts simple, use inline styles, and prefer safe system fonts.
Be careful with markup from other people. The preview inserts your HTML into the page, so paste only markup you wrote or trust. Everything runs in your browser and the content is not sent to a server, but that does not make untrusted markup safe to preview.