Skip to content

HTML to image API

POST HTML and CSS to https://render.cuelark.com/v1/screenshot with the html field and a viewport size, and get back a PNG, JPEG or WebP image of it.

Twice the pixels, for sharp docs and slides

Captured by Chromium on Cloudflare. Private and internal addresses are blocked, and nothing is stored. Free: 10 renders a day per IP.

Your screenshot appears here.

Request

bash
curl -X POST https://render.cuelark.com/v1/screenshot \
  -H "content-type: application/json" \
  -d '{"html":"<h1 style=\"font:64px system-ui\">Hello</h1>","width":1200,"height":630,"format":"png"}' \
  -o card.png

HTML image or the built-in card?

For simple title-and-description cards, the /v1/og endpoint is faster, takes no browser time and isn't metered. Use HTML to image when you need your own layout, images, web fonts or CSS effects.

Tips

  • Set width and height to the image size you want, and make the body fill 100vh.
  • Use absolute URLs for images and fonts.
  • Set "retina": true for 2x pixels on high-DPI screens.

Do it from code or an AI assistant

The same renderer is an HTTP API and an MCP tool, so this exact result can come from a script or from Claude, ChatGPT or Cursor. See the Render API reference and the MCP setup guide.

HTTP API

bash
curl -X POST https://render.cuelark.com/v1/screenshot -H "content-type: application/json" \
  -d '{"html":"<div style=\"font-family:system-ui;padding:48px;background:linear-gradient(135deg,#3074fe,#8b5cf6);color:#fff;height:100vh;box-sizing:border-box\"><h1 style=\"font-size:56px;margin:0\">Certificate of completion</h1><p style=\"font-size:28px\">Awarded to Jordan Lee · Nov 2026</p></div>","width":1200,"height":630,"format":"png"}' -o shot.png

MCP tool call: screenshot_url

json
{
  "method": "tools/call",
  "params": {
    "name": "screenshot_url",
    "arguments": {
      "html": "<div style=\"font-family:system-ui;padding:48px;background:linear-gradient(135deg,#3074fe,#8b5cf6);color:#fff;height:100vh;box-sizing:border-box\"><h1 style=\"font-size:56px;margin:0\">Certificate of completion</h1><p style=\"font-size:28px\">Awarded to Jordan Lee · Nov 2026</p></div>",
      "width": 1200,
      "height": 630,
      "format": "png"
    }
  }
}

Frequently asked questions

Can I use Tailwind or Google Fonts?

Yes. Load them with a <script> or <link> tag in your HTML. Any public CDN works.

Is it the same quota as screenshots?

Yes. HTML to image is a screenshot of your HTML, so it counts as one browser render.

Related free tools from Cuelark

Updated November 10, 2026 by the Cuelark Team.