The ogdynamic Render API reference.

You do not need an API key to render images. The API key is only required to manage canvases and stored renders programmatically.

# The canvas image URL — dynamic layers swap per request
https://cdn.ogdynamic.com/c/01m3ef2xmqeapjrqnw6fhs5ye6?title=Prestige+GMT+Automatic&price=%242400

# Fetch it as PNG
curl "https://cdn.ogdynamic.com/c/01m3ef2xmqeapjrqnw6fhs5ye6?title=Prestige+GMT&format=png" -o og.png

All /api/v1 endpoints authenticate with an OAuth bearer token. Send it in the Authorization header and request only the scopes your client needs:

curl https://ogdynamic.com/api/v1/me \
  -H "Authorization: Bearer {token}"

A canvas is a designed document — dimensions, a background fill, and a layer tree. Canvases are created and edited in the visual editor; the API reads them and exposes each dynamic layer as an overridable field.

curl https://ogdynamic.com/api/v1/canvases \
  -H "Authorization: Bearer {token}"

# Optional exact-match filters
curl "https://ogdynamic.com/api/v1/canvases?status=public&width=1200" \
  -H "Authorization: Bearer {token}"

{
  "data": [
    {
      "id": "01m3ef2xmqeapjrqnw6fhs5ye6",
      "user_id": 1,
      "name": "Product card",
      "width": 1200,
      "height": 630,
      "status": "public",
      "image_url": "https://cdn.ogdynamic.com/c/01m3ef2xmqeapjrqnw6fhs5ye6",
      "created_at": "2026-10-01T09:12:00.000000Z",
      "updated_at": "2026-10-20T17:40:00.000000Z"
    }
  ]
}

{
  "data": {
    "id": "01m3ef2xmqeapjrqnw6fhs5ye6",
    "user_id": 1,
    "name": "Product card",
    "width": 1200,
    "height": 630,
    "status": "public",
    "background": { "kind": "solid", "color": "#0f172a" },
    "items": [ "… the full layer tree …" ],
    "image_url": "https://cdn.ogdynamic.com/c/01m3ef2xmqeapjrqnw6fhs5ye6",
    "override_fields": [
      { "field": "title", "name": "Title", "type": "text", "default": "Prestige GMT Automatic" },
      { "field": "price", "name": "Price", "type": "text", "default": "$2400" },
      { "field": "cover", "name": "Cover image", "type": "image", "default": "https://example.com/watch.jpg" }
    ],
    "created_at": "2026-10-01T09:12:00.000000Z",
    "updated_at": "2026-10-20T17:40:00.000000Z"
  }
}

Every public canvas renders on a permanent URL, served by the ogdynamic image service — the same engine the editor's live preview uses, so preview and output are pixel-identical. No authentication: anyone with the URL can fetch the image.

https://cdn.ogdynamic.com/c/{canvasId}?format=webp&title=Hello&_updatedAt=1750000000

curl -X POST https://cdn.ogdynamic.com/c/01m3ef2xmqeapjrqnw6fhs5ye6 \
  -H "Content-Type: application/json" \
  -d '{"title": "Prestige GMT Automatic", "price": "$2400"}'

Private canvases have no public image URL — their documents leave the app only through stored renders (below). Renders are deterministic: an identical document and parameters always produce byte-identical images, which is what makes the immutable _updatedAt caching safe.

Query parameters render one-off images on the fly. When you want a stable, shareable URL for an exact composition — personalized campaign images, saved social posts, records you list later — store it as a render.

curl -X POST https://ogdynamic.com/api/v1/renders \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json" \
  -d '{
    "canvasId": "01m3ef2xmqeapjrqnw6fhs5ye6",
    "override": {
      "title": { "content": "Prestige GMT Automatic", "color": "#635bff" },
      "price": { "content": "$2400" },
      "cover": { "src": "https://cdn.shop.example/watch.jpg" }
    }
  }'

{
  "data": {
    "id": "9f2c4a1b0d7e4f2a8c3b5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3d4e5f6a",
    "canvas_id": "01m3ef2xmqeapjrqnw6fhs5ye6",
    "image_url": "https://cdn.ogdynamic.com/c/01m3ef2xmqeapjrqnw6fhs5ye6?_key=9f2c4a1b…",
    "payload": {
      "title": { "content": "Prestige GMT Automatic", "color": "#635bff" },
      "price": { "content": "$2400" },
      "cover": { "src": "https://cdn.shop.example/watch.jpg" }
    },
    "created_at": "2026-10-21T10:02:00.000000Z",
    "updated_at": "2026-10-21T10:02:00.000000Z"
  }
}

# All of your renders, newest first
curl https://ogdynamic.com/api/v1/renders \
  -H "Authorization: Bearer {token}"

# Renders of one canvas
curl "https://ogdynamic.com/api/v1/renders?canvasId=01m3ef2xmqeapjrqnw6fhs5ye6" \
  -H "Authorization: Bearer {token}"

{
  "data": [
    {
      "id": "9f2c4a1b0d7e4f2a8c3b5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3d4e5f6a",
      "canvas_id": "01m3ef2xmqeapjrqnw6fhs5ye6",
      "image_url": "https://cdn.ogdynamic.com/c/01m3ef2xmqeapjrqnw6fhs5ye6?_key=9f2c4a1b…",
      "payload": { "title": { "content": "Prestige GMT Automatic", "color": "#635bff" } },
      "canvas": { "id": "01m3ef2xmqeapjrqnw6fhs5ye6", "name": "Product card" },
      "created_at": "2026-10-21T10:02:00.000000Z",
      "updated_at": "2026-10-21T10:02:00.000000Z"
    }
  ]
}

curl -X DELETE https://ogdynamic.com/api/v1/renders/9f2c4a1b… \
  -H "Authorization: Bearer {token}"
# → 204 No Content

Subscribe a https URL to be notified the moment a canvas or render changes. Every delivery is signed with X-Webhook-Signature: sha256={hmac_sha256(raw_body, secret)} — the signing secret is returned exactly once, when you subscribe. Failing targets are retried with backoff and auto-revoked after repeated failures.

curl -X POST https://ogdynamic.com/api/v1/webhooks/subscribe \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json" \
  -d '{
    "event": "render.created",
    "target_url": "https://hooks.example.com/ogdynamic"
  }'

Also available: GET /api/v1/webhooks lists your subscriptions (the secret is never included), and DELETE /api/v1/webhooks/{webhook} unsubscribes idempotently. All three require the webhooks:manage scope — this is the transport behind the Zapier integration.

Every canvas is a single JSON object — the design system the editor persists, templates ship, and the render service consumes. Width and height are the viewport in pixels (1–1920, up to 1080p resolution); background and every node carry a Fill that keeps all three branches populated, with kind selecting the active one:

{
  "width": 1200,
  "height": 630,
  "background": {
    "kind": "gradient",
    "color": "#0f172a",
    "gradient": {
      "type": "linear",
      "angle": 135,
      "stops": [
        { "color": "#635bff", "position": 0 },
        { "color": "#0f172a", "position": 100 }
      ]
    },
    "image": { "source": null }
  },
  "items": [
    {
      "id": "tpl-title",
      "type": "text",
      "name": "Title",
      "width": 940,
      "height": 240,
      "style": { "position": "absolute", "left": 80, "top": 196 },
      "text": "Prestige GMT Automatic",
      "dynamic": true,
      "fieldId": "title",
      "children": [],
      "background": { "kind": "solid", "color": "transparent", "gradient": null, "image": { "source": null } }
    }
  ]
}

Node fields

Positioning & styles

There is no first-class x/y — position is style.left / style.top. Absolute layers anchor to the viewport; static layers participate in flex flow (full-bleed bands use "width": "100%" inside a flex-column group). Styles are camelCase CSS property names passed verbatim to the rendering engine — bare numbers mean px:

fontFamily must be one of the render service's registered families — 67 typefaces including Inter, Geist, Space Grotesk, Playfair Display, Bebas Neue, and JetBrains Mono. Dynamic layers apply recursively at any depth: mark a node dynamic: true with a fieldId, and ?{fieldId}=… on the image URL swaps its content at render time. Param ids are lowercase [a-z0-9_] without a leading underscore — the _ prefix is reserved for app parameters like _updatedAt.