YOUR TEMPLATES.INFINITE IMAGES.AI Template Generation for Developers

Pick or generate a incredible template design. Pass your data. Get an image URL. One API call.

FORMAT

REACT JSX

AVG RENDER

<200ms

SERVED FROM

CDN

Browse Templates Try It Now

OG cards, ads, social posts & more99+ TEMPLATES INCLUDED

99+ TEMPLATES INCLUDED

Generate custom React templates with AI or customize our hand-crafted examples. Pass variables and render via API.

Try It Now

Barista's Choice OG

custom

Try It Now

TikTok Bold Listicle

custom

Try It Now

Monochrome Tech Spec

custom

Try It Now

Monolith Security

custom

Try It Now

Festival DB Artist Card

custom

Try It Now

NYC Brutalist Vertical

custom

Try It Now

Luxury Estate Dark

custom

Try It Now

Category Page

Open Graph

Try It Now

Forest Playful Post

custom

Try It Now

Noir Gastronomy

custom

Try It Now

Testimonial Social Proof

Template

Try It Now

Folk Horizon

custom

Try It Now

Email Hero

Describe It. We Build It.

No template fits? Type what you need in plain English. AI generates a production-ready template in seconds.

Try AI Generation

THREE STEPS. THAT'S IT.

From template to image in one API call.

Choose a template

Browse 99+ ready-made templates or describe what you need, our AI generates one for you.

// Use a starter or let AI create one
"A blog OG image with title and author"

Call the API

Send your data as JSON. Title, image, colors, whatever your template needs.

POST /v1/url
{
  "templateId": "tmpl_abc",
  "variables": {
    "title": "Hello World"
  }
}

Get your image

Receive a CDN-cached URL. Drop it into og:image, emails, Slack, anywhere.

// Response
{
  "url": "https://image.htmlpix.com/..."
}

SEE IT IN ACTION

Write a React component. Get a image. Try it yourself.

Your JSX Template

architect-grid-template.tsx

export default function Template({
  title = "Pick a Template. Get an Image.",
  subtitle = "AI-powered template generation...",
  badge = "HTMLPIX",
  accentColor = "#ff4d00",
  bgColor = "#0f0f0f",
}) {
  return (
    <div style={{
      display: "flex", width: "100%", height: "100%",
      backgroundColor: bgColor,
    }}>
      {/* Blueprint grid background */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "linear-gradient(
          rgba(245,240,232,0.04) 1px, transparent 1px),
          linear-gradient(90deg,
          rgba(245,240,232,0.04) 1px, transparent 1px)",
        backgroundSize: "60px 60px",
      }} />

      <div style={{ padding: "64px 72px" }}>
        <span style={{ color: accentColor,
          letterSpacing: "0.2em",
        }}>{badge}</span>

        <h1 style={{ fontFamily: "Bebas Neue",
          fontSize: 96, color: "#f5f0e8",
        }}>{title}</h1>

        <p style={{ fontFamily: "Space Mono",
          fontSize: 22, color: "rgba(245,240,232,0.5)",
        }}>{subtitle}</p>
      </div>
    </div>
  );
}

...

API

OG Card