Marketing Report

Paid-marketing report: ROAS/spend/conversion stats plus a spend-by-channel bar chart — swap metrics, channel labels and accent.

Type: Image
Format: Twitter · 16:9
Orientation: Landscape

Variables

Open in editor

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

Customize Marketing Report

Marketing Report is a ready-to-render Data viz / reports image design formatted for Twitter · 16:9 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

PAID MARKETING

titleText

Marketing Report

subtitleText

Q1 2026 · paid acquisition

stat1LabelText

ROAS

stat1ValueText

4.8x

stat2LabelText

AD SPEND

stat2ValueText

$62.4K

stat3LabelText

CONVERSIONS

stat3ValueText

1,240

chartTitleText

SPEND BY CHANNEL

bar1LabelText

bar2LabelText

Social

bar3LabelText

Display

bar4LabelText

Video

bar5LabelText

accentColor

#8B7CF6

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-report-marketing",
  "resolution": "twitter-landscape",
  "outputFormat": "png",
  "backgroundColor": "#0E0B1A",
  "variables": {
    "eyebrow": "PAID MARKETING",
    "title": "Marketing Report",
    "subtitle": "Q1 2026 · paid acquisition",
    "stat1Label": "ROAS",
    "stat1Value": "4.8x",
    "stat2Label": "AD SPEND",
    "stat2Value": "$62.4K",
    "stat3Label": "CONVERSIONS",
    "stat3Value": "1,240",
    "chartTitle": "SPEND BY CHANNEL",
    "bar1Label": "Search",
    "bar2Label": "Social",
    "bar3Label": "Display",
    "bar4Label": "Video",
    "bar5Label": "Email",
    "accent": "#8B7CF6"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1200,
      "height": 675,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1200' height='675' viewBox='0 0 1200 675' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#1A1433'/><stop offset='0.55' stop-color='#0E0B1A'/><stop offset='1' stop-color='#090711'/></linearGradient><radialGradient id='g1' cx='0.85' cy='0.1' r='0.6'><stop offset='0' stop-color='#8B7CF6' stop-opacity='0.32'/><stop offset='1' stop-color='#8B7CF6' stop-opacity='0'/></radialGradient><radialGradient id='g2' cx='0.05' cy='1' r='0.7'><stop offset='0' stop-color='#5B8DEF' stop-opacity='0.2'/><stop offset='1' stop-color='#5B8DEF' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='675' fill='url(#bg)'/><rect width='1200' height='675' fill='url(#g1)'/><rect width='1200' height='675' fill='url(#g2)'/><rect x='24' y='24' width='1152' height='627' rx='28' fill='none' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 60,
      "width": 320,
      "height": 34,
      "anchor": "top-left",
      "track": 3,
      "svg": "<svg width='320' height='34' viewBox='0 0 320 34' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='230' height='34' rx='17' fill='{{accent}}' fill-opacity='0.14' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1'/><circle cx='22' cy='17' r='4' fill='{{accent}}'/><text x='38' y='23' font-family='Space Grotesk, Arial' font-size='14' font-weight='600' letter-spacing='2.5' fill='#C9C2F5'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 106,
      "width": 640,
      "anchor": "top-left",
      "track": 4,
      "text": "{{title}}",
      "style": {
        "fontFamily": "Sora",
        "fontSize": "54px",
        "fontWeight": "700",
        "letterSpacing": "-0.02em",
        "lineHeight": "1.02",
        "color": "#F4F2FB"
      }
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 184,
      "width": 460,
      "anchor": "top-left",
      "track": 4,
      "text": "{{subtitle}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "21px",
        "fontWeight": "500",
        "color": "#9C97B5"
      }
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 250,
      "width": 452,
      "height": 300,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='452' height='300' viewBox='0 0 452 300' xmlns='http://www.w3.org/2000/svg'><g><text x='2' y='22' font-family='Space Grotesk, Arial' font-size='15' font-weight='600' letter-spacing='2' fill='#9C97B5'>{{stat1Label}}</text><text x='2' y='72' font-family='Sora, Arial' font-size='44' font-weight='700' fill='#F4F2FB'>{{stat1Value}}</text><polygon points='300,58 312,58 306,46' fill='{{accent}}'/><text x='320' y='66' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='{{accent}}'>+0.6x</text><line x1='0' y1='96' x2='452' y2='96' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1'/></g><g transform='translate(0,100)'><text x='2' y='22' font-family='Space Grotesk, Arial' font-size='15' font-weight='600' letter-spacing='2' fill='#9C97B5'>{{stat2Label}}</text><text x='2' y='72' font-family='Sora, Arial' font-size='44' font-weight='700' fill='#F4F2FB'>{{stat2Value}}</text><polygon points='300,58 312,58 306,46' fill='{{accent}}'/><text x='320' y='66' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='{{accent}}'>+14%</text><line x1='0' y1='96' x2='452' y2='96' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1'/></g><g transform='translate(0,200)'><text x='2' y='22' font-family='Space Grotesk, Arial' font-size='15' font-weight='600' letter-spacing='2' fill='#9C97B5'>{{stat3Label}}</text><text x='2' y='72' font-family='Sora, Arial' font-size='44' font-weight='700' fill='#F4F2FB'>{{stat3Value}}</text><polygon points='300,58 312,58 306,46' fill='{{accent}}'/><text x='320' y='66' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='{{accent}}'>+9.2%</text></g></svg>"
    },
    {
      "type": "SVG",
      "x": 560,
      "y": 226,
      "width": 568,
      "height": 372,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='568' height='372' viewBox='0 0 568 372' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='568' height='372' rx='22' fill='#FFFFFF' fill-opacity='0.03' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1'/><text x='28' y='40' font-family='Space Grotesk, Arial' font-size='15' font-weight='600' letter-spacing='2' fill='#9C97B5'>{{chartTitle}}</text><line x1='28' y1='300' x2='540' y2='300' stroke='#FFFFFF' stroke-opacity='0.12' stroke-width='1'/><line x1='28' y1='230' x2='540' y2='230' stroke='#FFFFFF' stroke-opacity='0.05' stroke-width='1'/><line x1='28' y1='160' x2='540' y2='160' stroke='#FFFFFF' stroke-opacity='0.05' stroke-width='1'/><g><rect x='52' y='204' width='68' height='96' rx='8' fill='{{accent}}' fill-opacity='0.4'/><text x='86' y='192' font-family='Sora, Arial' font-size='18' font-weight='700' fill='#C9C2F5' text-anchor='middle'>$8K</text><text x='86' y='326' font-family='Space Grotesk, Arial' font-size='16' font-weight='500' fill='#9C97B5' text-anchor='middle'>{{bar1Label}}</text></g><g><rect x='152' y='150' width='68' height='150' rx='8' fill='{{accent}}' fill-opacity='0.62'/><text x='186' y='138' font-family='Sora, Arial' font-size='18' font-weight='700' fill='#C9C2F5' text-anchor='middle'>$14K</text><text x='186' y='326' font-family='Space Grotesk, Arial' font-size='16' font-weight='500' fill='#9C97B5' text-anchor='middle'>{{bar2Label}}</text></g><g><rect x='252' y='180' width='68' height='120' rx='8' fill='{{accent}}' fill-opacity='0.5'/><text x='286' y='168' font-family='Sora, Arial' font-size='18' font-weight='700' fill='#C9C2F5' text-anchor='middle'>$11K</text><text x='286' y='326' font-family='Space Grotesk, Arial' font-size='16' font-weight='500' fill='#9C97B5' text-anchor='middle'>{{bar3Label}}</text></g><g><rect x='352' y='92' width='68' height='208' rx='8' fill='{{accent}}'/><text x='386' y='80' font-family='Sora, Arial' font-size='18' font-weight='700' fill='#FFFFFF' text-anchor='middle'>$22K</text><text x='386' y='326' font-family='Space Grotesk, Arial' font-size='16' font-weight='600' fill='#F4F2FB' text-anchor='middle'>{{bar4Label}}</text></g><g><rect x='452' y='132' width='68' height='168' rx='8' fill='{{accent}}' fill-opacity='0.7'/><text x='486' y='120' font-family='Sora, Arial' font-size='18' font-weight='700' fill='#C9C2F5' text-anchor='middle'>$17K</text><text x='486' y='326' font-family='Space Grotesk, Arial' font-size='16' font-weight='500' fill='#9C97B5' text-anchor='middle'>{{bar5Label}}</text></g></svg>"
    }
  ]
}