HTML/CSS API templates

Keep complex image layouts out of application requests

Store HTML, CSS, fonts, assets, browser behavior, and image settings in a versioned template, then render it with a stable ID and named values.

  • HTML and CSS layouts
  • Reusable assets and settings
  • Versioned template IDs
Complex HTML and CSS stored with reusable assets, render settings, and a published template version.
Versioned HTML/CSS template
<main class="report-card">
  <h1>{{title}}</h1>
  <img src="{{chart}}" />
</main>
POST/v1/image/{template_id}
{
  "template_values": {
    "title": "Quarterly results",
    "chart": "https://..."
  }
}
Published version
v12Ready to render
Reusable assets
Interlogo.svgchart.png
Render settings
1200 × 630 · PNG · dark mode

Build your template

Two ways to build, one way to render

Both template types render by ID with named values.

Use cases

Keep image generation code small

Explore image templates

Separate data from design

Keep application data in the request while HTML, CSS, and layout stay in the template.

Versioned releases

Publish template changes deliberately and choose which version an integration renders.

Smaller requests

Send a template ID and its values instead of repeating the full HTML and CSS document.

Reusable render settings

Store image dimensions, fonts, browser behavior, and output settings with the template.

Example conversation using the HCTI MCP integration.
Example conversation
MCP connected with OAuth
  1. You: Use the HCTI MCP to create an HTML/CSS template for a product card with named values for the title, price, and image.
  2. HTML/CSS to Image: I’ll create the API template and return its template ID and first version.
  3. You: Update that HTML/CSS template with the new footer, then render it with these product values.
  4. HTML/CSS to Image: I’ll publish a new version under the same template ID, fill the named values, and return the generated image URL.
  5. You: List the versions of my product-card template and render version 3 with these values.
  6. HTML/CSS to Image: I’ll use version 3 of the saved HTML/CSS template and return the generated image URL.

MCP integration

Use the HCTI API from your AI tools

Connect an MCP-compatible AI client to HCTI through OAuth.

Generate images and PDFs, capture webpages, and work with templates without putting an API key in the prompt.

HTML/CSS template API

Create the design with HTML and CSS, then render it by ID

Save the layout, assets, and image settings in a versioned template. Each image request sends the template ID and named values.

  1. Build the layout

    Create the template from complex HTML and CSS through the API.

  2. Centralize assets and settings

    Keep fonts, images, dimensions, browser options, and output settings with the design.

  3. Publish and render versions

    Release template changes deliberately while integrations continue rendering by stable ID.

Versioned templates

Keep HTML and CSS out of image requests

Send only the template ID and named values. The saved template provides the layout, assets, settings, and selected version.

  • HTML and CSS

    Build detailed layouts without including the full document in every render request.

  • Saved assets and settings

    Keep fonts, images, viewport details, and output options with the template.

  • Published versions

    Publish an update under the same ID and choose which version to render.

Template API workflow
Template API workflow
Layout
HTML + CSS
Shared
Assets · fonts · settings
Release
Versioned template
Render
Stable ID + named values

HTML/CSS API templates

Build the layout once and render it by ID

Keep complex HTML, CSS, assets, fonts, browser settings, and output options in a versioned template while requests send only the values that change.