The widget system provides an easy way to group individual UI elements into reusable prefabs. Using widgets has two main benefits:

  • All instances of a specific widget share its visual appearance
  • Multiple team members can work on different parts of the UI at the same time

Creating a widget

To create a widget just select the UI elements that you want and right click in the viewport. From the context menu choose "Create widget".

Then enter the widget's name in the window that pops up.

Now the widget is created and is listed in the "Widgets" panel

Adding a widget instance to the scene

Once you have a widget you can add an instance of it to the scene. To do this simple click the "add widget instance" button in the widgets panel.

Edit widgets

To edit a widget simple click on the "edit widget" button it the widgets panel.

A new tab appears in the Editor that has the contents of the widget. Once you are finished with the changes to the widget click the save button in the tools panel to save it and return to the your main UI scene.

Sharing visual styles

Editing a widget and saving it makes the changes available to all its instances that are currently in the main scene. This a great way to share the same visual style across multiple UI elements.

The widget's instances have not only its default visual appearance but its animations as well so using widgets is a great way to share animations too.

Exporting widgets to another scene

The widgets are saved as individual HTML files in the "widgets" folder which is in the "uiresources" in the main folder of the Editor. You can copy widget files from there to another project/computer to the corresponding "widgets" folder in the Coherent Editor.

Team collaboration

Using widgets multiple team members can work on different parts of the UI at the same time. Each of the UI developers can create parts of the UI as widgets and then export them. Then the chief UI developer can combine all the widgets in a single UI composition.

All widgets that are in the "widgets" folder of the Editor are visible to all the open documents in the Editor so this way you can share widgets locally between separate HTML compositions.