HTML to Image

Converting HTML & CSS into an image is simple with Urlbox.

It's a little more involved than converting a URL to an Image. You need to send Urlbox your HTML and CSS.

First you need to prepare your HTML and CSS. We've added width, height and retina options here so it renders nicely.

{
  "html": "<html><head></head><body><h1>Hello World</h1><p>This HTML has been turned into an Image.</p></body></html>",
  "css": "body{text-align:center;padding: 10px}",
  "width": "500",
  "height": "200",
  "retina": true
}

All that needs to be URI encoded for Urlbox to process it as a GET request:

https://api.urlbox.io/v1/[API_KEY]/png?html=%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3Ch1%3EHello%20World%3C%2Fh1%3E%3Cp%3EThis%20HTML%20has%20been%20turned%20into%20an%20Image.%3C%2Fp%3E%3C%2Fbody%3E%3C%2Fhtml%3E&css=body%7Btext-align%3Acenter%3Bpadding%3A%2010px%7D&width=500&height=200&retina=true

Embeding a dynamiclly generated image

Then you can literally create an HTML image tag with that as the src and it will render:

<img src="https://api.urlbox.io/v1/[API_KEY]/png?html=%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3Ch1%3EHello%20World%3C%2Fh1%3E%3Cp%3EThis%20HTML%20has%20been%20turned%20into%20an%20Image.%3C%2Fp%3E%3C%2Fbody%3E%3C%2Fhtml%3E&css=body%7Btext-align%3Acenter%3Bpadding%3A%2010px%7D&width=500&height=200&retina=true" />

Like this: