DEV Community: Dan E

How to Convert HTML to an Image with an API (2026)

Dan E — Fri, 10 Apr 2026 23:09:52 +0000

Converting HTML to an image is one of the most useful rendering operations in modern development. Social cards, invoices, OG images, email previews, and certificates — all start as HTML templates and need to become PNGs or JPEGs.

This guide covers three approaches: a dedicated rendering API (fastest to ship), Puppeteer (the DIY standard), and a serverless function with Satori (for React-specific templates). Each includes working code you can copy and run.

Method 1: Rendex API (Fastest)

The Rendex HTML-to-image API handles browser rendering on Cloudflare's edge network. Pass HTML as a string, get back a PNG, JPEG, WebP, or PDF. No Chromium install, no infrastructure.

# pip install rendex
from rendex import Rendex
from pathlib import Path

rendex = Rendex("YOUR_API_KEY")

html = """
<div style="width:1200px;height:630px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);
  font-family:system-ui;color:white;font-size:48px;font-weight:bold;">
  Hello from Rendex
</div>
"""

result = rendex.screenshot(html=html, format="png", width=1200, height=630)
Path("card.png").write_bytes(result.image)
print(f"Generated {result.metadata.bytes_size} bytes")

The equivalent JavaScript SDK call:

import Rendex from "@copperline/rendex";
import { writeFileSync } from "fs";

const rendex = new Rendex("YOUR_API_KEY");

const html = `
<div style="width:1200px;height:630px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);
  font-family:system-ui;color:white;font-size:48px;font-weight:bold;">
  Hello from Rendex
</div>
`;

const result = await rendex.screenshot({ html, format: "png", width: 1200, height: 630 });
writeFileSync("card.png", Buffer.from(result.image));

Or with raw HTTP — no SDK needed:

curl -X POST https://api.rendex.dev/v1/screenshot \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"width:1200px;height:630px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);font-family:system-ui;color:white;font-size:48px;font-weight:bold;\">Hello from Rendex</div>",
    "format": "png",
    "width": 1200,
    "height": 630
  }' --output card.png

When to use: Production workloads, batch generation, and any case where you don't want to manage browser infrastructure. 500 free calls/month to start. Get an API key.

Method 2: Puppeteer (Self-Hosted)

Puppeteer gives you a headless Chromium instance you control. You can render any HTML by loading it as a data URL or setting page content directly.

import puppeteer from "puppeteer";
import { writeFileSync } from "fs";

const html = `
<div style="width:1200px;height:630px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);
  font-family:system-ui;color:white;font-size:48px;font-weight:bold;">
  Hello from Puppeteer
</div>
`;

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630 });
await page.setContent(html, { waitUntil: "networkidle0" });
const screenshot = await page.screenshot({ type: "png" });
writeFileSync("card.png", screenshot);
await browser.close();

When to use: You need full browser control, want to run on your own infrastructure, or have specialized rendering requirements (e.g., browser extensions, network interception).

Trade-offs: Requires Chromium (~400 MB), significant memory per instance, cold starts in serverless, and you manage the infrastructure. At scale, browser management becomes a full-time ops concern.

Method 3: Satori + Resvg (React to SVG to PNG)

Vercel's Satori converts React JSX to SVG, and resvg converts SVG to PNG. This approach avoids a browser entirely but only supports a subset of CSS (Flexbox only, no Grid).

import satori from "satori";
import { Resvg } from "@resvg/resvg-js";
import { readFileSync, writeFileSync } from "fs";

const font = readFileSync("./Inter-Bold.ttf");

const svg = await satori(
  {
    type: "div",
    props: {
      style: {
        width: 1200,
        height: 630,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "linear-gradient(135deg, #667eea, #764ba2)",
        fontFamily: "Inter",
        color: "white",
        fontSize: 48,
        fontWeight: "bold",
      },
      children: "Hello from Satori",
    },
  },
  {
    width: 1200,
    height: 630,
    fonts: [{ name: "Inter", data: font, weight: 700, style: "normal" }],
  }
);

const resvg = new Resvg(svg);
const png = resvg.render().asPng();
writeFileSync("card.png", png);

When to use: You're already in a React/Next.js ecosystem, need zero external dependencies, and your templates use only Flexbox layouts.

Trade-offs: No CSS Grid, limited CSS property support, no JavaScript execution, no web font loading (fonts must be bundled), and complex layouts may not render correctly. Great for simple cards, but not a general-purpose renderer.

Which Method Should You Choose?

Method	Setup	CSS Support	Best For
Rendex API	30 seconds	Full (Chromium)	Production, batch, AI agents
Puppeteer	10 minutes	Full (Chromium)	Self-hosted, full browser control
Satori + Resvg	5 minutes	Flexbox only	Simple cards, React ecosystem

For most production use cases, an API is the right choice. You get full CSS support, zero infrastructure, and the ability to batch hundreds of renders in a single request.

See the HTML to Image use case page for more examples, or try the free tool to render HTML without writing code.

Common Use Cases for HTML-to-Image

OG images — Generate unique social preview images for every blog post, product page, or user profile
Social cards — Branded Twitter/LinkedIn cards from HTML templates
Invoices — HTML-to-PDF invoice generation with dynamic data
Certificates — Course completion certificates with custom names and dates
Email previews — Render HTML emails as images for testing and review

Ready to start? Get a free API key (500 calls/month, no credit card) or read the API reference.

Want to see how Rendex compares to other rendering APIs? See the 2026 comparison.

How to Capture Website Screenshots with Python in 2026

Dan E — Thu, 09 Apr 2026 01:11:02 +0000

Capturing website screenshots programmatically is one of the most common automation tasks for developers. Whether you're building a link previewer, monitoring a competitor's page, or generating OG images, you need a reliable way to render a webpage and save it as an image.

This guide covers four approaches — from the fastest (an API call) to the most hands-on (a headless browser you manage yourself). Each includes working Python code you can copy and run.

Method 1: Rendex API (3 Lines of Code)

The fastest path. The Rendex Python SDK handles browser rendering on Cloudflare's edge network — no Chromium install, no memory management, no cold starts.

# pip install rendex
from rendex import Rendex
from pathlib import Path

rendex = Rendex("YOUR_API_KEY")
result = rendex.screenshot("https://example.com")

Path("screenshot.png").write_bytes(result.image)
print(f"{result.metadata.bytes_size} bytes in {result.metadata.load_time_ms}ms")

Async support is built in — ideal for batch jobs:

import asyncio
from rendex import AsyncRendex
from pathlib import Path

async def capture_many(urls: list[str]):
    async with AsyncRendex("YOUR_API_KEY") as rendex:
        for url in urls:
            result = await rendex.screenshot(url, format="webp", full_page=True)
            slug = url.replace("https://", "").replace("/", "_")
            Path(f"{slug}.webp").write_bytes(result.image)

asyncio.run(capture_many([
    "https://github.com",
    "https://news.ycombinator.com",
    "https://stripe.com",
]))

Advanced options include dark mode, ad blocking, element selectors, custom viewports, and WebP output. See the full API reference.

When to use: Production workloads, AI agent pipelines, batch processing. You get 500 free calls/month to start. Get an API key.

Method 2: Playwright

Microsoft's Playwright is the current gold standard for headless browser automation. It supports Chromium, Firefox, and WebKit, with an excellent Python API.

# pip install playwright
# python -m playwright install chromium
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1280, "height": 720})
    page.goto("https://example.com", wait_until="networkidle")
    page.screenshot(path="screenshot.png", full_page=True)
    browser.close()

Playwright gives you full control — you can click buttons, fill forms, wait for specific elements, and intercept network requests before capturing.

When to use: You need browser interaction before capture (login flows, cookie banners, SPAs that require clicks). You manage the infrastructure yourself.

Trade-offs: Requires a Chromium install (~400 MB), consumes significant memory per browser instance, and cold starts can be slow in serverless environments.

Method 3: Selenium

Selenium has been the go-to browser automation tool since 2004. If your team already uses it for testing, adding screenshot capture is straightforward.

# pip install selenium webdriver-manager
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

options = webdriver.ChromeOptions()
options.add_argument("--headless=new")
options.add_argument("--window-size=1280,720")
options.add_argument("--disable-gpu")

driver = webdriver.Chrome(
    service=Service(ChromeDriverManager().install()),
    options=options,
)
driver.get("https://example.com")
driver.save_screenshot("screenshot.png")
driver.quit()

When to use: Existing Selenium test suites where you want to add screenshot capture without introducing a new tool.

Trade-offs: Slower than Playwright, less reliable waiting mechanisms, and the WebDriver protocol adds overhead. Selenium 4+ improved significantly, but Playwright is generally preferred for new projects.

Method 4: Pyppeteer

Pyppeteer is a Python port of Puppeteer (Node.js). It uses the Chrome DevTools Protocol directly, which gives fine-grained control.

# pip install pyppeteer
import asyncio
from pyppeteer import launch

async def capture():
    browser = await launch(headless=True)
    page = await browser.newPage()
    await page.setViewport({"width": 1280, "height": 720})
    await page.goto("https://example.com", waitUntil="networkidle0")
    await page.screenshot({"path": "screenshot.png", "fullPage": True})
    await browser.close()

asyncio.run(capture())

When to use: You need DevTools Protocol access for advanced features like performance tracing or network interception, and prefer Python over Node.js.

Trade-offs: The project is less actively maintained than Playwright. Consider Playwright for new projects.

Which Method Should You Choose?

Method	Setup Time	Infra Needed	Best For
Rendex API	30 seconds	None	Production, AI agents, batch jobs
Playwright	5 minutes	Chromium install	Browser interaction before capture
Selenium	10 minutes	ChromeDriver	Existing Selenium test suites
Pyppeteer	5 minutes	Chromium install	DevTools Protocol access

For most production use cases — especially if you're building an AI agent pipeline or need screenshots at scale — an API is the right choice. You avoid managing browsers, handling memory, and dealing with cold starts.

Try the free screenshot tool to see Rendex in action without writing any code, or grab an API key and start with 500 free calls/month.

Want to see how Rendex compares to other APIs? See the 2026 comparison.