Starters · 1200 × 630 · 5 layers · 4 variables · social, og
Open Graph card
Site name, tag, a title that shrinks to fit, a description and an accent bar. The design behind POST /v1/og, as a template you can change.
rendering…
the same render with your saved copy
curl -X POST https://api.imageapis.com/v1/images \
-H 'X-API-Key: YOUR_KEY' -H 'Content-Type: application/json' \
-d '{"template": "tpl_…", "variables": {"title": "Ship social cards without a designer", "description": "One request, one hosted image.", "site": "example.com", "tag": "Blog"}}'Make it yours
Copy the starter into your account once; from then on it is a template id you render with new variables. Creating and reading templates is free.
curl -s https://api.imageapis.com/v1/starters/og-card -H 'X-API-Key: YOUR_KEY' | jq .template > og-card.json
curl -X POST https://api.imageapis.com/v1/templates -H 'X-API-Key: YOUR_KEY' \
-H 'Content-Type: application/json' -d @og-card.json
# → { "id": "tpl_…", "object": "template", … }Change any layer by name at render time with modifications, or change the design itself in the editor and save it back with PUT /v1/templates/<id>.
Layers
| Name | Type | x, y | Size | Content |
|---|---|---|---|---|
site | text | 72, 72 | 800 × 40 | {{site}} |
tag | text | 72, 150 | 800 × 32 | {{tag}} |
title | text | 72, 196 | 1056 × 230 | {{title}} |
description | text | 72, 442 | 1056 × 100 | {{description}} |
accent | rect | 0, 616 | 1200 × 14 |
The template
Show the JSON (5 layers)
{
"name": "Open Graph card",
"width": 1200,
"height": 630,
"background": "#0b1220",
"layers": [
{
"name": "site",
"type": "text",
"x": 72,
"y": 72,
"width": 800,
"height": 40,
"text": "{{site}}",
"font": "Inter",
"weight": 600,
"size": 28,
"color": "#a3b1c6",
"valign": "middle"
},
{
"name": "tag",
"type": "text",
"x": 72,
"y": 150,
"width": 800,
"height": 32,
"text": "{{tag}}",
"font": "Inter",
"weight": 700,
"size": 22,
"color": "#6366f1",
"transform": "uppercase",
"letter_spacing": 2
},
{
"name": "title",
"type": "text",
"x": 72,
"y": 196,
"width": 1056,
"height": 230,
"text": "{{title}}",
"font": "Inter",
"weight": 800,
"size": 72,
"color": "#ffffff",
"valign": "bottom",
"line_height": 1.08,
"fit": "shrink",
"max_lines": 3,
"letter_spacing": -1
},
{
"name": "description",
"type": "text",
"x": 72,
"y": 442,
"width": 1056,
"height": 100,
"text": "{{description}}",
"font": "Inter",
"weight": 400,
"size": 30,
"color": "#a3b1c6",
"fit": "shrink",
"max_lines": 2,
"line_height": 1.35
},
{
"name": "accent",
"type": "rect",
"x": 0,
"y": 616,
"width": 1200,
"height": 14,
"fill": "#6366f1"
}
]
}