Let your fans create the hype and see your reach explode.

Every vote, reaction and achievement is a share card for link previews and a story for Instagram, from a single API.

Hype Card how_to_vote Fan votes or reacts auto_awesome Share card is created ios_share Fan shares the card visibility Friends see the card touch_app Friends click & engage

From API call to
viral share card

Every template produces OG link previews and Instagram-ready story cards, wherever fans share.

// Fan submits their top-3 Premier League prediction
const { shareUrl } = await hypecard.shares.create({
  templateId: "prem-prediction",
  payload: {
    first: "Arsenal", // 1st
    second: "Man City", // 2nd
    third: "Aston Villa", // 3rd
    season: "2025–26",
    fan: "@jamie_gooner"
  },
  destinationUrl: "https://myapp.com/predict"
})

// → shareUrl auto-renders on WhatsApp, iMessage etc.
As it appears on WhatsApp
J
Jamie G. · just now
🔒 My Prem 2025–26 prediction is locked in – hypecard.io/r/ax7kp
Premier League 2025–26 · My Prediction
workspace_premium Arsenal
workspace_premium Man City
workspace_premium Aston Villa
@jamie_gooner
hypecard.io · Prem Prediction
// Viewer casts their Love Island vote
const { shareUrl } = await hypecard.shares.create({
  templateId: "reality-vote",
  payload: {
    show: "Love Island UK",
    couple: "Mia & Callum",
    voteLabel: "My winners",
    fan: "@sophie_li_fan"
  },
  destinationUrl: "https://loveisland.com/vote"
})

// Shared link drives viewers back to vote
As it appears on iMessage
S
Sophie · now
Mia and Callum to WIN!! 🙌❤️‍🔥 hypecard.io/r/li99z
Love Island UK · Series 11 Final
favorite
Mia & Callum
My winners
hypecard.io · Reality Vote
// Fan reacts to a key match moment
const { shareUrl } = await hypecard.shares.create({
  templateId: "moment-reaction",
  payload: {
    event: "Arsenal 3–1 Man City",
    moment: "Saka. 90+4. What a goal.",
    reaction: "Absolutely scenes",
    intensity: 98, // 0–100 hype score
    fan: "@arsenalmad_tom"
  },
  destinationUrl: "https://myapp.com/moments"
})

// Fans share the moment. You get the traffic.
As it appears on Telegram
T
Tom A. · 2m
SAKAAAAAA ⚽🔥 absolutely scenes!! hypecard.io/r/sk90x
Arsenal 3–1 Man City · PL 2025–26
local_fire_department
Saka. 90+4.
What a goal.
Hype score
98
hypecard.io · Moment Reaction
// Fan's score card, rendered as an Instagram Story
const { shareUrl } = await hypecard.shares.create({
  templateId: "score-card",
  format: "story", // 1080x1920
  payload: {
    playerName: "Alice",
    score: "4,200",
    event: "League Finals"
  },
  destinationUrl: "https://myapp.com/results"
})

// Same template, purpose-built 9:16 story format
As it appears on Instagram Stories
A
alice_fan
2h
League Finals
Goals this season
4,200
Alice
hypecard.io
keyboard_arrow_up
See results
How it works

Create shareable moments
in four steps.

No image generation infrastructure. No CDN to configure. No crawler handling to figure out.

Step 01

Design your template

Write HTML with {{variableName}} placeholders. Inline your styles. We render at 1200×630 (OG) or 1080×1920 (Story) using Satori, a high-performance engine that supports gradients, custom fonts, and layered layouts. Set format: "story" for Instagram-ready 9:16 cards.

<!-- score-card.html -->
<div class="card">
  <h1 class="score">
    {{score}}
  </h1>
  <p>{{playerName}}</p>
</div>
Step 02

Create a share

One API call with your fan's data. We fill the template, render it asynchronously, and hand you back a short link. Poll once – it's usually ready in under a second.

POST /v1/shares

{
  "templateId": "score-card",
  "format": "story", // or "og" (default)
  "payload": {
    "score": 14
  }
}

← { shareUrl, status: "ready" }
Step 03

Share it anywhere

Post the link on Twitter, WhatsApp, LinkedIn, anywhere. Social crawlers automatically fetch the OG image and render a rich preview card. No extra setup.

# Crawler sees:
og:image → 1200×630 PNG
og:title → "Alice scored 14"

# Rich preview on:
Twitter · LinkedIn · WhatsApp
iMessage · Telegram · Slack

# Story format (9:16):
Instagram · TikTok · Snapchat · WhatsApp Status
Step 04

Fan clicks, lands in your app

When a fan taps the link, they're redirected straight back to your platform. Attribution parameters are automatically appended so you know exactly which share drove each visit.

# Human redirect:
example.com
  ?utm_source=hypecard
  &hc_share_id=x8k2m

# Full attribution loop closed

Try it now.

Pick a template, fill in the variables, get a live share link.

info Playground limits apply. Organisations are limited in generation credits per hour and per day. This demo environment allows only a small number of requests per minute, enough to try it out, not for production use. Sign up for a full API key to remove restrictions.
Format:
Preview:
Request
curl -X POST $API/v1/shares \
  -H "Content-Type: application/json" \
  -H "x-organisation-id: demo-org" \
  -H "x-api-key: <YOUR_KEY>" \
  -d '{'
  }'
Card renders here
Rendering
POST
/v1/templates
Create a template
Returns a templateId used for all subsequent operations. Templates are versioned, you never edit HTML in place, you add a new version.
Body
namestringrequired
spaceIdstringoptional
cURL
curl -X POST $API/v1/templates \
  -H "x-organisation-id: $ORG" \
  -H "x-api-key: $KEY" \
  -d '{"name": "Score Card"}'

← { "id": "uuid", "name": "Score Card" }
POST
/v1/templates/:id/versions
Add a template version
Each call creates a new version (v1, v2, …). Canvas is 1200×630 (OG) or 1080×1920 (Story). Use {{variable}} tokens. Inline all CSS for fast renders (50–150ms with Satori).
Body
htmlstringrequired
variablesarrayoptional
stylesstringoptional
format"og" | "story"optional (default: "og")
previewTypeimage | video | bothoptional
cURL
curl -X POST $API/v1/templates/$ID/versions \
  -H "x-organisation-id: $ORG" \
  -H "x-api-key: $KEY" \
  -d '{'
    "html": $(jq -Rs . < template.html),
    "variables": [
      { "name": "playerName", "required": true }
    ]
  }'

← { "id": "uuid", "version": 1 }
GET
/v1/templates
List templates
Returns your org's templates plus all system templates (organisationId: "_system"). System templates are always visible to every org.
cURL
curl $API/v1/templates \
  -H "x-organisation-id: $ORG" \
  -H "x-api-key: $KEY"

← { "items": [ { "id": "...", "name": "Score Card" } ] }
POST
/v1/shares
Create a share
Rendering is async, returns status: "pending" immediately. Poll GET /v1/shares/:id until status === "ready". The format field selects which template format to render: og (1200×630) or story (1080×1920). Defaults to og.
Body
templateIdstringrequired
payloadobjectrequired
destinationUrlstringrequired
format"og" | "story"optional (default: "og")
attributionDataobjectoptional
expirySecondsnumberoptional
cURL
curl -X POST $API/v1/shares \
  -H "x-organisation-id: $ORG" \
  -H "x-api-key: $KEY" \
  -d '{'
    "templateId": "$TEMPLATE_ID",
    "payload": { "playerName": "Alice", "score": "42" },
    "destinationUrl": "https://example.com"
  }'

← { "shareId": "...", "status": "pending", "shareUrl": "..." }
GET
/v1/shares/:id
Poll share status
Poll every 2s until status === "ready". Inline-CSS templates: 3–5s. Google Fonts: up to ~30s. Once ready, shareUrl and renderArtifactId are populated.
Status values
pendingqueued
renderingin progress
readycomplete
failedall retries exhausted
cURL
curl $API/v1/shares/$SHARE_ID \
  -H "x-organisation-id: $ORG" \
  -H "x-api-key: $KEY"

← {
  "status": "ready",
  "shareUrl": "https://…/s/ax7kp"
}
DELETE
/v1/shares/:id
Delete a share
Permanently removes the share, its render artifact, and stored media. The shareUrl returns 404 immediately after deletion.
cURL
curl -X DELETE $API/v1/shares/$SHARE_ID \
  -H "x-organisation-id: $ORG" \
  -H "x-api-key: $KEY"

← 204 No Content
bolt Data-Driven Cards are rendered server-side from live sports data. No template or payload required — just a fixture ID. The URL itself is the card; embed it as og:image or display directly.
Card type:
Select a fixture above Open ↗

Wire it up to your AI agent
in 30 seconds.

HypeCard exposes a full MCP (Model Context Protocol) endpoint. Point any Claude or OpenAI-compatible agent at /mcp and it can browse templates, generate custom HTML, create shares, and return preview URLs – no human in the loop.

Natural language prompt
"Create a share card for Alice who scored 42 goals this season and ranked 3rd globally."
MCP endpoint
https://your-api.hypecard.io/mcp

Tools available:
  get_docs
  list_templates
  add_template_version
  create_share
  get_share_status
Tool calls
list_templates → score-card, leaderboard-rank…
create_share → templateId: "leaderboard-rank", format: "story"
get_share_status → status: "ready"
Result
Leaderboard Rank
#3
Alice · 42 goals
hypecard.io/r/a3z9q
→ https://hypecard.io/r/a3z9q
Read the MCP docs →

Frequently asked questions

Everything developers and AI agents need to know about HypeCard.

What is HypeCard and what problem does it solve?

HypeCard is a REST API and MCP server for generating Open Graph share-card images on demand. You define an HTML template (Handlebars, 1200x630 px), create a "share" by passing data into it, and get back a stable public image URL suitable for og:image, social previews, and deep-link redirects. It removes the need to run your own headless browser or image pipeline for every piece of user-generated social content.

How do I create a share card via the API?

Three steps: (1) create a template with POST /v1/templates; (2) add an HTML version with POST /v1/templates/:id/versions; (3) create a share with POST /v1/shares, passing the template ID, a data payload, and a destinationUrl. Poll GET /v1/shares/:id until status is ready, then read imageUrl for the rendered card.

Is there an OpenAPI spec I can import?

Yes. Download the machine-readable spec at /openapi.yaml (OpenAPI 3.1). Browse it interactively at /api-reference (Redoc). Import into Postman, Insomnia, or any OpenAPI-compatible tool to get typed request builders and example responses immediately.

Does HypeCard support the Model Context Protocol (MCP)?

Yes. HypeCard exposes a full MCP server at /mcp using the Streamable HTTP transport. Claude, Cursor, and any MCP-compatible agent can call tools like create_template, create_share, and get_share_status directly, without you writing any glue code. Add https://api-dev.hypecard.io/mcp as an MCP server in your agent's config and call get_docs for the full reference.

How can an AI agent like Claude use HypeCard autonomously?

Point your agent at the MCP endpoint. Claude can discover all available tools by calling get_docs, then chain calls to design a template, render a share card for a given player or event, and return the image URL - all in a single conversation turn. The stateless MCP transport means no session management is needed on the server side. For sports use cases the DDC skill renders data-driven lineup cards automatically from a fixture ID.

How does authentication work?

All mutating endpoints (POST, PATCH, DELETE) require a Bearer token in the Authorization header. Public read endpoints (share page, media URLs, DDC card images) require no auth - the URL itself is the capability grant. MCP tool calls follow the same rule: create_share needs a token, get_share_status does not. Tokens are scoped per organisation.

How fast are renders? Can I use HypeCard in a real-time context?

The default Satori renderer produces a JPEG in roughly 50-150 ms warm. Cards are cached with Cache-Control: public, max-age=300 at the CloudFront edge, so repeat requests are served in single-digit milliseconds. The same stable URL always returns the latest rendered card - you can embed it in an og:image tag and let CDN caching handle scale. For video cards, the Remotion renderer is available but runs asynchronously (~35 s).

What image formats and dimensions does HypeCard support?

Templates are authored at 1200x630 px - the standard Open Graph image size. Renders are returned as JPEG by default. The /m/:shareId/story endpoint serves a 1080x1920 portrait crop for Stories/Reels. A 300x157 thumbnail is available at /m/:shareId/thumbnail. Video cards are MP4 at 1200x630 (H.264) via the Remotion worker.

What is the DDC (Data-Driven Content) feature?

DDC is a server-side render pipeline for sports data cards. Given an org slug and a fixture ID, GET /ddc/{orgSlug}/lineup/{fixtureId}.jpg fetches live lineup data from Opta or SportMonks, renders a full 1080x1920 lineup card via Satori, and returns a cacheable JPEG - no template authoring needed. A Monterosa Studio External Data Source endpoint (POST /ddc/lineup/source) lets Studio editors browse and select lineup cards without knowing fixture IDs upfront. DDC cards refresh automatically when the confirmed lineup is announced.

Is there a sandbox or playground I can use without signing up?

Yes. The interactive test harness at /test.html lets you create templates, render shares, and call DDC endpoints against the live dev environment directly in the browser - no account required. A demo API key with rate-limited credits is available via GET /config/demo for quick exploration. The OpenAPI spec at /api-reference also includes try-it-out support for read endpoints.