UI Layout

Estella provides a complete UI framework with layout, interaction, text rendering, and a library of ready-made widgets. Layout computation runs in C++/WASM for performance, while all components are configured from TypeScript.

Note

All UI plugins are registered by the engine automatically. No manual setup is needed.

Quick Start

In the editor: right-click the Hierarchy → Create → UI → choose a widget (Button, Slider, Text, etc.). The editor creates the entity hierarchy with all required components pre-configured.

To create UI from code:

import { defineSystem, addStartupSystem, Commands, Transform, Sprite, UIRect, Text, Parent } from 'esengine';

addStartupSystem(defineSystem([Commands()], (cmds) => {
    const root = cmds.spawn()
        .insert(Transform)
        .insert(UIRect, { anchorMin: { x: 0, y: 0 }, anchorMax: { x: 1, y: 1 } })
        .id();

    cmds.spawn()
        .insert(Transform)
        .insert(Sprite)
        .insert(UIRect, { size: { x: 200, y: 40 } })
        .insert(Text, { content: 'Hello World', fontSize: 24 })
        .insert(Parent, { entity: root });
}));

UIRect

Every UI element needs a UIRect to participate in layout. It defines position and size relative to the parent using an anchor-based system.

Property	Type	Default	Description
anchorMin	Vec2	{0.5, 0.5}	Bottom-left anchor (0–1)
anchorMax	Vec2	{0.5, 0.5}	Top-right anchor (0–1)
offsetMin	Vec2	{0, 0}	Pixel offset from anchorMin
offsetMax	Vec2	{0, 0}	Pixel offset from anchorMax
size	Vec2	{100, 100}	Width and height (when anchors are equal)
pivot	Vec2	{0.5, 0.5}	Pivot point for rotation and scaling

When anchorMin equals anchorMax, the element has a fixed size at the anchor point. When they differ, the element stretches between anchors and size is computed automatically.

FlexContainer

CSS Flexbox-like layout for automatic child arrangement, powered by the Yoga layout engine.

Property	Type	Default	Description
direction	FlexDirection	Row	Row, Column, RowReverse, ColumnReverse
wrap	FlexWrap	NoWrap	NoWrap, Wrap
justifyContent	JustifyContent	Start	Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly
alignItems	AlignItems	Stretch	Start, Center, End, Stretch
alignContent	AlignContent	Start	Start, Center, End, Stretch, SpaceBetween, SpaceAround — controls multi-line cross-axis alignment
gap	Vec2	{0, 0}	Spacing between items (x = column gap, y = row gap)
padding	Padding	{left:0, top:0, right:0, bottom:0}	Inner padding

FlexItem

Child properties for entities inside a FlexContainer.

Property	Type	Default	Description
flexGrow	number	0	How much the item grows to fill space
flexShrink	number	1	How much the item shrinks when space is tight
flexBasis	number	-1	Base size before grow/shrink (-1 = auto)
order	number	0	Display order override
alignSelf	AlignSelf	Auto	Auto, Start, Center, End, Stretch — overrides parent alignItems for this item
margin	Padding	{left:0, top:0, right:0, bottom:0}	Outer margin
minWidth / minHeight	number	-1	Minimum dimensions (-1 = none)
maxWidth / maxHeight	number	-1	Maximum dimensions (-1 = none)
widthPercent / heightPercent	number	-1	Size as percentage of parent (-1 = disabled)

LayoutGroup

Grid-like layout with direction, spacing, and alignment.

Property	Type	Default	Description
direction	LayoutDirection	Horizontal	Horizontal (0), Vertical (1)
spacing	number	0	Space between children
padding	object	{left:0, top:0, right:0, bottom:0}	Border spacing
childAlignment	ChildAlignment	Start	Start, Center, End
reverseOrder	boolean	false	Reverse layout order

Next Steps

• Text & Image — text rendering and image display
• Interaction — pointer events, focus, and drag
• Widgets — buttons, sliders, toggles, and more
• Masking & SafeArea — clipping and device safe areas