Example code

Use these examples to render HTML/CSS, webpage screenshots, PDFs, and reusable templates from your application.

Live demo Get an API Key

Works with any programming language

The HTML/CSS to Image API is a simple REST API. If your language can make an HTTP request, it can generate images and PDFs.

We provide example code for popular languages, but the API works the same way everywhere:

1. Send a POST request to https://hcti.io/v1/image
2. Include your HTML/CSS, a URL, or template values in the request
3. Authenticate with HTTP Basic Auth
4. Receive a JSON response with a generated image URL
5. Use the returned URL as PNG, JPG, WebP, or PDF

Start with a client library

If you are using TypeScript, JavaScript, or .NET, start with the official clients. They include helpers for authentication, JSON requests, templates, and signed image URLs.

The other examples stay close to each language’s standard HTTP and JSON tools, adding a popular client library only when the language does not include one.

Common API requests

Create an image

Request body (JSON)

{
  "html": "<div class='box'>Hello, world!</div>",
  "css": ".box { padding: 20px; background: #03B875; color: white; }",
  "google_fonts": "Roboto",
  "device_scale": 2
}

Response

{
  "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d",
  "id": "be4c5118-fe19-462b-a49e-48cf72697a9d"
}

The returned URL is your generated image. Append .png, .jpg, .webp, or .pdf to get a specific format.

Render a reusable template

Use a template when the design stays the same and only the data changes.

curl -X POST https://hcti.io/v1/image/t-your-template-id \
  -u "$HCTI_USER_ID:$HCTI_API_KEY" \
  -H 'Content-Type: application/json' \
  -d '{
    "template_values": {
      "title": "Quarterly report",
      "stats": {
        "revenue": "$48k",
        "growth": "12%"
      }
    }
  }'

Objects inside template_values should be encoded as JSON. If you use form data instead of JSON, send template_values as a JSON-encoded string.

Quick reference with cURL

The simplest way to test a direct HTML/CSS render:

curl -X POST https://hcti.io/v1/image \
  -u "$HCTI_USER_ID:$HCTI_API_KEY" \
  -H 'Content-Type: application/json' \
  -d '{"html": "<h1>Hello!</h1>"}'

Available parameters

The examples send JSON. The API also accepts form data; when using form data, nested objects such as pdf_options should be JSON encoded.

Create image body parameters

Rendering options

When rendering templated images, send a POST request to https://hcti.io/v1/image/:template_id with template_values as JSON:

{
  "template_values": {
    "title": "Quarterly report",
    "subtitle": "Q4 summary"
  }
}

For the full list of request, template, and generated image URL parameters, see Using the API and Image Templates.

Choose your language

Select your programming language to see a complete working example: