Open Graph

GET /render

Navigates a headless Chrome to any URL and returns a screenshot. Results are cached in KV for 30 days. The cache key rolls over weekly so images stay fresh without manual cache-busting.

GET/render?url=https://example.com
GET/render?url=https://example.com&format=png&w=1200&h=630
GET/render?url=https://example.com&selector=.og-card&api_key=ogsk_…

GET /chart

Renders a QuickChart-style Chart.js config to a PNG image using the browser renderer. This is a focused image API for static charts: v1 supports bar and line charts, multiple datasets, labels, and Chart.js color fields.

# Copy-paste curl: --data-urlencode handles the JSON query param
curl -G "https://open-graph.com/chart" \
  --data-urlencode 'c={"type":"bar","data":{"labels":["A","B"],"datasets":[{"label":"Sales","data":[10,20],"backgroundColor":"#4ade80"}]}}' \
  --data-urlencode "w=1200" \
  --data-urlencode "h=630" \
  --output chart.png

GET/chart?c={"type":"bar","data":{"labels":["A","B"],"datasets":[{"label":"Sales","data":[10,20]}]}}
GET/chart?c={"type":"line","data":{"labels":["Jan","Feb"],"datasets":[{"label":"MRR","data":[1200,1800],"borderColor":"#4ade80"}]}}&w=1200&h=630
GET/chart?c={…}&api_key=ogsk_…

GET /template/:name

Renders a saved Satori template to a PNG image. No browser needed — renders from a JSON tree in ~200 ms. Always returns image/png. Missing a required param returns 400 with usage instructions.

GET/template/hero?title=Hello+World
GET/template/hero?title=Hello&subtitle=World&eyebrow=My+Site
GET/template/card?title=Post+Title&api_key=ogsk_…

POST /render-inline

Renders a full template definition from the request body to a PNG image. No saved template needed — send the complete template JSON and params in one request. Always returns image/png. No authentication required.

POST/render-inline
Content-Type: application/json

{
  "template": { /* full TemplateDef object */ },
  "params":   { "title": "Hello World", "subtitle": "..." }
}

# Render an inline template and save the PNG to disk
curl -X POST https://open-graph.com/render-inline \
  -H "Content-Type: application/json" \
  -d '{
    "template": {
      "name": "agency",
      "defaultSize": { "w": 1200, "h": 630 },
      "required": ["title"],
      "defaults": {
        "eyebrow": "Amazon Optimization Agency",
        "site": "bigdetailpage.com"
      },
      "tree": {
        "type": "div",
        "tw": "flex h-full w-full flex-col justify-between",
        "style": {
          "backgroundColor": "#030712",
          "padding": "56px 64px",
          "backgroundImage": "radial-gradient(ellipse at 90% 10%, rgba(245,158,11,0.14) 0%, transparent 60%)"
        },
        "children": [
          {
            "type": "div",
            "tw": "flex flex-col",
            "style": { "flex": "1", "justifyContent": "center" },
            "children": [
              {
                "type": "div",
                "tw": "flex items-center",
                "style": { "marginBottom": "24px" },
                "children": [
                  { "type": "div", "style": { "width": "40px", "height": "4px", "backgroundColor": "#f59e0b", "marginRight": "16px" } },
                  { "type": "span", "style": { "color": "#f59e0b", "fontSize": "36px", "fontWeight": "700", "letterSpacing": "0.08em", "textTransform": "uppercase" }, "text": "{{eyebrow}}" }
                ]
              },
              { "type": "div", "style": { "color": "#ffffff", "fontSize": "92px", "fontWeight": "900", "lineHeight": "1.05", "letterSpacing": "-0.02em", "marginBottom": "28px" }, "text": "{{title}}" },
              { "type": "div", "style": { "color": "#9ca3af", "fontSize": "54px", "lineHeight": "1.35", "maxWidth": "1000px" }, "text": "{{subtitle}}", "when": "subtitle" }
            ]
          },
          {
            "type": "div",
            "tw": "flex items-center justify-between",
            "style": { "borderTopWidth": "1px", "borderTopStyle": "solid", "borderTopColor": "#1f2937", "paddingTop": "24px" },
            "children": [
              { "type": "div", "style": { "color": "#6b7280", "fontSize": "36px", "fontWeight": "600" }, "text": "{{site}}" },
              {
                "type": "div",
                "tw": "flex items-center",
                "children": [
                  { "type": "div", "style": { "width": "14px", "height": "14px", "borderRadius": "50%", "backgroundColor": "#f59e0b", "marginRight": "12px" } },
                  { "type": "span", "style": { "color": "#f59e0b", "fontSize": "34px", "fontWeight": "700" }, "text": "White-Glove Agency" }
                ]
              }
            ]
          }
        ]
      }
    },
    "params": {
      "title": "Your Listings. Expertly Managed.",
      "eyebrow": "Amazon Optimization Agency",
      "subtitle": "Powered by AI, run by humans who know Amazon.",
      "site": "bigdetailpage.com"
    }
  }' \
  --output og.png

Template structure

Templates are JSON objects defining a Satori node tree. Edit them live in the admin UI — no redeploy needed.

{
  "name": "hero",
  "defaultSize": { "w": 1200, "h": 630 },
  "required": ["title"],
  "sampleParams": { "title": "Hello", "subtitle": "World" },
  "defaults": { "eyebrow": "My Site" },
  "tree": {
    "type": "div",
    "tw": "flex h-full w-full flex-col justify-center bg-slate-950 text-white px-20",
    "children": [
      { "type": "div", "tw": "text-2xl text-slate-400", "text": "{{eyebrow}}", "when": "eyebrow" },
      { "type": "div", "tw": "text-7xl font-bold", "text": "{{title}}" },
      { "type": "div", "tw": "text-4xl text-slate-300 mt-6", "text": "{{subtitle}}", "when": "subtitle" }
    ]
  }
}

API keys

API keys control access to the image endpoints. Keys are ogsk_-prefixed 64-character hex strings managed in the admin UI.

# query param — works in <img src> tags
/render?url=https://example.com&api_key=ogsk_abc123…

# Authorization header
curl -H "Authorization: Bearer ogsk_abc123…" /chart?c='{"type":"bar","data":{"labels":["A"],"datasets":[{"data":[1]}]}}'

Cache behaviour

Cached image endpoints share the same KV-backed cache with a 30-day TTL.