Visual Editor
Node-based visual editor with AST round-trip
Visual Editor Overview
The DslVisualEditor provides a node-based visual interface for building Echo DSL templates. Each DSL construct (variables, conditionals, sections) is represented as a draggable node in a canvas, connected by edges that show the flow of your prompt.
AST Round-Trip
The visual editor maintains a two-way sync with the text editor. Changes in the visual canvas are serialized back to Echo DSL syntax, and changes in the text editor update the visual graph. The underlying AST (Abstract Syntax Tree) is the single source of truth.
- Edit visually, see the DSL code update in real time
- Edit the code, see the nodes rearrange
- No information is lost in either direction
Node Types
- Text nodes - Static text blocks
- Variable nodes -
{{variable}}with optional defaults - Conditional nodes - IF/ELSE IF/ELSE branches with operator configuration
- Section nodes - Reusable named sections
- AI Gate nodes - Intelligent content selection blocks
When to Use the Visual Editor
The visual editor is particularly useful when:
- Building complex prompts with many conditional branches
- Onboarding team members who are not yet familiar with Echo DSL syntax
- Getting an overview of prompt logic flow at a glance
- Restructuring the order of sections and conditionals