After over a year in development, Interface v1.0 is out. Interface is a tool and a framework built on top of UI Toolkit. I created Interface because I felt the UI Toolkit workflow could be improved. The UI Builder was confusing, extending it felt hacky, and creating custom elements with custom templates was just a mess with too much boilerplate code.
Interface aims to solve these problems. All of your UI can be created in the editor, including custom templates for controls. Want a custom toggle? Create a toggle template. Unsatisfied with the look of the dropdown menu? There is a template for that! Need a template that does not yet exist? Create one in just a few lines of code. Need an element or control that does not yet exist? It can be created in just a few lines of code.
And then the actual logic is handled on the framework side.
While built on top of the same UI framework as the UI Builder, the workflow is completely different.
Here is how the editor workflow works:
There are three main components to the editor workflow. Nodes, NodeGraphs and Styles.
Nodes are responsible for the elements in the UI hierarchy. Each Node will generate a single element in the hierarchy using the information provided to it by its components. This is information such as element data and styles. Element type is decided by the Node.
NodeGraphs are assets that hold Node hierarchies. In a way, you can think about them as scenes for Nodes. A NodeGraph will compile its hierarchy into a list of instructions that can be generated to create a final output element with a hierarchy.
This means that NodeGraphs also can be used as templates for controls such as Sliders and Dropdowns. By adding restrictions to the Nodes, you can ensure certain elements are present in the hierarchy, and you can enforce a certain structure. NodeGraphs can also be embedded into each other, which means you can take a complex hierarchy and break it into more manageable parts.
Styles, are responsible for the look and layout of the elements. They have a list of style values, which will be applied to a target element if the tags of the element matches the tags of the Style.