Rendering

ELEMENTS provides a few different ways to render your UI.

Build a VisualElement

Given any instance of IElement or Component, you can call the BuildVisualElement() method to convert it to a VisualElement. This is the most flexible way of using ELEMENTS. The resulting VisualElement can be inserted into your in-game or editor UI wherever you would like.

public class CustomUI : MonoBehaviour
{
  [SerializeField] private UIDocument uiDocument;

  private void OnEnable()
  {
    var ui = new HorizontalGroup(
      new Button(new Label("Click me!")),
      new Button(new Label("No, click me!"))
    );

    var visualElement = ui.BuildVisualElement();

    uiDocument.rootVisualElement.Add(visualElement);
  }
}

Render a Component in a VisualElement

ELEMENTS provides an extension method on VisualElement to quickly render a Component.

public class CustomUI : MonoBehaviour
{
  [SerializeField] private UIDocument uiDocument;

  private void OnEnable()
  {
    uiDocument.rootVisualElement.RenderElement(new ExampleComponent());
  }
}

Render a Component in a UI Document

You can also use the RenderComponent method directly on the UIDocument.

public class CustomUI : MonoBehaviour
{
  [SerializeField] private UIDocument uiDocument;

  private void OnEnable()
  {
    uiDocument.RenderElement(new ExampleComponent());
  }
}

ELEMENTS powered Editor Windows

You can also use the RenderComponent method on an EditorWindow...

public class ExampleEditorWindow : EditorWindow
{
  [MenuItem("ELEMENTS/Sample Window")]
  public static void ShowPreferences()
  {
    var window = GetWindow<ExampleEditorWindow>();
    window.titleContent = new GUIContent("ELEMENTS");
    window.RenderElement(new ExampleComponent());
    window.Show();
  }
}

Or, alternatively you can structure your custom EditorWindow like this...

public class ExampleEditorWindow : EditorWindow
{
    [MenuItem("ELEMENTS/Sample Window")]
    public static void ShowPreferences() => GetWindow<ExampleEditorWindow>().Show();

    private void OnEnable()
    {
        titleContent = new GUIContent("ELEMENTS");
        this.RenderElement(new ExampleComponent());
    }
}

ElementPortal for floating elements

If your UI uses floating elements like Dialog, Popover, Alert, or ContextMenu, you need an ElementPortal in your scene. The portal creates an overlay surface that these elements render into.

Add the ElementPortal component to a GameObject in your scene. It requires a UIDocument on the same GameObject — one will be added automatically.

Floating elements use ElementPortal.Current by default, so you don't need to pass the portal reference manually. If you need to target a specific portal, you can pass it explicitly to the constructor.

Additive rendering

By default, when you use RenderElement it will replace the contents of whatever you are rendering to. If you would prefer to append your UI to whatever already exists, you can pass an optional additive: true parameter...

uiDocument.RenderElement(new ExampleComponent(), additive: true);