Menu
Docs/HTML to Image

HTML to Image

Send any HTML string — get back a rendered image. No templates, no constraints.

POST/v1/html-to-image

Request body

{
  "html": "<div style='padding:40px;background:linear-gradient(135deg,#667eea,#764ba2);color:white;font-size:48px;font-family:Inter'>Hello World</div>",
  "width": 800,
  "height": 400,
  "format": "png"
}
ParameterTypeDefaultDescription
html*string—HTML string to render. Max 1MB. Use inline styles (no external CSS files).
widthnumber800Viewport width in pixels. Min 100, max 3840.
heightnumber600Viewport height in pixels. Min 100, max 2160.
formatenumpngOutput format: png, jpeg, webp.
cachebooleantrueCache result in Redis.
cache_ttlnumber3600Cache TTL in seconds.

HTML sanitization

For security, the following elements and attributes are automatically removed from your HTML before rendering:

RemovedReason
<script> tagsPrevents code execution
<iframe> tagsPrevents external content embedding
<form> tagsPrevents data submission
<object>, <embed> tagsPrevents plugin execution
<base> tagsPrevents URL hijacking
Event handler attributes (onclick, onerror, etc.)Prevents inline JS execution

If your HTML includes <script> tags for dynamic rendering, they will be stripped. Use the Screenshot API with the js parameter instead, or pre-render your HTML before sending it.

Best practices

Use inline styles (style="...") rather than <link> or <style> tags with external URLs. External resources may not load correctly.

  • Include all styles inline or in a <style> tag in the HTML
  • Use system fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
  • Set explicit width/height on the root element to match your requested dimensions
  • For pixel-perfect results, avoid percentage-based layouts
  • Maximum HTML size is 1 MB — compress or simplify if your HTML is larger

Example — social banner

curl -X POST "https://api.snapsharp.dev/v1/html-to-image" \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<!DOCTYPE html><html><body style=\"margin:0\"><div style=\"width:1200px;height:630px;background:#1a1a2e;display:flex;align-items:center;justify-content:center\"><h1 style=\"color:#10b981;font-size:72px;font-family:system-ui\">Hello, World!</h1></div></body></html>",
    "width": 1200,
    "height": 630
  }' -o banner.png

Use cases

  • Certificates & diplomas — generate personalized certificates with recipient names
  • Social banners — create branded social media images programmatically
  • Email headers — dynamic email banner images
  • Invoices & receipts — render HTML invoices as images for previews
  • Marketing collateral — generate ads, flyers, and promotional materials at scale

For recurring designs, create a Custom Template instead — define variables once, then generate images with just a template ID and data.

← OG Image APISite Audit →