Dashboard Snapshot

Usage recap with three KPI tiles showing value, label, a delta chip and a sparkline — swap the stats, deltas 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 Dashboard Snapshot

Dashboard Snapshot 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

THIS MONTH

titleText

Your usage at a glance

stat1ValueText

12,480

stat1LabelText

renders

stat1DeltaText

+18%

stat2ValueText

99.98%

stat2LabelText

uptime

stat2DeltaText

+0.2%

stat3ValueText

1.2s

stat3LabelText

avg render

stat3DeltaText

-14%

brandText

zvid analytics

accentColor

#5B8DEF

deltaColorColor

#3FB950

headingColorColor

#F2F5FA

subColorColor

#8B94A8

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-dashboard",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0C0F16",
  "variables": {
    "eyebrow": "THIS MONTH",
    "title": "Your usage at a glance",
    "stat1Value": "12,480",
    "stat1Label": "renders",
    "stat1Delta": "+18%",
    "stat2Value": "99.98%",
    "stat2Label": "uptime",
    "stat2Delta": "+0.2%",
    "stat3Value": "1.2s",
    "stat3Label": "avg render",
    "stat3Delta": "-14%",
    "brand": "zvid analytics",
    "accent": "#5B8DEF",
    "deltaColor": "#3FB950",
    "headingColor": "#F2F5FA",
    "subColor": "#8B94A8"
  },
  "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='#101827'/><stop offset='0.55' stop-color='#0C0F16'/><stop offset='1' stop-color='#090B10'/></linearGradient><radialGradient id='glow' cx='0.15' cy='0.1' r='0.65'><stop offset='0' stop-color='#5B8DEF' stop-opacity='0.26'/><stop offset='1' stop-color='#5B8DEF' 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": "#5B8DEF"
      }
    },
    {
      "type": "TEXT",
      "x": 70,
      "y": 116,
      "width": 820,
      "anchor": "top-left",
      "track": 4,
      "text": "{{title}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "46px",
        "fontWeight": "700",
        "letterSpacing": "-0.02em",
        "color": "#F2F5FA"
      }
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 240,
      "width": 344,
      "height": 230,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='344' height='230' viewBox='0 0 344 230' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='344' height='230' rx='20' fill='#14171E' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/><polyline points='232,64 252,52 272,58 292,40 312,46' fill='none' stroke='{{accent}}' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/><text x='28' y='104' font-family='IBM Plex Mono, monospace' font-size='52' font-weight='600' fill='{{headingColor}}'>{{stat1Value}}</text><text x='30' y='138' font-family='Space Grotesk, Arial' font-size='20' font-weight='500' fill='{{subColor}}'>{{stat1Label}}</text><rect x='28' y='162' width='104' height='40' rx='12' fill='{{deltaColor}}' fill-opacity='0.16'/><path d='M46 190 L52 178 L58 190 Z' fill='{{deltaColor}}'/><text x='70' y='188' font-family='IBM Plex Mono, monospace' font-size='18' font-weight='600' fill='{{deltaColor}}'>{{stat1Delta}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 428,
      "y": 240,
      "width": 344,
      "height": 230,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='344' height='230' viewBox='0 0 344 230' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='344' height='230' rx='20' fill='#14171E' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/><polyline points='232,58 252,54 272,50 292,48 312,44' fill='none' stroke='{{accent}}' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/><text x='28' y='104' font-family='IBM Plex Mono, monospace' font-size='52' font-weight='600' fill='{{headingColor}}'>{{stat2Value}}</text><text x='30' y='138' font-family='Space Grotesk, Arial' font-size='20' font-weight='500' fill='{{subColor}}'>{{stat2Label}}</text><rect x='28' y='162' width='104' height='40' rx='12' fill='{{deltaColor}}' fill-opacity='0.16'/><path d='M46 190 L52 178 L58 190 Z' fill='{{deltaColor}}'/><text x='70' y='188' font-family='IBM Plex Mono, monospace' font-size='18' font-weight='600' fill='{{deltaColor}}'>{{stat2Delta}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 784,
      "y": 240,
      "width": 344,
      "height": 230,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='344' height='230' viewBox='0 0 344 230' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='344' height='230' rx='20' fill='#14171E' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/><polyline points='232,44 252,50 272,48 292,56 312,60' fill='none' stroke='{{accent}}' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/><text x='28' y='104' font-family='IBM Plex Mono, monospace' font-size='52' font-weight='600' fill='{{headingColor}}'>{{stat3Value}}</text><text x='30' y='138' font-family='Space Grotesk, Arial' font-size='20' font-weight='500' fill='{{subColor}}'>{{stat3Label}}</text><rect x='28' y='162' width='104' height='40' rx='12' fill='{{deltaColor}}' fill-opacity='0.16'/><path d='M46 178 L52 190 L58 178 Z' fill='{{deltaColor}}'/><text x='70' y='188' font-family='IBM Plex Mono, monospace' font-size='18' font-weight='600' fill='{{deltaColor}}'>{{stat3Delta}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 540,
      "width": 260,
      "height": 44,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='260' height='44' viewBox='0 0 260 44' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='mg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#5B8DEF'/><stop offset='1' stop-color='#3E63C8'/></linearGradient></defs><circle cx='16' cy='22' r='7' fill='url(#mg)'/><text x='34' y='29' font-family='Space Grotesk, Arial' font-size='20' font-weight='600' fill='#F2F5FA'>{{brand}}</text></svg>"
    }
  ]
}