Creating an image

Converting HTML/CSS to an Image (jpg, png, webp) with the API. Renders exactly like Google Chrome.

Learn to use the API to generate images from your HTML and CSS.

Converting HTML/CSS to an image.

Try it out yourself with the live demo.

How it works

To create an image, send an HTTP POST request to the /v1/image endpoint. This can be done with any language or framework. We have code samples in many languages.

The API will return JSON with the URL to your newly created image.

{
"url": "https://hcti.io/v1/image/6e253850-736c-487a-8dc8-b6950ca94703"
}

By default, this URL will return a png. See File formats for other options.

Take a look at our examples for ways to make use of the API.

post
Create an image

https://hcti.io/v1/image
Create a new image
Request
Response
Request
Headers
Authentication
required
string
HTTP Basic Authentication. Your username is your User ID and your password is your API Key. See Authentication for details.
Body Parameters
html
required
string
Your HTML markup. Can include link tags to external CSS or JavaScript.
css
optional
string
CSS styles for your image.
google_fonts
optional
string
Google fonts to be loaded. Example: Roboto. Multiple fonts delimited by |. Roboto|Open Sans
ms_delay
optional
number
The number of milliseconds the API should delay before generating the image. This is useful when waiting for JavaScript. We recommend starting with 500. Large values slow down the initial render time.
url
optional
string
The fully qualified URL to a public webpage. Such as https://htmlcsstoimage.com. When passed this will override the html param and will generate a screenshot of the url.
viewport_width
optional
number
Set the width of Chrome's viewport. This will disable automatic cropping.
viewport_height
optional
number
Set the height of Chrome's viewport. This will disable automatic cropping.
Response
200: OK
Image successfully created
example_response.json
{
"url": "https://hcti.io/v1/image/6e253850-736c-487a-8dc8-b6950ca94703"
}
400: Bad Request
Missing parameter
bad_request.json
{
"error": "Bad Request",
"statusCode": 400,
"message": "HTML is Required"
}
401: Unauthorized
Invalid authorization token
bad_token.json
{
"error": "Unauthorized",
"statusCode": 401,
"message": "Bad username or password."
}
429: Too Many Requests
Plan limit exceeded
{
"statusCode": 429,
"error": "Plan limit exceeded",
"message": "You've used 3102 of your 3000 renders. Upgrade via the Dashboard: https://htmlcsstoimage.com/dashboard"
}

Visit this page for more information about using Google Fonts.

Designing your image

We recommend using CodePen when writing your HTML/CSS to quickly preview what your image will look like when rendered. It makes debugging easy. Here's an example where we used CodePen to design a Social Graph image.

Use CodePen to test your HTML/CSS

Learn more

Take a look at the following pages for more details on how to generate images.

Get help from us

Tell us what you're building. We're experts at generating images and will help you get your project up and running quickly with the API.

Email: [email protected]. We reply fast!