Converting HTML to images is more useful than it sounds. From generating social media cards, to rendering email templates as images, to archiving web content as visual snapshots — the use cases are endless.

Setting up a headless browser yourself (Puppeteer, Playwright) is doable but painful: you need to manage Node.js infrastructure, handle memory leaks, deal with font rendering inconsistencies across environments, and keep the browser binary updated. An API removes all of that.

What is an HTML-to-Image API?

An HTML-to-Image API accepts an HTML string (or a URL), renders it in a real browser engine, and returns a PNG or JPEG image. The rendering is pixel-perfect — the same result you'd get if you opened the page in Chrome and took a screenshot.

ToolCenter's /v1/html-to-image endpoint supports 17+ parameters, including Google Fonts, custom JavaScript injection, full-page capture, element selectors, and custom viewport dimensions.

Basic Usage

Here's the simplest possible request — convert a snippet of HTML to a PNG:

curl -X POST https://api.toolcenter.dev/v1/html-to-image \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<h1 style=\"font-family: sans-serif; color: #1e293b;\">Hello, World!</h1>",
    "width": 800,
    "height": 200,
    "format": "png"
  }' \
  --output hello.png

That's it. You get back a binary PNG file. No browser installed. No Node.js. No Docker container.

Real-World Use Cases

1. Generating Dynamic Social Media Cards

Every blog post deserves a unique OG image. Instead of designing each one manually, write an HTML template with the title and background gradient — then call the API to render it as a 1200×630 PNG.

const html = `
  <div style="width:1200px;height:630px;background:linear-gradient(135deg,#0f172a,#1e3a5f);
              display:flex;align-items:center;padding:80px;">
    <h1 style="color:white;font-size:64px;line-height:1.1;">${post.title}</h1>
  </div>
`;

const res = await fetch('https://api.toolcenter.dev/v1/html-to-image', {
  method: 'POST',
  headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' },
  body: JSON.stringify({ html, width: 1200, height: 630, format: 'jpeg', quality: 90 })
});
const buffer = await res.arrayBuffer();

2. Rendering HTML Emails as Images

Some email clients strip CSS unpredictably. Convert your HTML email template to a single image for guaranteed pixel-perfect rendering in any client.

3. Code Snippet Images (Carbon-Style)

Generate beautiful code snippet images for documentation or social media. Use "transparent": true to get a PNG with no background — perfect for overlaying on slides.

4. Invoices and Reports

Design your invoice in HTML/CSS (full design control), render it as an image via the API. Need a PDF instead? The /v1/pdf endpoint accepts the same HTML payload.

Advanced Parameters

Python Example

import requests

response = requests.post(
    'https://api.toolcenter.dev/v1/html-to-image',
    headers={'Authorization': 'Bearer YOUR_API_KEY'},
    json={
        'html': '<h1 style="font-size:72px;color:#3b82f6;font-family:sans-serif;">Hello</h1>',
        'width': 800,
        'height': 200,
        'format': 'png',
        'google_fonts': 'Inter:700'
    }
)

with open('output.png', 'wb') as f:
    f.write(response.content)
print(f'Saved: {len(response.content)/1024:.1f} KB')

PHP Example

<?php
$ch = curl_init('https://api.toolcenter.dev/v1/html-to-image');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY', 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => json_encode(['html' => '<h1>Hello</h1>', 'width' => 800, 'height' => 200])
]);
file_put_contents('output.png', curl_exec($ch));
curl_close($ch);

Performance & Caching

The API uses a warm Chromium instance with no cold-start penalty. Typical render time for a simple HTML template is under 400ms. For complex pages with Google Fonts, expect 800–1200ms on the first call; subsequent identical requests return a cached result in under 50ms.

Results are cached by a hash of the request payload. If your HTML changes on every request, pass "cache": false to bypass the cache.

Getting Started

  1. Create a free account — your API key is ready instantly, no approval needed
  2. Make your first request with the curl example above
  3. Read the full API reference for all 17+ parameters

100 free API calls/month. No credit card required. No Puppeteer dependency tree to maintain.