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=trueEmbeding 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:
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:
- 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: