Free html-css-to-image Alternative: HTML to Image API with No Signup

Free html-css-to-image Alternative: HTML to Image API with No Signup

html-css-to-image (HCTI) is a popular API for converting HTML templates into images — used for generating OG images, social cards, email headers, and dynamic badges. It works well, but requires account creation and costs $19/month for production use.

If you need to render HTML as an image without creating an account, there's a free alternative.

Try It Immediately

curl -X POST "https://hermesforge.dev/api/html2image" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"padding:40px;background:#1a1a2e;color:#e94560;font-size:48px;font-family:sans-serif\">Hello World</div>",
    "width": 800,
    "height": 200,
    "format": "png"
  }' --output hello.png

No signup. No API key. No trial period. The image comes back immediately.

Feature Comparison

Common Use Cases

OG Image Generation

curl -X POST "https://hermesforge.dev/api/html2image" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;justify-content:center;font-family:sans-serif\"><div style=\"text-align:center;color:#fff\"><h1 style=\"font-size:64px;margin:0\">Your Blog Title</h1><p style=\"font-size:28px;color:#ccc;margin-top:16px\">Subtitle or description here</p></div></div>",
    "width": 1200,
    "height": 630,
    "format": "png"
  }' --output og-image.png

Social Card (Twitter/X)

curl -X POST "https://hermesforge.dev/api/html2image" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"width:1200px;height:600px;background:#0f0f23;padding:60px;box-sizing:border-box;font-family:monospace\"><p style=\"color:#58a6ff;font-size:14px;margin:0 0 16px\">hermesforge.dev</p><h1 style=\"color:#e6edf3;font-size:52px;margin:0 0 20px;line-height:1.2\">Screenshot API</h1><p style=\"color:#8b949e;font-size:22px;margin:0\">No signup required. Works immediately.</p></div>",
    "width": 1200,
    "height": 600,
    "format": "png"
  }' --output social-card.png

Dynamic Badge

curl -X POST "https://hermesforge.dev/api/html2image" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"display:inline-flex;border-radius:4px;overflow:hidden;font-family:sans-serif;font-size:12px\"><span style=\"background:#555;color:#fff;padding:4px 8px\">status</span><span style=\"background:#4c1;color:#fff;padding:4px 8px\">passing</span></div>",
    "width": 130,
    "height": 24,
    "format": "png"
  }' --output badge.png

Email Header

curl -X POST "https://hermesforge.dev/api/html2image" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"width:600px;height:200px;background:#1a73e8;display:flex;align-items:center;justify-content:center\"><h1 style=\"color:white;font-family:Arial,sans-serif;font-size:36px\">Monthly Newsletter</h1></div>",
    "width": 600,
    "height": 200,
    "format": "png"
  }' --output email-header.png

Python Integration

import requests

def html_to_image(html: str, width: int = 1200, height: int = 630, fmt: str = "png") -> bytes:
    resp = requests.post(
        "https://hermesforge.dev/api/html2image",
        json={"html": html, "width": width, "height": height, "format": fmt},
        timeout=30,
    )
    resp.raise_for_status()
    return resp.content

# Generate OG image for a blog post
og_html = """
<div style="width:1200px;height:630px;background:#0d1117;
            display:flex;align-items:center;justify-content:center;
            font-family:system-ui,sans-serif">
  <div style="text-align:center;color:#e6edf3;padding:60px">
    <h1 style="font-size:56px;margin:0 0 16px">How to Build a REST API</h1>
    <p style="font-size:24px;color:#8b949e;margin:0">hermesforge.dev · 8 min read</p>
  </div>
</div>
"""

image_bytes = html_to_image(og_html)
with open("og-image.png", "wb") as f:
    f.write(image_bytes)

Next.js: Auto-Generate OG Images

// pages/api/og.ts
export default async function handler(req, res) {
  const { title, description } = req.query;

  const html = `
    <div style="width:1200px;height:630px;background:#0d1117;
                display:flex;align-items:center;justify-content:center;
                font-family:system-ui,sans-serif;padding:80px;box-sizing:border-box">
      <div style="color:#e6edf3">
        <h1 style="font-size:60px;margin:0 0 20px;line-height:1.2">${title}</h1>
        <p style="font-size:24px;color:#8b949e;margin:0">${description}</p>
      </div>
    </div>
  `;

  const imageResp = await fetch("https://hermesforge.dev/api/html2image", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ html, width: 1200, height: 630, format: "png" }),
  });

  const imageBuffer = await imageResp.arrayBuffer();
  res.setHeader("Content-Type", "image/png");
  res.setHeader("Cache-Control", "public, max-age=86400");
  res.send(Buffer.from(imageBuffer));
}

Pricing Comparison

html-css-to-image is a subscription. This API uses one-time pricing — buy 30 days when you need capacity, not a recurring charge.

When to Choose Which

html-css-to-image is better if you need: - Template variable substitution (built-in {{ variable }} syntax) - Guaranteed SLA for high-volume production - Enterprise support

This free alternative is better if you need: - Testing HTML rendering without creating an account - Also capturing real URLs (not just HTML templates) - PDF export from HTML - Budget-friendly one-time pricing - Dark mode rendering

Getting Started

No account needed. Send a POST request with your HTML:

curl -X POST "https://hermesforge.dev/api/html2image" \
  -H "Content-Type: application/json" \
  -d '{"html": "<h1 style=\"color:red\">Hello</h1>", "width": 400, "height": 100, "format": "png"}' \
  --output test.png

Or try the interactive HTML to Image tool to experiment visually.

For higher volume, get a free API key — 50 requests/day, no payment required.