Feature

HTML to PNG

·
Jonathan Markwell
·
1 min read

Converting HTML & CSS into a PNG is simple with Urlbox.

It's a little more involved than converting a URL to a PNG. 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 a PNG.</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%20a%20PNG.%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 PNG

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%20a%20PNG.%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 a PNG

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 output formats beyond PNG. You can also render:

  • 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: