Code Examples

Jump straight into working code. Use these snippets to kickstart your integration.

Generate a social media banner

Create an Open Graph image from a template with dynamic text.

JavaScript

import { BannerClient } from '@banner-codes/sdk';

const client = new BannerClient('YOUR_API_KEY');

const image = await client.images.generate({
  template: 'social-share',
  data: {
    title: 'My Awesome Product',
    subtitle: 'Launching soon',
    cta: 'Sign up',
  },
});

console.log(image.url); // https://cdn.banner.codes/xxx.png

Upload a custom template

Upload your own HTML/CSS template and use it programmatically.

JavaScript

const template = await client.templates.create({
  name: 'My Newsletter Header',
  html: '<div style="background: #000; color: #fff;">{{headline}}</div>',
  width: 1200,
  height: 630,
});

// Use it immediately
const image = await client.images.generate({
  template: template.id,
  data: { headline: 'Hello World' },
});

List and revoke API keys (Node.js)

Manage API keys from your backend.

JavaScript

// Get all keys
const keys = await client.keys.list();

// Create a new key with a label
const newKey = await client.keys.create({
  name: 'Production Server',
});

// Revoke a key
await client.keys.revoke('key_12345');

Python: Generate and download image

Use the Python SDK to generate and save an image locally.

Python

from banner_codes import BannerClient
import requests

client = BannerClient('YOUR_API_KEY')

image = client.images.generate(
    template='product-launch',
    data={'product': 'Banner.codes', 'discount': '20%'}
)

# Download the image
response = requests.get(image.url)
with open('banner.png', 'wb') as f:
    f.write(response.content)

cURL: One‑off generation

Quick test with cURL from your terminal.

bash

curl -X POST https://api.banner.codes/v1/images \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "basic",
    "data": {
      "headline": "Limited Offer",
      "background": "#1a1a1a"
    }
  }'

React: Direct browser integration

Generate images on‑the‑fly from a React component.

tsx

import { useState } from 'react';
import { BannerClient } from '@banner-codes/sdk';

const client = new BannerClient(process.env.NEXT_PUBLIC_BANNER_KEY);

export default function BannerGenerator() {
  const [url, setUrl] = useState('');

  const generate = async () => {
    const { url } = await client.images.generate({
      template: 'event',
      data: { title: 'Webinar', date: '2026-03-01' },
    });
    setUrl(url);
  };

  return (
    <div>
      <button onClick={generate}>Generate</button>
      {url && <img src={url} alt="Generated banner" />}
    </div>
  );
}

More examples

Check out our GitHub repository for full‑fledged demo apps in Next.js, Vue, Python Flask, and more.