Template editor

The editor is the canonical way to build template schemas. It lets you:

• Upload a template image (PNG/JPG/PDF; PDFs are rasterized to PNG on ingest)
• Draw and configure text fields and image fields
• Preview renders using the real backend renderer
• Save templates directly to your library (no manual JSON upload flow)

Create a new template

1. Open /app/editor
2. Click Upload image and pick your template background
3. Add fields:
   • Add field: text field (Arabic shaping, RTL, fonts)
   • Add image: image placeholder (square/circle)
4. Configure fields in the right inspector
5. Click Save

After saving:

• The editor shows the template_id
• The URL becomes /app/editor?template_id=<id>
• Future saves update only the schema

Edit an existing template

1. Open /app/templates
2. Click Edit on a template
3. Adjust fields and click Save

Image fields (square/circle)

Image fields are placeholders you fill at render time by sending an images payload.

Field settings:

• shape: square or circle
• fit: cover or contain

Constraints:

• Image fields must be square (width == height). The editor enforces this automatically.

Render payload example:

{
  "template_id": "<TEMPLATE_ID>",
  "data": { "title": "مرحبًا" },
  "images": { "avatar": "data:image/jpeg;base64,..." }
}

Preview

Use Preview to render and inspect output. Preview uses inline render mode under the hood and sets missing_key_policy="empty" so missing images don't error during quick iteration.