Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
The reliable way to convert HTML, CSS, and JavaScript to a PNG is to render the page in a real browser, wait for its content to settle, and call the browser’s screenshot API. Playwright and Puppeteer execute JavaScript and apply browser CSS before capturing pixels. Use html2canvas when an already-open webpage needs to export one component in the user’s browser; it reconstructs the DOM rather than taking a literal browser screenshot, so its CSS and cross-origin behavior differ.
Choose the conversion method
| Need | Best starting point | Important limitation |
|---|---|---|
| Automated or server-side PNG of a complete page | Playwright or Puppeteer | You must run a browser and wait for fonts, images, data and animations to reach the intended state. |
| A user exporting a component from the page already open in their browser | html2canvas | It rebuilds pixels from DOM information; unsupported CSS, cross-origin assets and browser security rules can change the result. |
| One request from an application or CI job | A screenshot API such as ScreenshotNeo | The service still needs the target URL to be reachable and renderable. |
For browser fidelity, JavaScript execution, repeatable builds, or protected server environments, start with Playwright or Puppeteer. For an in-page “Download PNG” button, test html2canvas against the exact component and assets you use.
Convert a page to PNG with Playwright
Install the browser automation package
- Create a Node.js project:
mkdir html-shot && cd html-shot && npm init -y. - Install Playwright:
npm install playwright. - Download the managed browser:
npx playwright install chromium.
Capture a full page
Save this as capture.mjs and replace the URL. The script fixes the viewport, waits for network activity and fonts, then writes a PNG.
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1
});
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.waitForLoadState('networkidle');
await page.evaluate(() => document.fonts.ready);
await page.screenshot({
path: 'page.png',
fullPage: true,
type: 'png',
scale: 'css'
});
await browser.close();fullPage: true extends the capture beyond the viewport. With scale: 'css', one output pixel corresponds to one CSS pixel; use scale: 'device' when you want device-pixel-ratio sizing. The viewport controls responsive breakpoints, while deviceScaleFactor controls the emulated display density.
#1 Best Overall
Capture one element or a clipped region
const card = page.locator('.pricing-card');
await card.screenshot({ path: 'card.png', type: 'png' });
await page.screenshot({
path: 'region.png',
clip: { x: 40, y: 120, width: 800, height: 500 },
type: 'png'
});Use a locator for a component whose boundaries are known. Use clip for fixed coordinates. If a component appears after an API call, wait for a meaningful selector instead of relying only on a time delay:
await page.waitForSelector('[data-rendered="true"]', { state: 'visible' });
await page.screenshot({ path: 'ready.png', fullPage: true });Control the visual state
- Hide volatile UI with a stylesheet or locator before capture:
await page.locator('.cookie-banner, .chat-widget').evaluateAll(nodes => nodes.forEach(n => n.remove())); - Freeze animations in an injected style:
await page.addStyleTag({ content: '* { animation: none !important; transition: none !important; }' }); - Set dark mode with
await page.emulateMedia({ colorScheme: 'dark' });. - For a transparent result, remove the page background and use the format options supported by your chosen tool; verify that every element does not paint an opaque background.
Playwright’s page API documents viewport, full-page, element and scale controls: Playwright Page API.
Convert a page to PNG with Puppeteer
Puppeteer drives a headless Chrome browser. Install it with npm install puppeteer, then run:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900, deviceScaleFactor: 1 });
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.screenshot({
path: 'page.png',
type: 'png',
fullPage: true
});
await browser.close();Puppeteer also supports an element bounding box and a clip rectangle. Its screenshot options describe full-page capture, PNG output, clipping and omission of the default background for transparency: Puppeteer ScreenshotOptions. There is no evidence-based universal speed or fidelity winner between Playwright and Puppeteer; choose the ecosystem and APIs your project already uses. Chrome’s overview is at Chrome for Developers.
Use html2canvas inside an existing webpage
Load the library in the page, select an element, and download the generated canvas:
<script src="https://cdn.jsdelivr.net/npm/html2canvas@latest/dist/html2canvas.min.js"></script>
<button id="save">Download PNG</button>
<section id="invoice">...your HTML...</section>
<script>
document.querySelector('#save').addEventListener('click', async () => {
const canvas = await html2canvas(document.querySelector('#invoice'), {
backgroundColor: '#ffffff',
scale: window.devicePixelRatio
});
const link = document.createElement('a');
link.download = 'invoice.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
</script>html2canvas uses DOM nodes, computed styles and browser APIs to construct a canvas; it does not capture the browser’s final framebuffer. Every CSS feature must be implemented by the library, and the output can visibly differ from Chrome or Firefox. Cross-origin images can taint the canvas, and browser content-security rules cannot be bypassed. Same-origin iframe content can be rendered; cross-origin iframe content cannot be read. See the documentation and getting-started guide.
Rank #3
Large and tall elements
Canvas dimensions have browser- and platform-dependent limits. html2canvas warns that an oversized canvas can silently become blank or partial. Test the actual browsers and devices you support; for very tall pages, split the capture into sections or use a headless browser’s full-page screenshot instead. The FAQ explains why html2canvas is client-side and points to Puppeteer or Playwright for server rendering.
Make captures deterministic
- Choose the viewport first: a 375-pixel viewport may activate a mobile layout while 1440 pixels activates desktop CSS.
- Wait for real readiness: combine navigation waits with a selector that proves application data arrived; wait for
document.fonts.readybefore measuring text. - Control motion and time: disable transitions, pause carousels and provide fixed test data when visual diffs must be reproducible.
- Handle lazy content: scroll through a long page or trigger the application’s loading mechanism before taking a full-page shot.
- Name files predictably: include a route, viewport and revision in the filename so CI artifacts are traceable.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. It accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP tools—take_screenshot, get_page_info and capture_pdf—work with Claude, Cursor and other MCP clients.
One GET request returns PNG, JPEG, WebP or PDF. The API supports full-page and CSS-selector element capture, dark mode, 12 device presets or custom viewports, retina scale, PDF paper and page-range controls, custom CSS and JavaScript, clicks, selector/delay/network-idle waits, ad/tracker/request blocking, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of 100 URLs per call, a usage API and an OpenAPI specification. Parameter names used by other screenshot APIs also work, easing migrations. See the ScreenshotNeo documentation for the complete option list.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`${res.status} ${await res.text()}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000 and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Start with 1,000 free screenshots a month—no card required.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Troubleshoot blank, incomplete or incorrect PNGs
The image shows a loading skeleton
Navigation completed before the app’s data did. Wait for a content selector or API-driven state, then capture; increase a timeout only after identifying the readiness signal.
Fonts or images are missing
Wait for document.fonts.ready and the relevant image elements. Check that external resources are reachable from the capture environment and that authentication headers or cookies are supplied.
The mobile or desktop layout is wrong
Set the viewport explicitly before navigation. Responsive CSS is evaluated against that width, not your local monitor.
html2canvas omits an image or iframe
Check same-origin and CORS rules. The library cannot bypass browser security; proxy the asset through an endpoint you control or use Playwright/Puppeteer, subject to the target’s access controls.
A very tall capture is blank or cut off
This is consistent with browser canvas size limits in html2canvas. Split the page or switch to a browser screenshot API that supports full-page capture.
Animations make every run different
Disable transitions, pause animated media and wait for a stable application state before capturing.
Which approach should you use?
- Choose Playwright when you want a documented page API, element screenshots, full-page output and explicit CSS/device scaling in a modern automation stack.
- Choose Puppeteer when your team already operates Chrome automation and needs its documented clipping, full-page and background controls.
- Choose html2canvas for a client-side export of a component when its reconstruction model and same-origin requirements are acceptable.
- Choose ScreenshotNeo when you want a single HTTP call, cleaned pages, usage-aware billing and optional MCP access without installing browsers.
Frequently Asked Questions
Can I convert an HTML string instead of a public URL?
Yes. Create a temporary local HTML file or serve the string from a local route, then navigate Playwright or Puppeteer to that route and call the PNG screenshot method. Ensure relative CSS, fonts and images resolve from the same origin or an explicitly reachable URL.
Does converting to PNG preserve links or selectable text?
No. PNG is a raster image. Keep the original HTML or generate a PDF as a separate artifact when users need selectable text, links or accessibility.
Why is my PNG blurry?
Increase the emulated device scale factor or use Playwright’s device scale option, then verify the resulting pixel dimensions. A larger scale improves raster detail but increases memory and file size.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
