Visual Editor

Visual Editor Overview

The visual editor is a card-based interface for building Echo DSL templates. It renders your prompt as a series of visual blocks — text areas, conditional cards, section cards — instead of raw DSL syntax.

Unified Text Areas

All text input uses a single editor component (DslTextArea). When not editing, it displays colored badges for inline DSL elements:

• Blue badges — Variables ({{variable}})
• Purple badges — Context references
• Cyan badges — Includes
• Amber badges — Imports

Click on a text area to switch to editing mode with a standard textarea input.

Block-Level DSL Cards

Conditionals ([#IF]) and sections ([#SECTION]) render as visual cards with headers showing the condition or section name. No raw DSL syntax is visible in visual mode.

Cursor-Based Inserts

Add variables, conditions, sections, or other DSL constructs at your cursor position using the action bar buttons. The insert happens exactly where your cursor is in the text area.

Block Management

• Continue Writing — A “Continue writing...” button appears after condition/section blocks so you can add text between blocks
• Remove empty blocks — Empty text blocks show an X button to remove them
• Add between blocks — A + divider appears between adjacent blocks to insert text

Two-Way Sync

The visual editor maintains a two-way sync with the code editor. Edit in visual mode and the DSL code updates. Edit in code mode and the visual cards update. The Echo DSL AST (Abstract Syntax Tree) is the single source of truth — no information is lost in either direction.