Examples#

Mint a single URL (cURL)#

curl -X POST https://api.htmlpix.com/v1/url \
  -H "Authorization: Bearer $HTMLPIX_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "k57k8w9n7n9r8b6r2x6f2q9v1h7p4y0c",
    "variables": {
      "title": "Quarterly Report",
      "subtitle": "Q1 2026"
    }
  }'

Batch mint URLs (cURL)#

curl -X POST https://api.htmlpix.com/v1/urls \
  -H "Authorization: Bearer $HTMLPIX_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "items": [
      {
        "templateId": "k57k8w9n7n9r8b6r2x6f2q9v1h7p4y0c",
        "variables": { "title": "Page A" }
      },
      {
        "templateId": "k57k8w9n7n9r8b6r2x6f2q9v1h7p4y0c",
        "variables": { "title": "Page B" }
      }
    ]
  }'

Backend helper#

mint-og-url.tstypescript

export async function mintOgUrl(title: string, subtitle: string) {
const res = await fetch("https://api.htmlpix.com/v1/url", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.HTMLPIX_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    templateId: process.env.HTMLPIX_TEMPLATE_ID,
    variables: { title, subtitle },
  }),
});

if (!res.ok) throw new Error(await res.text());
return res.json() as Promise<{ url: string; expiresAt: number }>;
}

Next.js integration#

Use the helper in generateMetadata to set OG images dynamically:

import { mintOgUrl } from "@/lib/mint-og-url";

export async function generateMetadata({ params }) {
  const { url } = await mintOgUrl("Launch Day", "New feature announcement");

  return {
    openGraph: { images: [url] },
    twitter: { images: [url] },
  };
}

Create a template (cURL)#

curl -X POST https://api.htmlpix.com/v1/templates \
  -H "Authorization: Bearer $HTMLPIX_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Blog Card",
    "description": "OG image for blog posts",
    "code": "export default function Template({ title = \"Hello\" }) {\n  return (\n    <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\", width: \"100%\", height: \"100%\", background: \"#1a1a2e\", color: \"white\", fontSize: 48 }}>\n      {title}\n    </div>\n  );\n}\n\nexport const options = { width: 1200, height: 630, format: \"webp\" };"
  }'

Generate a template with AI (cURL)#

curl -X POST https://api.htmlpix.com/v1/templates/generate \
  -H "Authorization: Bearer $HTMLPIX_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "items": [
      {
        "prompt": "A professional blog post OG image with title and author name",
        "width": 1200,
        "height": 630
      }
    ]
  }'

Generate a template from an image (cURL)#

Pass a reference image as a base64 data URL alongside your custom prompt. No predefined "reproduce" or "inspire" instructions are added — the AI receives your prompt and image as-is.

curl -X POST https://api.htmlpix.com/v1/templates/generate \
  -H "Authorization: Bearer $HTMLPIX_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "items": [
      {
        "prompt": "Create a banner template matching this design with editable title and subtitle",
        "width": 1200,
        "height": 630,
        "imageDataUrl": "data:image/png;base64,iVBORw0KGgo..."
      }
    ]
  }'