The Template Editor
One screen: a live preview on the left, a focused inspector panel on the right — no separate design tool to learn.
A Tour of the Editing Screen
Every template opens in the same layout: a live preview and layer list on the left, and a panel on the right that shows only the fields relevant to whatever you’ve selected — the template itself, or one specific layer.
🟦 The live preview
A CSS approximation of your template, updated as you type or drag. Toggle Grid for alignment guides, or Safe zone to see the margin some social platforms crop into. Click Check the real output at any time for the exact server-rendered image.
🟩 The layer list
Every layer, in drawing order (the order they’re stacked — later layers draw on top). Click any row to select that layer and load its settings in the panel on the right. + Add layer appends a new one at the end of the list.
🟧 The inspector panel
Shows Template settings (name, canvas size, background, Assignment rules) when nothing else is selected, or the selected layer’s own settings, grouped into sections: Identity & visibility, Position & transformation, Typography (text layers only), and Appearance (gradient/border on rectangles, background/padding on text — hidden entirely for image layers, which don’t need it).
🟥 Selecting on the canvas or in the list — either way works
Clicking a shape directly on the live preview selects it in the layer list too, and highlights it with a red outline — useful for finding which layer is which once a template has several, especially if a few share a similar name.
🟫 Undoing changes
Discard unsaved changes reloads the last saved version of the template, always available. The two bundled default templates also get Reset to original, restoring their bundled values even after saved edits. A template created with Duplicate gets its own Undo changes since duplicating instead — back to exactly how it looked the moment it was copied, however many saves happened since.