roadmap

Product roadmap OG image template

Now, Next and Later columns on a timeline, up to three items each.

Product roadmap Open Graph image template rendered by Shareglint
Product roadmap template at square size (1080×1080)
Product roadmap template at portrait size (1080×1350)
Product roadmap template at story size (1080×1920)
Product roadmap template at pinterest size (1000×1500)
Product roadmap template at youtube size (1280×720)

These are real renders from the API with the example values in the table below. Switch the size above: the same template lays itself out for all 6 sizes — send size or sizes with the request.

For public roadmaps, quarterly plans and "what we are building" posts. Items in progress get a filled marker and highlighted cards, later ones dashed outlines. The columns turn into a vertical timeline on square and vertical formats; a stage with no items disappears.

Fields

Every field is optional. Long text shrinks to fit instead of overflowing; an image field takes a public URL that we fetch on our side.

Field Type Description Example
title text Headline of the roadmap. default: Roadmap What we are building this quarter
product text Product name. Northwind
now_label text Name of the first stage, e.g. Now. default: Now —
now_1 text First item in progress. Multi-size renders
now_2 text Second item in progress. Batch API
now_3 text Third item in progress. —
next_label text Name of the second stage, e.g. Next. default: Next —
next_1 text First item coming next. Team workspaces
next_2 text Second item coming next. Figma import
next_3 text Third item coming next. Audit log
later_label text Name of the third stage, e.g. Later. default: Later —
later_1 text First item for later. Video previews
later_2 text Second item for later. Self-hosted runner
later_3 text Third item for later. —
site text Your domain or a short URL. northwind.dev/roadmap
logo image URL Logo image. https://example.com/images/logo-northwind.png
accent colour Brand colour as hex, e.g. #6366f1. Drives buttons, highlights and the background glow. default: #f43f5e #f43f5e
theme dark | light Colour scheme: dark or light. —

Render it with one request

Use the slug as template. The response holds the URL of the finished PNG; ?wait=true keeps the connection open until it is ready.

curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "roadmap",
    "modifications": {
        "title": "What we are building this quarter",
        "product": "Northwind",
        "now_1": "Multi-size renders",
        "now_2": "Batch API",
        "next_1": "Team workspaces",
        "next_2": "Figma import",
        "next_3": "Audit log",
        "later_1": "Video previews",
        "later_2": "Self-hosted runner",
        "site": "northwind.dev/roadmap",
        "logo": "https://example.com/images/logo-northwind.png"
    }
}'

Or paste a signed URL into og:image

For static sites, Webflow, Shopify and no-code tools: put the fields in the query string and sign it with your signing secret. The first request renders the image, every later one is a redirect to the cached file. How to compute the signature.

<meta property="og:image" content="https://shareglint.com/i/acc_YOUR_ACCOUNT_ID/roadmap.png?later_1=Video%20previews&later_2=Self-hosted%20runner&next_1=Team%20workspaces&next_2=Figma%20import&next_3=Audit%20log&now_1=Multi-size%20renders&now_2=Batch%20API&product=Northwind&site=northwind.dev%2Froadmap&title=What%20we%20are%20building%20this%20quarter&s=YOUR_SIGNATURE">

Make it yours

accent and theme change per request. For anything more, copy the template into your account: you get an ordinary HTML template with the same fields that you can edit in the dashboard or through the API. If the slug is free on your account, the copy takes it — your integrations switch to your version without changing a line.

curl -X POST "https://shareglint.com/v1/templates/library/roadmap/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

More OG image templates

All templates →