Tutorial

How to Render HTML to an Image via API

Use the /v1/render endpoint to convert raw HTML into a pixel-perfect PNG, JPEG, or WebP image. Perfect for OG cards, email previews, invoices, and dynamic thumbnails.

Steps

Prepare your HTMLWrite a full HTML document with inline CSS. The render endpoint supports HTML5, CSS3, web fonts (via @import or ), and any static assets accessible over the internet.
Set viewport dimensionsFor Open Graph images use 1200×630. For Twitter Cards use 1200×600. For email headers try 600×200. Any size up to 3840×3840 works.
POST to /v1/renderSend a POST request with Content-Type: application/json. The body should include html (string), width, height, format, and quality.
Save the imageThe response is raw image bytes — write directly to a file or stream to a CDN. Requires Starter plan or above.

Code Examples

curl -X POST "https://snapapi.tech/v1/render" \
  -H "x-api-key: YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<!DOCTYPE html><html><body style=\"background:#0070f3;color:#fff;font:bold 52px sans-serif;display:flex;align-items:center;justify-content:center;width:1200px;height:630px;margin:0\">My OG Card</body></html>","width":1200,"height":630,"format":"png"}' \
  -o og.png

const html = `<!DOCTYPE html>
<html><head><style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { width: 1200px; height: 630px; display: flex; align-items: center;
         justify-content: center; background: linear-gradient(135deg, #0070f3, #7928ca);
         font-family: sans-serif; color: #fff; padding: 60px; }
  h1 { font-size: 52px; line-height: 1.2; }
  .tag { font-size: 18px; opacity: 0.7; margin-top: 20px; }
</style></head><body>
  <div><h1>My Article Title</h1><div class="tag">mysite.com</div></div>
</body></html>`;

const res = await fetch("https://snapapi.tech/v1/render", {
  method: "POST",
  headers: { "x-api-key": "YOUR_KEY", "Content-Type": "application/json" },
  body: JSON.stringify({ html, width: 1200, height: 630, format: "png" })
});

require("fs").writeFileSync("og.png", Buffer.from(await res.arrayBuffer()));

import requests

html = """<!DOCTYPE html>
<html><head><style>
  body { font-family: sans-serif; background: #0070f3; color: #fff;
         display: flex; align-items: center; justify-content: center;
         width: 1200px; height: 630px; margin: 0; }
  h1 { font-size: 52px; }
</style></head>
<body><h1>My OG Image</h1></body></html>"""

resp = requests.post(
    "https://snapapi.tech/v1/render",
    headers={"x-api-key": "YOUR_KEY"},
    json={"html": html, "width": 1200, "height": 630, "format": "png"}
)

with open("og.png", "wb") as f:
    f.write(resp.content)

Get Free API Key Full API Docs

How to Render HTML to an Image via API

Steps

Code Examples

More Tutorials