Skip to content

UI Properties overview

General Components Properties


Blue and Orange field names: Blue field names indicate that the field and value are inherited from a parent class. Orange field names indicate that the value of the field has been changed.


Under Info you can find which Show the UI is affiliated to, and it’s kind.
UI show can be:

  1. Show UI - which means it is a show UI you created


  2. Template UI - which means Erizos Studio has created that template while importing the scene from the render engine.



Under Common you can see the following:

  1. the type of component.
  2. It’s name - this is the name used in the scripting part of the ui building.
  3. Set it’s visibility to the operator
  4. Set the text of that component if any.
  5. Disable the component without deleting it.


the Text field name in this image is orange, which means the default value has been changed



Under Layout you can set the size and position of the component.
The UI builder gives you full control over the look and position of the components, with Anchor adjusting and overflow control.



Under Typography you can control the Text portion of the component, using fonts, weight and size as you like.
You can adjust the text position for your needs, using the multiple aligns, colors and wrap options.


Many of the field names in this image are blue, which indicates that they are inherited.



Under Style you can change the color of the component background.



Under Border you can adjust the component border look and feel.
By using the radial selector you can choose which border will be affected, or all of them.

Style lets you change how the border is drawn (full line, dashed etc).
Width and color let you change the thickness of the line, and it color.
Radius lets you bevel round edges , either all uniformly, or each one individually.



Under Misc you can control the cursor style while hovering over the selected component and the Opacity of the selected component.
You can control the opacity of the entire UI by selecting the background and changing the opacity


Box shadow

Under Box shadow you can add and stylize the shadow of the component.
You can choose Outer or inner shadow and personalize it look - like angle, position and color.

box shadow

Text shadow

Under Text shaodw you can add and stylize the shadow of the text in the component, using the same tools as box shadow.

text shadow

Custom CSS

In addition to the multiple built in options to stylize your UI, you can also use pure CSS to add other effects and styling options to your UI.