Custom Templates

Design OG image templates with full HTML/CSS control. Use your brand colors, fonts, and layout — then generate images via the API just like built-in templates.

Creating a template

Via dashboard

1. Go to Templates in your dashboard
2. Click Create Template
3. Use the HTML editor to design your template
4. Define variables with {{variable_name}} placeholders
5. Save

Template syntax

Templates are HTML strings with Mustache-style {{variable}} placeholders:

<div style="
  width: 1200px;
  height: 630px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  color: white;
  padding: 60px;
">
  <h1 style="font-size: 56px; margin: 0; text-align: center;">
    {{title}}
  </h1>
  <p style="font-size: 24px; opacity: 0.9; margin-top: 20px;">
    by {{author}} · {{date}}
  </p>
</div>

Using your custom template

Once saved, call the OG Image API with your template's slug:

curl -X POST "https://api.snapsharp.dev/v1/og-image" \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "template": "my-custom-template",
    "data": {
      "title": "Announcing Our Series A",
      "author": "CEO",
      "date": "March 2026"
    }
  }' -o og.png

Design tips

• Set explicit dimensions — use width: 1200px; height: 630px on the root element for standard OG image size
• Use inline styles — external CSS files won't load. Keep everything in style attributes or a <style> block
• Use system fonts — system-ui, -apple-system, 'Segoe UI', sans-serif render consistently
• Test large text — OG images display at ~500px wide on social platforms, so use at least 40px for titles
• Use the editor — the dashboard editor shows a live preview as you type

Managing templates

Via dashboard

• Edit — click any custom template card to open it in the editor
• Delete — remove templates you no longer need
• Preview — the editor renders a live preview with sample data

Via API

Built-in vs custom