A common frustration with programming Graphical User Interfaces (GUIs) is that features for manipulating structures, such as lists and trees, are limited, inconsistent, buggy, or even missing. Implementing complete and convenient sets of operations for inserting, removing, and reordering elements in such structures can be tedious and difficult: a structure that appears as one collection to the user can be implemented as several different data structures and a web of dependencies between them. Structural modifications require changes both to the GUIs' model and view, and possibly extraneous bookkeeping operations, such as adding and removing event handlers.

This paper introduces a DSL that helps programmers to implement a complete set of operations to structures displayed in GUIs. The programmer specifies structures and relations between elements in the structure. Concretely, the latter are definitions of methods for establishing and unestablishing relations. Operations that manipulate structures are specified as rules that control which relations should hold before and after a rule is applied. From these specifications, our tools generate an easy-to-use API for structure manipulation. We target constraint system-based Web GUIs: the DSL generates JavaScript and relies on dataflow constraint systems for expressing dependencies between elements in GUI structures. Our DSL gives tangible representations with well-defined operations for ad-hoc and incidental GUI structures.