Example code

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

Using an AI coding assistant?

Skip writing code entirely. Connect our MCP Server to generate images directly from Cursor or Claude Code.

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:

Send a POST request to https://hcti.io/v1/image
Include your HTML/CSS, a URL, or template values in the request
Authenticate with HTTP Basic Auth
Receive a JSON response with a generated image URL
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.

Language	Recommended starting point
TypeScript / JavaScript	Official npm client
C# / .NET	Official NuGet package

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

Property	Description
Endpoint	`https://hcti.io/v1/image`
Method	`POST`
Content-Type	`application/json`
Authentication	HTTP Basic Auth (User ID + API Key)

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

Name	Type	Description
html†	`String`	HTML to render. Send a snippet or a full HTML document.
css	`String`	CSS for your HTML. When used with `url`, the CSS is injected into the page.
url†	`String`	Fully qualified public URL to screenshot. When passed, it overrides `html`.

Required params

† Either html OR url is required, but not both. css is optional.

Rendering options

Name	Type	Description
block_consent_banners	`Boolean`	When set to `true`, automatically blocks cookie consent banners and popups on websites. Most useful for URL screenshots.
color_scheme	`String`	Set Chrome to render in `light` or `dark` mode. Affects websites using `prefers-color-scheme`.
device_scale	`Double`	Controls the image resolution by adjusting the pixel ratio. Minimum: `0.1`, Maximum: `3`. Higher values increase image quality and file size. For example, `2` will double the resolution.
disable_twemoji	`Boolean`	Twemoji is used by default to render emoji consistently. Set to `true` to use native emoji fonts instead.
full_screen	`Boolean`	When set to true, the API will generate an image of the entire height of the page.
google_fonts	`String`	Google fonts to be loaded. Example: `Roboto`. Multiple fonts can be loaded like this: `Roboto\|Open Sans`
jumbo_max_height	`Integer`	Maximum output height when rendering a jumbo image (up to 80,000px). Must be set together with `jumbo_max_width`. Consumes extra renders.
jumbo_max_width	`Integer`	Maximum output width when rendering a jumbo image (up to 80,000px). Must be set together with `jumbo_max_height`. Consumes extra renders.
max_wait_ms	`Integer`	Sets a maximum time limit (500-10000ms) for waiting before taking the screenshot. Unlike `ms_delay`, this is a cap rather than a fixed delay. Useful when pages load extra irrelevant content.
media_type	`String`	Set Chrome to render using `screen` or `print` CSS media styles.
ms_delay	`Integer`	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.
pdf_options	`Object`	Customize PDF output with page size, margins, scale, and background printing. Use this when you plan to request the generated URL with a `.pdf` extension.
proxy_id	`String`	Route the render’s outbound traffic through one of your HTTP proxies configured in the dashboard. Available on the 10k images/month plan or higher.
render_when_ready	`Boolean`	Set to true to control when the image is generated. Call `ScreenshotReady()` from JavaScript to generate the image.
selector	`String`	A CSS selector for an element on the webpage. We’ll crop the image to this specific element. For example: `section#complete-toolkit.container-lg`
storage_destination_id	`String`	Save rendered files to one of your organization’s storage destinations. Available on the 3,000 images/month plan or higher.
timezone	`String`	Render your image with Chrome set to a specified timezone. Use IANA timezone identifiers like `America/New_York`.
transparent_background	`Boolean`	Set to `true` to render with a transparent background. The existing CSS-based method remains supported.
viewport_height	`Integer`	Set the height of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.
viewport_landscape	`Boolean`	Set Chrome’s viewport to landscape mode.
viewport_mobile	`Boolean`	Set Chrome’s viewport to emulate a mobile device.
viewport_touch	`Boolean`	Set Chrome’s viewport to support touch events.
viewport_width	`Integer`	Set the width of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.

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:

Language	Example
cURL	Terminal example
JavaScript	JavaScript example
TypeScript	TypeScript example
Python	Python example
PHP	PHP example
Ruby	Ruby example
Go	Go example
C# / .NET	C# / .NET example
VB.NET	VB.NET example
Java	Java example
Kotlin	Kotlin example
Rust	Rust example
Elixir	Elixir example
Google Apps Script	Google Apps Script example