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 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.

HTML to Image