Visual and Textual Language Synchronization for End-User Programming Environments

End-User Programming (EUP) environments typically offer either a text-based or a visual programming language for end users. Even when both options are provided, they lack real-time synchronization between the two representations. This study explores the integration of the textual and visual representations of a domain-specific language (DSL) for EUP based on Behaviour-Driven Development (BDD) scenarios. By combining a visual editor featuring a block-based language with a textual representation featuring syntax highlighting, error detection, and auto-completion, the platform can enhance accessibility, flexibility, and efficiency in EUP. The primary challenge investigated is achieving real-time, two-way synchronization between the visual and textual editors to maintain consistent code representation, crucial for an optimal user experience. The solution leverages Blockly’s custom code generators to translate blocks to text and Abstract Syntax Trees (ASTs) to convert text to blocks. We evaluated our approach in two use cases in the robotics domain, confirming the potential of the dual editor to offer flexible, domain-tailored end-user programming, with potential for broad future applications.