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