UI Markup

Hytale uses a custom markup language for UI files (.ui). It’s a curly-brace DSL - not HTML, not XAML.

Basic Syntax

ElementType #OptionalId {
  Property: value;
  NestedProperty: (SubProp: value, SubProp2: value);

  ChildElement {
    Property: value;
  }
}

Element Types

Common element types:

Element	Purpose
Group	Container for layout
Label	Text display
TextButton	Clickable button with text
TextInput	Text input field
Slider	Range slider
Dropdown	Dropdown selector
Checkbox	Toggle checkbox
Image	Image display
ItemSlot	Inventory slot

Element IDs

Prefix with # to assign an ID for server targeting:

Label #Score {
  Text: 0;
}

TextButton #SubmitBtn {
  Text: Submit;
}

Server-side:

cmd.set("#Score.Text", "100");

Properties

Common Properties

Group {
  Anchor: (Width: 200, Height: 100, Left: 10, Top: 10);
  Visible: true;
  Background: "Textures/Panel.png";
  LayoutMode: Left;
  Padding: (Horizontal: 10, Vertical: 5);
}

Label {
  Text: Hello World;
  Style: (FontSize: 24, HorizontalAlignment: Center);
}

TextButton {
  Text: Click Me;
  Disabled: false;
}

Layout Modes

Control how children are arranged:

Mode	Behavior
Left	Horizontal left-to-right
Top	Vertical top-to-bottom
Right	Horizontal right-to-left
Bottom	Vertical bottom-to-top
Center	Centered
Middle	Vertically centered
LeftCenterWrap	Left-to-right with wrapping
TopScrolling	Vertical with scrollbar

Group {
  LayoutMode: TopScrolling;
  // children stack vertically with scroll
}

Nested Properties

Use parentheses for complex values:

Label {
  Style: (
    FontSize: 32,
    FontName: "Secondary",
    HorizontalAlignment: Center,
    RenderBold: true,
    RenderUppercase: true
  );
  Anchor: (Width: 200, Height: 50);
}

Imports and Value Definitions

Imports

Import another .ui file as a variable:

$Common = "../Common.ui";
$Sounds = "../Sounds.ui";

Value Definitions

Define reusable values with @:

@ButtonWidth = 200;
@LabelStyle = (
  FontSize: 20,
  HorizontalAlignment: Center
);

Label {
  Anchor: (Width: @ButtonWidth);
  Style: @LabelStyle;
}

Using Imported Values

Reference values from imported files:

$C = "../Common.ui";

TextButton {
  Style: $C.@DefaultButtonStyle;
}

Spread Syntax

Merge values with ...:

$C = "../Common.ui";

TextButton {
  Style: (
    ...$C.@DefaultButtonStyle,
    FontSize: 24  // override
  );
}

Instantiating Imported Elements

Use imported elements as templates:

$C = "../Common.ui";

$C.@PageOverlay {}

$C.@Container {
  Anchor: (Width: 600, Height: 400);

  // override nested element properties
  #Title {
    @Text = My Custom Title;
  }
}

Translation Keys

Prefix with % for localized text:

Label {
  Text: %mymod.welcome.title;
}

TextButton {
  Text: %mymod.buttons.submit;
}

Colors

Background: #FF0000;           // RGB hex
Background: #000000(0.5);      // with alpha (0-1)

See Styling for all color formats.

Comments

// this is a comment
Group {
  // another comment
  Text: value;
}

Complete Example

$C = "../Common.ui";
$Sounds = "../Sounds.ui";

@HeaderHeight = 60;

$C.@PageOverlay {}

Group {
  Anchor: (Width: 500, Height: 400);
  Background: #000000(0.8);

  // header
  Group {
    Anchor: (Height: @HeaderHeight);
    LayoutMode: Center;

    Label #Title {
      Text: %mymod.page.title;
      Style: (
        FontSize: 28,
        FontName: "Secondary",
        HorizontalAlignment: Center
      );
    }
  }

  // content area
  Group #Content {
    Anchor: (Top: @HeaderHeight, Bottom: 60);
    LayoutMode: TopScrolling;
    Padding: (Horizontal: 20, Vertical: 10);
  }

  // footer
  Group {
    Anchor: (Height: 60, Bottom: 0);
    LayoutMode: Center;

    TextButton #CloseBtn {
      Anchor: (Width: 120, Height: 40);
      Text: %common.close;
      Style: (
        ...$C.@DefaultButtonStyle,
        ...$Sounds.@ButtonSounds
      );
    }
  }
}