Razor Panel Structure and Syntax
Razor Panel Structure s&box uses Razor syntax for UI panels with files and optional stylesheets. Basic Panel Component File Structure The Element The element is…
WorldPanel and ScreenPanel — HUD overlays and 3D world-space UI with Razor PanelComponent
WorldPanel and ScreenPanel — UI in the World s&box UI uses (Razor) attached to either a (HUD overlay) or (3D world-space UI). The same component works with both…
Sandbox.UI.Panel
Sandbox.UI.Panel Base class for UI panels. Overview Panel is the base class for all UI in s&box. Create panels using Razor (.razor) files or dynamically in code…
Razor Components: Reusable UI Fragments with RenderFragment and Generics
Razor Components in s&box allow you to define reusable UI content that can be used inside other razor files. They make panels more agile and composable. Creatin…
UIDecal Component - Render Razor UI as a Decal
A Render Component for s&box that allows you to project Razor UI onto surfaces as a Decal. Great for sticking UI onto rounded walls, curved surfaces, or any geo…
Razor Panels - s&box Documentation
Official s&box documentation for Razor Panels - the UI layout system. Razor Panels use a familiar HTML-like syntax with C# code-behind for building game interfa…
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 laye…
VirtualGrid — efficiently rendering large scrollable lists in s&box UI
VirtualGrid — Efficiently Rendering Large Lists in UI is a s&box UI panel that virtualizes a large collection — only the visible cells are created in the DOM. S…
Razor Panels: HTML/CSS UI with C# in s&box
s&box UI can be created using Razor syntax — web-like HTML/CSS combined with C#. Panels are not rendered via a HTML renderer; the syntax is a convenience layer …
BuildHash pattern for Razor panel optimization
BuildHash Pattern for Razor Panel Optimization BuildHash is a method you can override in Razor panels to prevent unnecessary rebuilds when the underlying state …
Localization (i18n)
Localization (i18n) Support multiple languages using localization tokens. How It Works Use tokens starting with in UI strings. The system replaces them based on…
ScreenPanel and WorldPanel: AutoScale Strategies, ZIndex, LookAtCamera, and Interaction Range
ScreenPanel and WorldPanel: UI Components in s&box Scenes ScreenPanel is the root component for 2D screen-space UI. It renders attached children to the screen. …
Hotloading — live code reloading, IL fast path, and common pitfalls
Hotloading — Live Code Reloading s&box recompiles and live-reloads your assembly whenever you save a or file. You don't need to restart the editor for most chan…
Inventory Hotbar UI Component
Inventory HUD with Hotbar A Razor PanelComponent that displays player inventory slots as a hotbar with mouse wheel and number key support. Implementation Key Fe…
Nameplate Component with Voice Activity
Nameplate with Voice Activity A Razor component that displays player nameplates above characters with voice chat visualization. Implementation SCSS Example Key …
Hotloading - s&box Documentation
Hotloading Whenever you save a code file in your project (.cs or .razor files), we recompile and attempt to live-reload the changed assembly. This lets you quic…
RPC-based chat system with avatars and Steam filtering
RPC-Based Chat System with Avatar Support This example shows a complete chat system using Razor, RPC broadcasting, Steam filtering, and avatar display. Key Feat…
Hotloading: Live Code Reload Without Editor Restart in s&box
s&box hotloading recompiles and live-reloads code when you save or files, without restarting the editor. How It Works IL Hotload (Fast): If only method bodies c…
HudPainter: Immediate-Mode HUD Drawing in s&box
Each has a property (HudPainter) for immediate-mode drawing onto the screen. More efficient than UI panels since there's no layout, stylesheets, or interactivit…
Styling Panels: SCSS, Inline Styles, and Code-Based Styling
s&box panels can be styled using SCSS stylesheets, inline styles, style blocks, or direct code manipulation. The styling system uses CSS-like syntax but is rend…