Editor basics

The editor opens when you create or open a template. It has four main areas.

The design area

The large area in the middle is the design area — a transparent surface the size of your template. Everything drawn here is what will render on air.

The grey area around the design area is not rendered. Use it as a working area to park objects while you rearrange.

Toolbar

The top toolbar gives you:

• Insert buttons for new objects (text, rectangle, image, icon, countdown, etc.).
• Undo / Redo.
• Zoom controls.
• Save — although the editor also auto-saves in the background, so you rarely need this.

Layers sidebar

The left sidebar is the layers list. Every object on the design area shows up here in z-order (top of the list renders on top). You can:

• Click a layer to select it.
• Drag to reorder.
• Toggle visibility or lock a layer.
• Rename for readability.

Properties panel

The right sidebar is the properties panel. It shows every attribute of the selected object — position, size, colors, font, animations, data binding.

Auto-save

Changes are saved automatically after a brief pause. If the browser crashes, what you see on reopen is what the server has. Explicit Save still works if you want to commit immediately.