Html to image

html based image generation skills

Install

npx -y skills add html2png/skills --skill html-to-image

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Generate crisp, high-quality images with perfect typography and precise geometric layouts using HTML/CSS. Use when creating social cards, diagrams, certificates, UI mockups, code screenshots, or any image requiring sharp text rendering, exact alignment, or vector-like precision. AI excels at designing symmetric, pixel-perfect layouts as HTML rather than generating raster images directly. Supports Tailwind CSS, Google Fonts, icon libraries, and any web-based design resource.

SKILL.md

4.2 KB, as published. Nobody here has run it

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.