UI Builder

UI Builder lets you visually create and edit UI using UIElements, UXML, and USS.

Feature List

Global

  1. Can delete element via Delete key.
  2. Can cut/copy/duplicate/paste element via hot key, with the copied element (and all its children) being pasted as a child to the the parent of the currently selected element (or root if nothing is selected).
  3. Can cut/copy/duplicate/paste Template instances, adding the correct Template registrations to the file.
  4. Can copy/paste elements to and from a text file as valid UXML.
  5. Can undo/redo style changes, hierarchy changes, and selection changes.
  6. Open documents, current selection, and unsaved changes will survive domain reload.
  7. Double-clicking a .uxml asset in the Project will open it using the UI Builder.

Explorer

StyleSheet

  1. Can select the main StyleSheet by the "StyleSheet" Explorer item, showing its dedicated Inspector.
  2. Selectors with .classNames get pills for each class created in the Explorer.
  3. In the Explorer, you can select selectors by clicking on the row or a class pill.
  4. Can drag a style class pill from the Explorer onto an element in the Viewport to add the class.
  5. Can drag a style class pill from the Explorer onto an element in the Hierarchy to add the class.
  6. Dragging a style class onto an element inside a template instance or C# type in the Viewport adds it to the parent instance or C# element.
  7. Dragging a style class onto an element inside a template instance or C# type in the Hierarchy does nothing.
  8. Below all selectors there's a field that lets you create new selectors (by pressing enter).
    1. If Class mode is selected, a new .class selector will be added and you have options for the pseudo states to add.
    2. If Complex mode selected, the raw string will be used for the full selector name, and the pseudo stats MaskField should not be visible.
  9. When hovering or selecting a style selector in the Explorer, all elements in the Canvas that match this selector will highlight.
  10. With a selector selected, you can use the standard short-cuts and Edit menu to copy/paste/duplicate/delete it. You can also copy/paste the USS for the selector to/from a text file.
  11. Right-clicking anywhere in the Hierarchy will open the Copy/Paste/Duplicate/Delete context menu.

Hierarchy

  1. Can click to select element.
  2. Can drag element onto other elements in the Hierarchy to reparent.
  3. Can drag element between other elements to reorder, with live preview in the Canvas.
  4. Can drag element onto other elements in the Viewport to reparent.
  5. Elements are displayed using their #name in blue, or C# type in white if they have no name.
  6. Elements are displayed grayed out if they are children of a template instance or C# type.
  7. Selecting an element inside a template instance or C# type will display the Inspector in read-only (disabled) mode.
  8. Dragging element onto a template instance or C# type element in the Viewport reparents it to the parent instance or C# element.
  9. Dragging element onto a template instance or C# type element in the Hierarchy does nothing.
  10. With an element selected, you can use the standard short-cuts and Edit menu to copy/paste/duplicate/delete it. You can also copy/paste the UXML for the element to/from a text file.
  11. Right-clicking anywhere in the Hierarchy will open the Copy/Paste/Duplicate/Delete/Rename context menu.
  12. Can double-click on an item to rename it.

Library

  1. Displays built-in elements under a Unity heading.
  2. Displays project defined factory elements and UXML files (with .uxml extension) under a Project heading. This includes assets inside both the Assets/ and Packages/ folders.
  3. Can double click to create new element instance in the root.
  4. Items that have corresponding .uxml assets will have an "Open" button visible that will open the asset for editing in the UI Builder. The currently open .uxml asset in the Library will be grayed out and will not be instantiable to prevent infinite recursion.
  5. Can click-drag onto a Viewport element to create new instance as a child.
  6. Can click-drag onto a Hierarchy element to create new instance as a child, or between elements to create as a sibling.
  7. Can create (double-click or drag) template instances from other uxml files.
  8. When creating a new empty VisualElement, it will have an artificial minimum size and border which will be reset as soon as you parent a child element under it or change its styling.
  9. Hovering over items in the Library will show a preview of that element in a floating preview box. The preview will use the current Theme selected for the canvas.
  10. Library pane will update if new uxml files are added/deleted/move/renamed to/from the project.

Viewport

Toolbar

  1. Pressing New will clear the selection, the Viewport canvas, the Explorer, and all undo/redo stack operations for the previous document. A prompt will be displayed if there are unsaved changes.
  2. Pressing Save will ask for new file names for USS and UXML if it is the first save, otherwise, it will overwrite the previously saved/loaded files.
  3. Saving should work even if the openend assets have been moved or renamed (in which case, the Builder should update the USS Style paths inside the UXML document).
  4. Pressing Save As will always ask for a new file name and save as a copy of the current document.
  5. Dragging a .uxml asset onto the Object Field will load that file.
  6. Can preview Light/Dark theme inside the canvas via the Theme popup field, independent from the current Editor Theme. Default Theme will use the current Editor Theme, while the other options will force a theme to be used in the canvas.
  7. Pressing Game will change the background of the canvas to a render texture of the main camera in the Scene. This will render the camera view in real time.
  8. Pressing Preview will toggle Preview Mode where you can no longer select elements by clicking on them in the Viewport, but instead, Viewport elements recieve regular mouse and focus events.

Save Dialog

  1. Entering paths that do not start with "Assets/" or "Packages/" will show an invalid path message and the Save button will be disabled.
  2. Updating the UXML Path field will automatically update the USS Path field to match, until the USS Path field is changed manually.
  3. Entering file names without extensions will still add the correct extensions when creating the assets.
  4. The "..." button beside each path field should bring up the system Save File Dialog.
  5. Folders in an otherwise valid path will be created if missing.

Canvas

  1. Can click to select element.
  2. Selecting an element inside a template instance or C# type selects the parent instance or C# element.
  3. Relative position elements have bottom, right, and bottom-right handles that change inline height and width styles.
  4. Absolute position elements have all 4 side and 4 corner handles visible.
  5. Absolute position elements have 4 anchor handles visible to set or unset the left/right/top/bottom inline styles.
  6. Absolute position elements can be click-drag moved, changing top/right/left/bottom inline styles depending on anchor state.
  7. Resize and position handles change different styles depeneding on anchor state (ie. if left and right styles are set, changing the width changes the right style - otherwise, changing the width changes the width style).
  8. Canvas size will be restored after Domain Reload or Window reload. It will be reset when opening a new document.
  9. When changing Width or Height in the Inspector, the corresponding resize handles in the canvas will highlight.
  10. When hovering over elements in the Canvas, the corresponding entry in the Hierarchy will highlight.
  11. When hovering over elements in the Canvas, all Explorer entries of style selectors that match this element will highlight.
  12. If the Canvas is bigger than the Viewport, a Fit Canvas button will appear that will resize the Canavs to fit in the Viewport.

Previews

UXML

  1. Updates text on any hierarchy, attribute, or inline style changes.
  2. Shows unsaved StyleSheet as path="*unsaved in-memory StyleSheet with...".
  3. Upon saving, all unsaved StyleSheet paths are fixed.
  4. Shows <Style> tags for all root elements.
  5. (2019.3+) A relative path to a .uss asset will be used in the src attribute of the <Style> tag if the asset is in the same folder (directly or in a subfolder) as the main asset. Otherwise, an absolute path will be used.
  6. (2019.3+) A relative path to a .uxml asset will be used in the src attribute of the <Template> tag if the asset is in the same folder (directly or in a subfolder) as the main asset. Otherwise, an absolute path will be used.

USS

  1. Updates on all StyleSheet/Selector changes.
  2. Dimension (Length) styles have the unit added to the USS (px). (No support for % yet.)

Inspector

StyleSheet Section

  1. Only visible if the selection is a StyleSheet (by selecting the Shared Styles section header in the Explorer).
  2. Can create new Selectors by entering text in the Selector field and pressing Enter (or the Create button).
  3. Shows quick help on selectors.

Style Selector Section

  1. Only visible if the selection is a selector in the current StyleSheet.
  2. Can change the selector text by changing the Selector field and pressing Enter.

Attributes Section

  1. Only visible if the selection is an element in the current document.
  2. Shows all valid attributes for the selected element, given its C# type.
  3. Attribtues already set to a non-default value are highlighted with the same styling as Prefab overrides.
  4. Changing attributes updates the Explorer, the Viewport, and the UXML Preview and changes are immediate.
  5. Right-click Unset on an attribute will remove it from the UXML tag, reset the value to the element-defined default, and reset the override styling.

Inherited Styles Section

  1. Only visible if the selection is an element in the current document.
  2. Can add existing style class to element by typing the name of the class in the field inside Inherited Styles and pressing the Add Style Class to List button (or pressing Enter).
  3. Can extract all overwritten Local Styles to a new style class by typing the name of the class in the field inside Inherited Styles and pressing the Extract Local Styles to New Class button.
  4. If the style class being added to an element is not valid, an error message will appear.
  5. All style classes on the current element are displayed as pills.
  6. Style class pills have an X button that lets you remove them from the element.
  7. Under Matching Selectors, all matching selectors on the current element are displayed with read-only fields for their properties.

Local Styles

  1. Only visible if the selection is an element in the current document, or a selector in the current StyleSheet.
  2. Changing any value will set it in the StyleSheet or inline UXML style attribute and highlight it with a solid bar on the left side and bold font.
  3. Style category headers will have an override bar and bold font if any child styles are overridden.
  4. All style value types are supported.
  5. Sub-section foldout expanded states are preserved between selection changes and domain reload.
  6. Right-click Unset on an style field will remove it from the UXML inline style or StyleSheet, reset the value to default, and reset the override styling.
  7. Align section toggle button strips will change icons depending on the value of the flex-direction style.