API Endpoint

Developer card with a mono method+path pill (POST /v1/render), status note and param chips — swap endpoint, response, params and accent.

Type: Image
Format: Open Graph · 1200×630
Orientation: Landscape

Variables

Open in editor

Free template · opens in the editor, no account required.

Customize API Endpoint

API Endpoint is a ready-to-render SaaS / dev tools image design formatted for Open Graph · 1200×630 and support for variables. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

16 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

eyebrowText

API REFERENCE

headlineText

Render video with a single request

methodText

POST

pathText

/v1/render

statusText

202 Accepted

resultNoteText

— returns a render job you can poll, or await via webhook.

param1Text

template

param2Text

variables

param3Text

webhookUrl

latencyText

~1.2s median

brandText

zvid api

monogramText

accentColor

#4CD4CE

inkColorColor

#0D1117

headingColorColor

#F2F5F7

subColorColor

#8B94A3

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "type": "image",
  "name": "img-saas-api-endpoint",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0D1117",
  "variables": {
    "eyebrow": "API REFERENCE",
    "headline": "Render video with a single request",
    "method": "POST",
    "path": "/v1/render",
    "status": "202 Accepted",
    "resultNote": "— returns a render job you can poll, or await via webhook.",
    "param1": "template",
    "param2": "variables",
    "param3": "webhookUrl",
    "latency": "~1.2s median",
    "brand": "zvid api",
    "monogram": "Z",
    "accent": "#4CD4CE",
    "inkColor": "#0D1117",
    "headingColor": "#F2F5F7",
    "subColor": "#8B94A3"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1200,
      "height": 630,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1200' height='630' viewBox='0 0 1200 630' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#0F1620'/><stop offset='0.55' stop-color='#0D1117'/><stop offset='1' stop-color='#0A0D12'/></linearGradient><radialGradient id='glow' cx='0.9' cy='0.08' r='0.7'><stop offset='0' stop-color='#4CD4CE' stop-opacity='0.28'/><stop offset='1' stop-color='#4CD4CE' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='630' fill='url(#bg)'/><rect width='1200' height='630' fill='url(#glow)'/><rect x='24' y='24' width='1152' height='582' rx='28' fill='none' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1.5'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 80,
      "width": 500,
      "anchor": "top-left",
      "track": 4,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "letterSpacing": "0.32em",
        "color": "#4CD4CE"
      }
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 116,
      "width": 840,
      "anchor": "top-left",
      "track": 4,
      "text": "{{headline}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "44px",
        "fontWeight": "700",
        "lineHeight": "1.08",
        "letterSpacing": "-0.02em",
        "color": "#F2F5F7"
      }
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 262,
      "width": 980,
      "height": 108,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='980' height='108' viewBox='0 0 980 108' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='980' height='108' rx='22' fill='#12181F' stroke='#FFFFFF' stroke-opacity='0.09' stroke-width='1.5'/><rect x='18' y='22' width='120' height='64' rx='14' fill='{{accent}}'/><text x='78' y='63' font-family='IBM Plex Mono, monospace' font-size='27' font-weight='700' fill='{{inkColor}}' text-anchor='middle' letter-spacing='1'>{{method}}</text><text x='164' y='66' font-family='IBM Plex Mono, monospace' font-size='40' font-weight='600' fill='{{headingColor}}'>{{path}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 400,
      "width": 900,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "IBM Plex Mono"
      },
      "html": "<div style='font-size:23px; font-weight:500; line-height:1.45; color:{{subColor}};'><span style='color:{{accent}}; font-weight:600;'>{{status}}</span> {{resultNote}}</div>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 476,
      "width": 660,
      "height": 46,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='660' height='46' viewBox='0 0 660 46' xmlns='http://www.w3.org/2000/svg'><g font-family='IBM Plex Mono, monospace' font-size='18' font-weight='500'><rect x='0' y='0' width='190' height='46' rx='12' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.12' stroke-width='1'/><circle cx='24' cy='23' r='4' fill='{{accent}}'/><text x='40' y='29' fill='#C4CAD3'>{{param1}}</text><rect x='210' y='0' width='190' height='46' rx='12' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.12' stroke-width='1'/><circle cx='234' cy='23' r='4' fill='{{accent}}'/><text x='250' y='29' fill='#C4CAD3'>{{param2}}</text><rect x='420' y='0' width='210' height='46' rx='12' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.12' stroke-width='1'/><circle cx='444' cy='23' r='4' fill='{{accent}}'/><text x='460' y='29' fill='#C4CAD3'>{{param3}}</text></g></svg>"
    },
    {
      "type": "SVG",
      "x": 1128,
      "y": 476,
      "width": 216,
      "height": 46,
      "anchor": "top-right",
      "track": 5,
      "svg": "<svg width='216' height='46' viewBox='0 0 216 46' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='216' height='46' rx='23' fill='{{accent}}' fill-opacity='0.12' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1.2'/><circle cx='27' cy='23' r='9' fill='none' stroke='{{accent}}' stroke-width='2'/><path d='M27 18 L27 23 L31 26' fill='none' stroke='{{accent}}' stroke-width='2' stroke-linecap='round'/><text x='48' y='29' font-family='IBM Plex Mono, monospace' font-size='17' font-weight='500' fill='#BFEFEB'>{{latency}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 552,
      "width": 240,
      "height": 48,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='240' height='48' viewBox='0 0 240 48' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='mg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#4CD4CE'/><stop offset='1' stop-color='#2B9E98'/></linearGradient></defs><circle cx='22' cy='24' r='22' fill='url(#mg)'/><text x='22' y='32' font-family='Space Grotesk, Arial' font-size='22' font-weight='700' fill='{{inkColor}}' text-anchor='middle'>{{monogram}}</text><text x='58' y='31' font-family='Space Grotesk, Arial' font-size='21' font-weight='600' fill='#F2F5F7'>{{brand}}</text></svg>"
    }
  ]
}