Razor Panels: HTML/CSS UI with C# in s&box PanelComponent System

s&box Razor Panels use web-like HTML/CSS syntax with C# for UI creation. Panels are rendered natively (not via HTML renderer) — the syntax is a convenience layer.

PanelComponent (Root)

Every UI starts with a PanelComponent on a GameObject with ScreenPanel or WorldPanel:

@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent

<root>
    <div class="title">@MyStringValue</div>
</root>

@code
{
    [Property, TextArea] public string MyStringValue { get; set; } = "Hello World!";
    protected override int BuildHash() => System.HashCode.Combine( MyStringValue );
}

BuildHash Optimization

Panel contents only rebuild when BuildHash() returns a different value. Include all dynamic values. Force rebuild with StateHasChanged().

Child Panels

Child panels inherit from Panel (default for .razor files):

<MyChildPanel Health=@(30) Armor=@(75) />

Store references with @ref:

<MyChildPanel @ref="PanelReference" />

Two-Way Binds

Sync values between controls and variables:

<SliderEntry Value:bind=@IntValue></SliderEntry>

Key Differences

• PanelComponent is a Component (has OnStart, OnUpdate) but access its Panel via Panel.Style
• Panel is not a Component (uses OnAfterTreeRender and Tick() instead)
• You cannot use <MyPanelComponent /> inside another Panel — PanelComponents must be on GameObjects