# 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:

**Text layer**

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

**Image layer**

```json
{
  "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.

> **Note: Keys match layer names**
>
> The top-level key in each override object (`title`, `avatar`, …) must match the layer's **name** exactly, or the override is silently ignored.

## 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)