> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.templated.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Why Does My Render Look Different from the Editor?

# Why Does My Render Look Different from the Editor?

Renders should match the Editor, but sometimes there are differences.

## Common Causes

### 1. Font Not Loading

**Symptom:** Text appears in wrong font

**Causes:**
* Custom font not uploaded
* Font name mismatch
* Google Font typo

**Fix:**
* Verify font name exactly matches
* Re-upload custom fonts
* Check Google Font spelling

### 2. Image URL Issues

**Symptom:** Image missing or shows placeholder

**Causes:**
* URL not accessible from our servers
* URL requires authentication
* Temporary/expired URL

**Fix:**
* Use publicly accessible URLs
* Ensure URLs don't require login
* Use permanent URLs (not presigned with expiry)

### 3. Browser vs Server Rendering

**Symptom:** Slight layout differences

**Cause:** Editor preview uses your browser; renders use our servers.

**Fix:**
* Trust the render output as final
* Minor pixel differences are normal
* Report significant differences to support

### 4. Animation State

**Symptom:** Elements positioned differently

**Cause:** Animations captured at wrong moment

**Fix:**
* For images: Animations aren't applied (static frame)
* For videos: Check animation timing

### 5. Hidden Layers

**Symptom:** Extra elements appearing

**Cause:** Layers hidden in Editor but not via API

**Fix:**
```json
{
  "layers": {
    "unwanted-layer": { "hide": true }
  }
}
```

## Debugging Steps

1. **Check layer names** — Exact match required
2. **Verify URLs** — Test image URLs directly
3. **Review font names** — Case-sensitive
4. **Compare dimensions** — Template vs render size
5. **Test in Playground** — Isolate the issue