HTML to PDF & Image Converter
Convert HTML code or files into image-based PDFs and images. Static URL fetching is also available.
Paste HTML, upload an HTML file, or fetch a static page's initial HTML source. Adjust size, scale, and background, then export a single-page image-based PDF or an image file.
Convert HTML into a PDF or image
Paste HTML, upload a file, or fetch a static page source. Choose your output settings and generate a preview.
Drag & drop an HTML file here, or
Fetching a URL sends the requested address to a public proxy. The proxy retrieves the page's initial HTML source; it does not run the page's JavaScript. Avoid private or authenticated URLs, and use pasted HTML for more reliable results.
Output settings
Preview & download
Your HTML preview will appear here
The output is a captured image, not text — content in a PDF won't be selectable or searchable. Very tall content scales to fit one page rather than splitting across several.
Turn HTML layouts into shareable files
Render your HTML and CSS in a secure sandboxed frame, then export the result as a single-page image-based PDF or a PNG, JPG, or WEBP image.
Render, capture, embed
A styled component you want to share as a proof, a report built in HTML that needs to become a PDF, a quick social-media image from a snippet of code — each of these needs the same core step: turn markup into a picture that looks like what a browser would show.
Your HTML and CSS are safely isolated and rendered inside a sandboxed frame, then html2canvas walks that layout and draws it onto a canvas element pixel by pixel.
Sandbox-Assisted Security
Restricted Sandboxed Rendering
User-provided HTML is rendered inside a restricted iframe to help isolate user content from the main page.
Memory Guard
Strict pixel and dimension limits prevent browser crashes from oversized canvas renders.
Sizing and delay decide more than the format does
Get the capture right before worrying about which file type to export it as.
Provide your HTML
Paste code, upload a file, or fetch a URL. A sample loads automatically so you can try the tool right away.
Configure the output
Set format and size before generating:
Generate and inspect
Click Generate Preview, then zoom in on the result to check detail before downloading.
Download or copy
Download the file, or copy the image straight to your clipboard for pasting elsewhere.
What this tool is genuinely good at
A screenshot pipeline is the right tool for some jobs and the wrong one for others — here's the honest split.
| Use case | Why it fits | Typical user |
|---|---|---|
| UI component snapshots | Capture a styled card, chart, or widget exactly as it renders, for a proof or a design review. | Designers & developers |
| Social media graphics | Turn a styled HTML snippet into a shareable PNG or JPG image quickly. | Marketers & content creators |
| Simple report snapshots | A single-page report built in HTML, captured as a printable PDF with no backend needed. | Developers building internal tools |
| Email template previews | See exactly how an HTML email will render, saved as an image for approval or documentation. | Email marketers |
| Long text documents | Not a strong fit — output is a single rasterized page with no selectable text. | Better suited to a real document tool |
| JavaScript-heavy live sites | Not a strong fit for the URL-fetch option — only the initial HTML source is captured, not JS-rendered content. | Better suited to a full browser-based screenshot service |
Every setting, and its real-world limits
Most settings do exactly what they say. A couple depend on your browser or the target site — worth knowing upfront.
PDF format
Embeds the captured image on a single PDF page at your chosen page size and orientation. It's a picture inside a PDF wrapper — text is not selectable or searchable.
PNG format
Lossless, supports a transparent background. The largest file size of the three image formats, but the most accurate pixel reproduction.
JPG format
Applies real lossy compression at 90% quality for a smaller file. No transparency support — a solid background is always used.
WEBP format
WEBP can produce smaller files with good quality, but canvas-to-WEBP export is not supported in every browser. If your browser cannot produce WEBP, the tool falls back to PNG and uses the correct .png filename.
Auto-size vs. manual size
Auto-size captures the full height your content naturally takes up. Manual size fixes a width and height, cropping or leaving empty space if the content doesn't match.
Fetch from URL
Fetches the target page's raw HTML source through a public CORS proxy, then loads it into the Code tab. It does not execute that page's own JavaScript, so content built dynamically won't appear, and relative image or CSS paths from the source site often won't resolve.
When the output doesn't match what you expected
What's actually happening, and the fastest way through it.
A fetched URL comes through blank or broken
Only the initial HTML source is fetched — content the site builds with its own JavaScript never appears.
For JS-heavy sites, copy the HTML directly from your browser's dev tools instead and paste it in.
Images or fonts from a fetched page don't show up
Relative paths in the source site's HTML don't resolve once loaded into this tool's own page context.
Replace relative image/CSS paths with full absolute URLs before generating.
The capture looks visually different from the browser
html2canvas doesn't support every CSS feature — some gradients, filters, iframes, and video render incompletely or not at all.
Simplify the CSS causing the issue, or accept the closest visual match for that element.
An animation or late-loading image is missing
The capture happened before the animation or image finished loading.
Increase the Render Delay value and generate again.
WEBP file is much larger than expected
Your browser may not support canvas-to-WEBP export and silently produced a PNG instead.
Try a Chromium-based browser, or use JPG if a smaller file is the priority.
Generate button does nothing
The HTML input is empty.
Add HTML via the Code, File, or URL tab before generating.
Fetched URL is blank
Why: Only static HTML is fetched, not JS content.
Fix: Copy HTML from dev tools instead.
Images missing
Why: Relative paths don't resolve.
Fix: Use absolute URLs.
Looks different from browser
Why: html2canvas CSS support gaps.
Fix: Simplify the affected CSS.
Animation missing
Why: Captured too early.
Fix: Increase Render Delay.
WEBP file too large
Why: Browser fell back to PNG.
Fix: Try Chromium, or use JPG.
Generate button does nothing
Why: No HTML provided.
Fix: Add HTML first.
Getting a clean capture on the first try
A working order that avoids the most common redo.
Use absolute HTTPS URLs for images and fonts
They are more reliable than relative paths, but cross-origin restrictions or unavailable resources can still prevent them from appearing.
Keep CSS simple for reliable results
Basic layout, color, and typography render well. Complex filters, iframes, and video are the most likely to look wrong.
Add render delay for anything animated
200ms is a reasonable default — increase it if content is still loading in when the capture happens.
Prefer pasting HTML over fetching a live URL
The URL fetch is convenient for simple static pages, but pasting the source directly is more reliable for anything complex.
Consider using 2x or 3x scale for printing
Especially recommended when the captured content contains small text or fine details to avoid blurry output on paper.
Zoom into the preview before downloading
Checking detail at 150-200% catches rendering issues you'd otherwise only notice after opening the downloaded file.
HTML to PDF FAQs
If something's not covered here, the troubleshooting section above likely has it.
Is my HTML code uploaded to any server?
For pasted HTML and uploaded files, rendering and export happen locally in your browser inside a secure sandboxed frame. When you fetch a URL, the requested address is sent to a public proxy, whose logging or retention practices are outside this tool's control. Avoid private or authenticated URLs.
Will the text in my PDF be selectable or searchable?
No. This tool renders your HTML and captures it as an image, then places that image inside a PDF. The text is part of a picture, not real PDF text — it cannot be selected, searched, or copied from the output.
Can I create a multi-page PDF?
Not currently. The tool captures a single image of your rendered HTML and places it on one PDF page sized to fit. Very tall content is scaled down to fit one page rather than split across several.
Why did fetching a URL fail or come out blank?
URL fetching uses a public proxy to get around CORS, and only retrieves the page's initial HTML source — it does not run that page's own JavaScript. Sites that build their content with JavaScript, require login, or block the proxy will fetch incompletely or fail.
Why did my JPG or WEBP file look different than expected?
WEBP export depends on browser support for canvas images. If your browser cannot produce WEBP, the tool falls back to PNG and downloads the file with a .png extension. JPG uses lossy compression at 90% quality.
What happens to my content after I'm done?
For pasted HTML and uploaded files, rendering and export happen locally in your browser. When you fetch a URL, the requested address is sent to a public proxy, whose logging or retention practices are outside this tool's control. Avoid private or authenticated URLs.
The write-up on how this was built
Because rendering, capture, and export all run client-side, I wrote up the implementation — how html2canvas walks a rendered DOM to produce pixels, and where that approach runs into real CSS-support limits.
How to Build a Browser-Based HTML to PDF Converter Using JavaScript
Covers DOM-to-canvas rendering with html2canvas, embedding a canvas into a PDF with jsPDF, and the real limitations of a screenshot-based approach versus a true rendering engine.