Template Creation Guide

A template is built from named layers. Naming, layer overrides, canvas sizing, and typography choices all affect how reliably your template renders across different content.

Layer naming (critical concept)

• Each layer needs a unique name (e.g., “title”, “avatar”, “date”)
• Layer names are used as keys in the API
• Choose semantic names that describe the content
• Use lowercase with underscores (e.g., “post_title”, “author_avatar”)

Layer types & overrides

Each layer type accepts a different set of override properties, keyed by the layer’s name.

Text layers

Override text content and styling:

{
  "title": {
    "text": "New content",
    "fontSize": 48,
    "fontWeight": "bold",
    "color": "#000000",
    "textAlign": "center",
    "lineHeight": 1.2,
    "letterSpacing": -1,
    "textTransform": "uppercase"
  }
}

{
  "avatar": {
    "image_url": "https://example.com/avatar.jpg",
    "width": 120,
    "height": 120,
    "objectFit": "cover",
    "borderRadius": 60,
    "opacity": 1
  }
}

Image layers

Override image source and display properties — select the “Image layer” tab above for the shape.

Canvas setup

Common presets

• OG Image: 1200×630px
• Twitter Card: 1200×600px
• Instagram Post: 1080×1080px
• Instagram Story: 1080×1920px

Best practices

• Keep important content 50px from edges
• Use solid backgrounds for better readability
• Limit title text to 60 characters max
• Test with realistic content

Typography guidelines

Recommended font sizes

• Main title: 64-96px
• Subtitle: 32-48px
• Body text: 24-32px
• Small text: 18-24px

Font weights

• Titles: Bold (700+)
• Body: Regular/Medium (400-500)
• Contrast: Ensure WCAG AA minimum

Testing your template

• Use the preview panel in the editor with sample data
• Test with realistic content (long titles, short titles, edge cases)
• Try different layer override combinations
• Check rendering at actual size (not zoomed)