Code Snippet

Quickstart card with a drawn editor window, traffic dots and syntax-highlighted code — swap headline, filename, code colors 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 Code Snippet

Code Snippet 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

QUICKSTART

headlineAText

Render in

headlineBText

3 lines

subText

Install the SDK, describe your video as data, and let zvid do the rest.

installCmdText

$ npm i zvid

fileNameText

render.ts

brandText

zvid sdk

monogramText

accentColor

#8B7CF6

cardColorColor

#12131C

codeKeywordColor

#8B7CF6

codeStringColor

#4CD4CE

codeCommentColor

#5A6472

codePlainColor

#D6D9E3

headingColorColor

#F4F2FB

subColorColor

#9B98AD

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-code-snippet",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0E1015",
  "variables": {
    "eyebrow": "QUICKSTART",
    "headlineA": "Render in",
    "headlineB": "3 lines",
    "sub": "Install the SDK, describe your video as data, and let zvid do the rest.",
    "installCmd": "$ npm i zvid",
    "fileName": "render.ts",
    "brand": "zvid sdk",
    "monogram": "Z",
    "accent": "#8B7CF6",
    "cardColor": "#12131C",
    "codeKeyword": "#8B7CF6",
    "codeString": "#4CD4CE",
    "codeComment": "#5A6472",
    "codePlain": "#D6D9E3",
    "headingColor": "#F4F2FB",
    "subColor": "#9B98AD"
  },
  "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='#151228'/><stop offset='0.55' stop-color='#0E1015'/><stop offset='1' stop-color='#0A0A11'/></linearGradient><radialGradient id='glow' cx='0.12' cy='0.9' r='0.7'><stop offset='0' stop-color='#8B7CF6' stop-opacity='0.3'/><stop offset='1' stop-color='#8B7CF6' 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": 150,
      "width": 440,
      "anchor": "top-left",
      "track": 4,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Sora",
        "fontSize": "22px",
        "fontWeight": "600",
        "letterSpacing": "0.32em",
        "color": "#8B7CF6"
      }
    },
    {
      "type": "TEXT",
      "x": 70,
      "y": 192,
      "width": 460,
      "anchor": "top-left",
      "track": 4,
      "style": {
        "fontFamily": "Sora"
      },
      "html": "<div style='font-size:74px; font-weight:800; line-height:0.98; letter-spacing:-0.03em; color:{{headingColor}};'>{{headlineA}}<br><span style='color:{{accent}};'>{{headlineB}}</span></div>"
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 372,
      "width": 420,
      "anchor": "top-left",
      "track": 4,
      "text": "{{sub}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "26px",
        "fontWeight": "500",
        "lineHeight": "1.4",
        "color": "#9B98AD"
      }
    },
    {
      "type": "SVG",
      "x": 74,
      "y": 486,
      "width": 224,
      "height": 50,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='224' height='50' viewBox='0 0 224 50' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='224' height='50' rx='14' fill='{{accent}}' fill-opacity='0.12' stroke='{{accent}}' stroke-opacity='0.45' stroke-width='1.2'/><text x='22' y='32' font-family='IBM Plex Mono, monospace' font-size='19' font-weight='500' fill='#CFC7F5'>{{installCmd}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 556,
      "y": 150,
      "width": 576,
      "height": 330,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='576' height='330' viewBox='0 0 576 330' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='576' height='330' rx='18' fill='{{cardColor}}' stroke='#FFFFFF' stroke-opacity='0.09' stroke-width='1.5'/><line x1='0' y1='48' x2='576' y2='48' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1'/><circle cx='24' cy='24' r='6' fill='#FF5F57'/><circle cx='46' cy='24' r='6' fill='#FEBC2E'/><circle cx='68' cy='24' r='6' fill='#28C840'/><text x='288' y='29' font-family='IBM Plex Mono, monospace' font-size='16' font-weight='500' fill='{{subColor}}' text-anchor='middle'>{{fileName}}</text><text x='28' y='92' font-family='IBM Plex Mono, monospace' font-size='17' fill='{{codeComment}}'>// three lines to your first render</text><text x='28' y='126' font-family='IBM Plex Mono, monospace' font-size='18' xml:space='preserve'><tspan fill='{{codeKeyword}}'>import</tspan><tspan fill='{{codePlain}}'> { zvid } </tspan><tspan fill='{{codeKeyword}}'>from</tspan><tspan fill='{{codeString}}'> 'zvid'</tspan></text><text x='28' y='176' font-family='IBM Plex Mono, monospace' font-size='18' xml:space='preserve'><tspan fill='{{codeKeyword}}'>const</tspan><tspan fill='{{codePlain}}'> job = </tspan><tspan fill='{{codeKeyword}}'>await</tspan><tspan fill='{{codePlain}}'> zvid.render({</tspan></text><text x='58' y='210' font-family='IBM Plex Mono, monospace' font-size='18' xml:space='preserve'><tspan fill='{{codePlain}}'>template: </tspan><tspan fill='{{codeString}}'>'promo'</tspan><tspan fill='{{codePlain}}'>,</tspan></text><text x='58' y='244' font-family='IBM Plex Mono, monospace' font-size='18' xml:space='preserve'><tspan fill='{{codePlain}}'>data: { title: </tspan><tspan fill='{{codeString}}'>'Q3 wins'</tspan><tspan fill='{{codePlain}}'> },</tspan></text><text x='28' y='278' font-family='IBM Plex Mono, monospace' font-size='18' fill='{{codePlain}}'>})</text></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 556,
      "width": 220,
      "height": 44,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='220' height='44' viewBox='0 0 220 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='#8B7CF6'/><stop offset='1' stop-color='#5B8DEF'/></linearGradient></defs><circle cx='20' cy='22' r='20' fill='url(#mg)'/><text x='20' y='30' font-family='Sora, Arial' font-size='20' font-weight='700' fill='#0B0B10' text-anchor='middle'>{{monogram}}</text><text x='52' y='29' font-family='Space Grotesk, Arial' font-size='20' font-weight='600' fill='#F4F2FB'>{{brand}}</text></svg>"
    }
  ]
}