HTML to Image API

Convert HTML/CSS to PNG, WebP, or PDF via html2png.dev.

Endpoint

POST https://html2png.dev/api/convert

Request

Send HTML as raw body or JSON:

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630" \
  -H "Content-Type: text/html" \
  -d '<div style="padding: 40px;">Content</div>'

curl -X POST "https://html2png.dev/api/convert" \
  -H "Content-Type: application/json" \
  -d '{"html": "<div>...</div>", "width": 1200}'

Parameters

| Parameter | Type | Default | Description | | ------------------- | ------ | -------- | ----------------------- | | html | string | required | HTML content | | width | int | 1200 | Width in px | | height | int | 630 | Height in px | | format | string | png | png, webp, pdf | | deviceScaleFactor | float | 2 | Retina scale (1-4) | | delay | int | 0 | Wait ms before capture | | selector | string | body | CSS selector to capture | | omitBackground | bool | false | Transparent bg | | colorScheme | string | - | light or dark | | zoom | float | 1 | Viewport zoom |

Response

{
  "success": true,
  "url": "https://html2png.dev/api/blob/abc.png",
  "format": "png",
  "cached": false
}

CDN Resources

Use these CDNs for high-quality designs:

Tailwind CSS (preferred):

<script src="https://cdn.tailwindcss.com"></script>

Google Fonts:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>

Icons (use instead of inline SVGs):

Lucide: https://unpkg.com/lucide@latest
Font Awesome: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css

Images:

Unsplash: https://images.unsplash.com/photo-xxx
Any direct image URL

Example with Tailwind + Fonts + Icons

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/lucide@latest"></script>
  </head>
  <body
    class="bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center"
    style="width: 1200px; height: 630px; font-family: 'Inter', sans-serif;"
  >
    <div
      class="bg-white/10 backdrop-blur-lg rounded-2xl p-12 text-white text-center"
    >
      <i data-lucide="sparkles" class="w-16 h-16 mx-auto mb-4"></i>
      <h1 class="text-6xl font-extrabold mb-4">Hello World</h1>
      <p class="text-2xl opacity-90">Beautiful generated image</p>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

Request with delay for resources to load:

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&delay=1000&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>...</html>'

Key Tips

Always use deviceScaleFactor=2 or higher for quality
Use delay=1000-2000 when loading fonts/icons/images
Any CSS works: grid, flex, transforms, filters, animations
JavaScript executes (use delay for rendering)

Website Screenshot

POST https://html2png.dev/api/screenshot

curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "width": 1280, "fullPage": true}'

Extra params: fullPage (bool), userAgent (string)

Rate Limits

50 requests/hour per IP. Cached results are free.