Features

August 5, 2022

HTML to Image

Turn your HTML and CSS into images for easy sharing.

Jonathan Markwell
Jonathan Markwell
2 min read
Share this article:

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:

Index

All Features

Free Trial

Designers, law firms and infrastructure engineers trust Urlbox to accurately and securely convert HTML to images at scale. Experience it for yourself.