> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pictify.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Managing Templates

> Create and manage templates in the Pictify dashboard

# Managing Templates

The Pictify dashboard provides a visual editor for creating and managing templates. This guide covers the template workflow from creation to rendering.

## Template Editor

### Accessing the Editor

1. Go to **Templates** in the sidebar
2. Click **Create Template** or select an existing template
3. The visual editor opens with the canvas and toolbar

### Editor Layout

| Area | Description |
| - | - |
| **Canvas** | Visual preview of your template |
| **Toolbar** | Add elements, adjust settings |
| **Properties Panel** | Configure selected element |
| **Variables Panel** | Define and manage variables |
| **Layers Panel** | Reorder and group elements |

## Creating a Template

### Step 1: Set Canvas Size

Choose a preset or enter custom dimensions:

| Preset | Dimensions | Use Case |
| - | - | - |
| **OG Image** | 1200 × 630 | Social sharing (Facebook, LinkedIn) |
| **Twitter Card** | 1200 × 600 | Twitter posts |
| **Instagram Post** | 1080 × 1080 | Instagram feed |
| **Instagram Story** | 1080 × 1920 | Instagram/Facebook stories |
| **YouTube Thumbnail** | 1280 × 720 | Video thumbnails |
| **Custom** | Any | Your specific needs |

### Step 2: Add Elements

Click the **+** button to add elements:

* **Text** - Headlines, body text, captions
* **Image** - Logos, photos, icons
* **Shape** - Rectangles, circles, custom shapes
* **Container** - Group elements together

### Step 3: Style Elements

Select an element to edit its properties:

**Text Properties:**

* Font family, size, weight
* Color and opacity
* Alignment and line height
* Letter spacing

**Image Properties:**

* Source URL or upload
* Fit mode (cover, contain, fill)
* Border radius
* Filters and effects

**Shape Properties:**

* Fill color or gradient
* Border width and color
* Shadow effects
* Opacity

### Step 4: Add Variables

Variables make your template dynamic. Click **Variables** to add:

1. Click **Add Variable**
2. Enter a name (e.g., `title`, `author`)
3. Set the type (string, number, boolean, image)
4. Optionally set a default value

Use variables in text with double braces:

```
{{title}}
{{author.name}}
{{currency(price, 'USD')}}
```

### Step 5: Save Template

1. Click **Save**
2. Enter a name and description
3. Click **Create Template**

Your template is now available via API.

## Template Settings

### General Settings

| Setting | Description |
| - | - |
| **Name** | Template identifier in the dashboard |
| **Description** | Notes about the template's purpose |
| **Tags** | Categorize templates (e.g., "social", "email") |

### Render Settings

| Setting | Description |
| - | - |
| **Default Format** | PNG, JPEG, or WebP |
| **Quality** | Compression level (1-100) |
| **Device Scale** | Retina support (1x, 2x, 3x) |

### Access Settings

| Setting | Description |
| - | - |
| **Visibility** | Public URL or API-only |
| **Allowed Origins** | CORS origins for public URL |

## Working with Variables

### Variable Types

| Type | Description | Example |
| - | - | - |
| **String** | Text content | `"Hello World"` |
| **Number** | Numeric values | `42`, `3.14` |
| **Boolean** | True/false | `true`, `false` |
| **Image** | Image URL | `"https://..."` |
| **Array** | List of items | `["a", "b", "c"]` |
| **Object** | Nested data | `{name: "..."}` |

### Using Variables in Text

```
Hello, {{name}}!
You have {{count}} new messages.
Total: {{currency(price, 'USD')}}
```

### Conditional Elements

Make elements appear based on conditions:

1. Select an element
2. In Properties, find **Conditional**
3. Enter a condition: `isPremium` or `count > 0`

The element only renders when the condition is true.

### Default Values

Set fallback values for variables:

1. Click the variable in the Variables panel
2. Enter a **Default Value**
3. This value is used when the variable isn't provided

## Organizing Templates

### Folders

Create folders to organize templates:

1. Click **New Folder** in the Templates view
2. Name your folder
3. Drag templates into folders

### Tags

Add tags for filtering:

1. Open template settings
2. Add tags in the **Tags** field
3. Filter by tags in the Templates list

### Search

Use the search bar to find templates by:

* Name
* Description
* Tags
* Variable names

## Duplicating Templates

Create a copy to modify:

1. Click the **...** menu on a template
2. Select **Duplicate**
3. Edit the copy as needed

## Deleting Templates

<Warning>
  Deleting a template is permanent. Existing images won't be affected, but you won't be able to render new ones.
</Warning>

1. Click the **...** menu on a template
2. Select **Delete**
3. Confirm deletion

## Version History

View and restore previous versions:

1. Open a template
2. Click **History** in the toolbar
3. Browse previous versions
4. Click **Restore** to revert

## Previewing Templates

### In-Editor Preview

1. Click **Preview** in the toolbar
2. Enter sample variable values
3. See the rendered result

### Test Renders

Generate a test image:

1. Click **Test Render**
2. Fill in variables
3. Click **Generate**
4. View or download the result

Test renders don't count against your quota.

## Exporting Templates

### Export as JSON

Export template configuration:

1. Click **...** menu
2. Select **Export**
3. Download the JSON file

### Import Template

Import from JSON:

1. Click **Import** in the Templates view
2. Select your JSON file
3. Review and save

## Keyboard Shortcuts

| Shortcut | Action |
| - | - |
| `Cmd/Ctrl + S` | Save template |
| `Cmd/Ctrl + Z` | Undo |
| `Cmd/Ctrl + Shift + Z` | Redo |
| `Cmd/Ctrl + D` | Duplicate element |
| `Delete` | Delete selected |
| `Cmd/Ctrl + G` | Group elements |
| `Arrow keys` | Nudge element |
| `Shift + Arrow` | Nudge 10px |

## Best Practices

### Design Tips

1. **Use a grid** - Enable snap-to-grid for alignment
2. **Set up styles** - Create reusable colors and fonts
3. **Group related elements** - Keep layers organized
4. **Test at different sizes** - Preview on various devices

### Variable Naming

```
✅ title, authorName, publishDate
❌ t, var1, x
```

Use descriptive, camelCase names.

### Performance

1. **Optimize images** - Use appropriate sizes
2. **Limit fonts** - Load only needed weights
3. **Simplify gradients** - Complex gradients slow rendering
4. **Test render time** - Keep under 5 seconds


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.