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:

{
  "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

Updated on: 11/01/2026