Dynamic Images

Turn data into beautiful, shareable images.

Dynamic images are generated programmatically from structured data. Instead of designing each image manually, you create a template and populate it with data - names, dates, stats, quotes, or any other content.

Generate personalized certificates for course completions, achievements, or recognition.

<div style="width: 800px; height: 600px; background: white; border: 20px solid #1e40af; padding: 60px; text-align: center; font-family: Georgia, serif;">
  <h2 style="color: #1e40af; font-size: 24px; margin: 0;">Certificate of Completion</h2>
  <p style="font-size: 18px; color: #666; margin-top: 40px;">This certifies that</p>
  <h1 style="font-size: 42px; color: #111; margin: 20px 0;">Jane Doe</h1>
  <p style="font-size: 18px; color: #666;">has successfully completed</p>
  <h3 style="font-size: 28px; color: #1e40af; margin: 20px 0;">Introduction to Web Development</h3>
  <p style="font-size: 16px; color: #666; margin-top: 60px;">December 30, 2025</p>
</div>

Turn job data into shareable images for social media and job boards.

View source on CodePen

Generate shareable quote images from user content.

View source on CodePen

Create custom event invitations with recipient names, dates, and event details.

Turn metrics and rankings into visual graphics for sharing.

Generate product cards, sale announcements, or promotional graphics from product data.

For dynamic images, Templates are the most efficient approach. Define the design once with variables, then generate images by passing just the dynamic data.

You can write the HTML/CSS yourself or build the design visually with the Template Editor. If your template uses editor variables, the Variables guide explains preview data, fallback behavior, and template_values.

curl -X POST https://hcti.io/v1/template -u 'UserID:APIKey' \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"padding:40px;background:#4f46e5;color:white;font-family:sans-serif;\"><h1>{{title}}</h1><p>By {{author}}</p></div>"
  }'

curl -X POST https://hcti.io/v1/image/t-abc123 -u 'UserID:APIKey' \
  -H "Content-Type: application/json" \
  -d '{
    "template_values": {
      "title": "My Amazing Article",
      "author": "Jane Doe"
    }
  }'

For multiple HTML/CSS renders, send a batch request with shared options and individual variations. Keep the number of variations within your plan’s batch limit.

curl -X POST https://hcti.io/v1/image/batch -u 'UserID:APIKey' \
  -H "Content-Type: application/json" \
  -d '{
    "default_options": {
      "css": "body { padding: 40px; background: #4f46e5; color: white; font-family: sans-serif; }"
    },
    "variations": [
      { "html": "<h1>Article 1</h1><p>By Jane</p>" },
      { "html": "<h1>Article 2</h1><p>By John</p>" },
      { "html": "<h1>Article 3</h1><p>By Alex</p>" }
    ]
  }'

1. Use web-safe fonts or Google Fonts - Ensure your fonts render correctly. Learn about Google Fonts.

2. Design at 2x resolution - Images are rendered at device_scale: 2 by default for crisp display.

3. Test with real data - Use actual content lengths to ensure your layout handles edge cases.

4. Keep file sizes reasonable - Very large images take longer to generate and load.

5. Use CSS flexbox/grid - Modern CSS layouts work great for dynamic content that varies in length.

<div style="width: 600px; padding: 60px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); font-family: Georgia, serif;">
  <blockquote style="font-size: 28px; line-height: 1.6; color: #333; margin: 0;">
    "{{quote}}"
  </blockquote>
  <p style="margin-top: 30px; font-size: 18px; color: #666;">
    — {{author}}
  </p>
</div>

<div style="width: 500px; padding: 50px; background: #1a1a2e; color: white; text-align: center; font-family: sans-serif;">
  <p style="font-size: 14px; letter-spacing: 3px; color: #e94560;">YOU'RE INVITED</p>
  <h1 style="font-size: 36px; margin: 20px 0;">{{event_name}}</h1>
  <p style="font-size: 18px; color: #ccc;">{{date}} at {{time}}</p>
  <p style="font-size: 16px; color: #888; margin-top: 30px;">{{location}}</p>
</div>