HTML-to-image for AI agents

Turn structured agent output into an image

Turn an agent's structured results into HTML and CSS, then render them as a hosted image without running Chromium.

Start free Read the docs
  • Agent-ready API/MCP
  • Chromium rendering
  • Hosted image URL
Real HTML and CSS requests followed by their generated images.
View example Request
POST https://hcti.io/v1/image
html
<div class="p-4 background d-block text-center" style="width: 500px">
  <span class="tweet-text mb-4">
    This is Little Bear. He tolerates baths because he knows how phenomenal his
    floof will appear afterwards. 13/10
  </span>
  <div class="mt-2 p-4">
    <img src="https://docs.htmlcsstoimage.com/assets/images/dog.jpg" class="rounded-circle shadow border mt-4" width="100px">
  </div>
  <h4 class="mt-2">
    WeRateDogs
  </h4>
  <span>@dog_rates</span>
</div>

<!-- Include external CSS, JavaScript or Fonts! -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700" rel="stylesheet">
css
.tweet-text {
  background-color: #fff2ac;
  background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
  font-weight: bolder;
  font-size: 32px;
  font-family: 'Roboto', sans-serif;
  padding: 4px;
}

.background {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='400' cy='400' r='50%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230EF'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='70%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230FF'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='800'/%3E%3Cg fill-opacity='.8'%3E%3Cpath fill='url(%23b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}
google fonts
Roboto
https://hcti.io/v1/image/019fb441-e2ee-706a-8dd4-82f9dfd9b638
Social card with a fun SVG background and highlighted text.

Live demo

Turn HTML and CSS into an image

Edit the HTML and CSS, choose the image settings, and render the result with the same API used in production.

Use cases

Give agent workflows a dependable image renderer

Read the docs

Visual response cards

Turn recommendations, plans, comparisons, and summaries into a compact image a person can review.

Research summaries

Format findings, metrics, and source links as a report image.

Tool output previews

Give agents a consistent way to preview generated layouts before publishing or sending them elsewhere.

Run records

Attach the rendered result to a run log or approval record.

Example conversation using the HCTI MCP integration.
Example conversation
MCP connected with OAuth
  1. You: Use the HCTI MCP to turn this HTML announcement card into a 1200 × 630 image.
  2. HTML/CSS to Image: I’ll render the supplied HTML and CSS in Chromium at 1200 × 630 and return the hosted image URL.
  3. You: Make a second version with a dark background and larger headline.
  4. HTML/CSS to Image: I’ll update the styles while keeping the same content and dimensions, then render the new version.
  5. You: Can you make a portrait version for a story post too?
  6. HTML/CSS to Image: Yes. I’ll adjust the layout for a portrait viewport and return a separate 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.

How it works

From markup to a finished image

  1. Send HTML and CSS

    Authenticate from your server and submit the content with any viewport, format, or browser settings.

  2. Chromium renders the design

    The API loads the markup, styles, fonts, and assets in a managed browser environment.

  3. Use the image URL

    Embed the hosted result, download the file, or save it in your own storage and application records.

HTML to image API

Render web content without running a browser

Send HTML and CSS directly to the API. Headless Chromium loads your content, applies the requested dimensions and browser settings, and returns a hosted image URL.

  • HTML and CSS input

    Send complete markup and styles directly, including links to external fonts, stylesheets, and images.

  • Chromium rendering

    Render modern browser layouts without installing, updating, or scaling Chromium yourself.

  • Viewport and crop controls

    Set viewport size and device scale, or crop the result to a CSS selector.

  • Page environment

    Choose light or dark mode, timezone, and screen or print media.

POST https://hcti.io/v1/image request example.
Request
POST https://hcti.io/v1/image
{
"html": "<article class='card'>...</article>",
"css": ".card { display: grid; width: 1200px; }",
"viewport_width": 1200,
"viewport_height": 630
}

Web-native rendering

Build images with browser technologies

Use the same HTML, CSS, web fonts, and design system as your application.

HTML for structure

Use semantic markup, tables, SVG, and reusable components to define the content of each image.

CSS for presentation

Apply layouts, responsive styles, web fonts, gradients, and the same design system used by your application.

Images ready to use

Receive a hosted image URL for product UI, social posts, email, reports, and automated publishing workflows.

Ready to render?

Create your first image from HTML and CSS

Send HTML and CSS to the API and receive a hosted image URL without running browser infrastructure.

Start free Read the docs

HTML-to-image workflows

HTML-to-image workflows by team

See how developers, marketers, sales teams, and AI agents turn application data into images.

Developers

Generate images from application HTML and CSS without maintaining a browser service.

View workflow

Marketing

Generate branded campaign, social, and personalized images from live data.

View workflow

Sales

Create personalized account, proposal, and outreach images from sales data.

View workflow