Logo of Urlbox screenshot APICreated with Sketch.
Feature

HTML to Image

·
Jonathan Markwell
·
1 min read

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:

Example HTML rendered as an Image

All the rendering options you need

There are dozens rendering options in the Urlbox API.

You can even send JavaScript with your HTML and CSS.

You're not limited to PNG

Urlbox has many image formats beyond PNG. You can also render:

  • PDF
  • JPEG
  • WebP
  • SVG
  • AVIF
  • HTML (after JS has executed)
  • JSON (Coming soon).

More Urlbox Features

Urlbox is powerful with dozens of features for taking screenshots at scale.

If you found this useful you might also want to checkout some of our other popular Urlbox features: