# Og Image

> A Bannx template you can render to images or PDFs via the API.

This is a [Bannx](https://bannx.com) template. Render any of its **pages** to an image (PNG, SVG, WebP) or PDF through the Bannx Render API, and customize the output by passing **tweaks** (variable overrides).

## Template

- Template ID: `og-image`
- Category: publishing
- Pages: 1
- Open in browser: https://bannx.com/templates/og-image

## How to use

1. Pick a **page** below and note its **page ID**.
2. Call the Render API with that page ID. Override text, colors, and other values via the `tweaks` map (keys are the variable names listed below).
3. Authenticate with an API key (create one under **Settings → Space → Developers**) using the `Authorization: Bearer <token>` header. GET requests for this template require a token (or the space GET render secret `gt`).

Full docs: https://bannx.com/docs/rendering · https://bannx.com/docs/variables

## Quick demo (no API key)

AI agents and curious humans can render this **public** template with tweaks without an account. Mint a short-lived **demo token** (IP-throttled, ~1h TTL, max 5 per hour per IP) and pass it as `?demo=...` (or `Authorization: Bearer <token>`):

```bash
# 1. Mint a demo token (no auth required)
curl -s -X POST https://bannx.com/api/demo-token
# → { "token": "demo_…", "expiresAt": …, "quota": { … } }

# 2. Render with the token (public templates only)
curl -L "https://bannx.com/api/render/wxF53nXR5sm8RuWTX2Dg3?format=png&output=binary&demo=demo_…" --output demo.png
```

Demo tokens only work on public templates and don't consume any space's credits. For production usage, create an API key under **Settings → Space → Developers** instead.

## Variables

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `headline` | string | `Ship Faster with Less Code` |  |
| `subheadline` | string | `Automate your dev workflow and focus on what matters.` |  |
| `author` | object | `{"name":"Ethan Cole","role":"Fullstack Developer","avatar":"https://images.unsplash.com/photo-1642431940390-0483fb1fca73?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyMjY0Nzl8MHwxfHNlYXJjaHwxNXx8cGVyc29uc3xlbnwwfHx8fDE3NzcxMjc4MTZ8MA&ixlib=rb-4.1.0&q=80&w=1080"}` |  |
| `tags` | array | `[{"label":"TypeScript"},{"label":"Next.js"},{"label":"Open Source"}]` |  |
| `heroImage` | string | `https://images.unsplash.com/photo-1550751827-4bd374c3f58b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyMjY0Nzl8MHwxfHNlYXJjaHw3fHx0ZWNofGVufDB8fHx8MTc3NzEyNzcxM3ww&ixlib=rb-4.1.0&q=80&w=1080` |  |
| `accentColor` | string | `#6366f1` |  |

## Pages

### Page 1

- Page ID: `wxF53nXR5sm8RuWTX2Dg3`
- Size: 1200×630

## Example: render "Page 1"

POST (recommended):

```bash
curl -X POST "https://bannx.com/api/render" -H "Content-Type: application/json" -H "Authorization: Bearer YOUR_API_KEY" --data "{\"templateId\":\"og-image\",\"draft\":false,\"format\":\"png\",\"output\":\"binary\",\"tweaks\":{\"headline\":\"Ship Faster with Less Code\",\"subheadline\":\"Automate your dev workflow and focus on what matters.\",\"heroImage\":\"https://images.unsplash.com/photo-1550751827-4bd374c3f58b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyMjY0Nzl8MHwxfHNlYXJjaHw3fHx0ZWNofGVufDB8fHx8MTc3NzEyNzcxM3ww&ixlib=rb-4.1.0&q=80&w=1080\"},\"pageId\":\"wxF53nXR5sm8RuWTX2Dg3\"}" -o render.png
```

GET (embed in an `<img>` / quick link):

```bash
curl -H "Authorization: Bearer YOUR_API_KEY" "https://bannx.com/api/render/wxF53nXR5sm8RuWTX2Dg3?format=png&output=binary&templateId=og-image&tweaks=%7B%22headline%22%3A%22Ship+Faster+with+Less+Code%22%2C%22subheadline%22%3A%22Automate+your+dev+workflow+and+focus+on+what+matters.%22%2C%22heroImage%22%3A%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1550751827-4bd374c3f58b%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DM3wyMjY0Nzl8MHwxfHNlYXJjaHw3fHx0ZWNofGVufDB8fHx8MTc3NzEyNzcxM3ww%26ixlib%3Drb-4.1.0%26q%3D80%26w%3D1080%22%7D" -o render.png
```