# Code

> For generating code screenshots

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: `code`
- Category: developer
- Pages: 1
- Open in browser: https://bannx.com/templates/code

## 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/aAQdq3VEk-o4K_Ce0QY3O?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 |
|------|------|---------|-------------|
| `code` | string | `function greet(name) {
  return `Hello, ${name}!`;
}

const users = ["Alice", "Bob", "Charlie"];

users.forEach(user => {
  console.log(greet(user));
});` |  |
| `tabs` | array | `[{"icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewBox=\"0 0 256 256\"><g fill=\"none\"><rect width=\"256\" height=\"256\" fill=\"#f0db4f\" rx=\"60\"/><path fill=\"#323330\" d=\"m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.889-3.092 12.889-15.12v-81.798h24.058v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.579c-17.357-7.388-28.871-16.668-28.871-36.258c0-18.044 13.748-31.792 35.229-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.731 12.029c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.139 14.778 14.608l6.014 2.577c20.449 8.765 31.963 17.699 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574\"/></g></svg>","title":"main.js","active":true},{"title":"app.js","icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewBox=\"0 0 256 256\"><g fill=\"none\"><rect width=\"256\" height=\"256\" fill=\"#f0db4f\" rx=\"60\"/><path fill=\"#323330\" d=\"m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.889-3.092 12.889-15.12v-81.798h24.058v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.579c-17.357-7.388-28.871-16.668-28.871-36.258c0-18.044 13.748-31.792 35.229-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.731 12.029c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.139 14.778 14.608l6.014 2.577c20.449 8.765 31.963 17.699 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574\"/></g></svg>"}]` |  |

## Pages

### Page 1 

- Page ID: `aAQdq3VEk-o4K_Ce0QY3O`
- Size: 1080×1080
- Variables: `subtitle`

## 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\":\"code\",\"draft\":false,\"format\":\"png\",\"output\":\"binary\",\"tweaks\":{\"code\":\"function greet(name) {\\n  return `Hello, ${name}!`;\\n}\\n\\nconst users = [\\\"Alice\\\", \\\"Bob\\\", \\\"Charlie\\\"];\\n\\nusers.forEach(user => {\\n  console.log(greet(user));\\n});\",\"subtitle\":\"Create beautiful designs today\"},\"pageId\":\"aAQdq3VEk-o4K_Ce0QY3O\"}" -o render.png
```

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

```bash
curl -H "Authorization: Bearer YOUR_API_KEY" "https://bannx.com/api/render/aAQdq3VEk-o4K_Ce0QY3O?format=png&output=binary&templateId=code&tweaks=%7B%22code%22%3A%22function+greet%28name%29+%7B%5Cn++return+%60Hello%2C+%24%7Bname%7D%21%60%3B%5Cn%7D%5Cn%5Cnconst+users+%3D+%5B%5C%22Alice%5C%22%2C+%5C%22Bob%5C%22%2C+%5C%22Charlie%5C%22%5D%3B%5Cn%5Cnusers.forEach%28user+%3D%3E+%7B%5Cn++console.log%28greet%28user%29%29%3B%5Cn%7D%29%3B%22%2C%22subtitle%22%3A%22Create+beautiful+designs+today%22%7D" -o render.png
```