s&box

Visual UI editor for s&box. Design .sui documents in a paint-based canvas, generate clean Razor + SCSS, and preview live in Play mode with one click. Inspired by UMG (UE/UEFN), built for s&box's PanelComponent + flexbox runtime.

What's in V1
- 16 element types: Panel, Text, Image, Button, ProgressBar, Grid, InventoryGrid, InventorySlot, Hotbar, ScrollPanel and more
- Full anchor + pivot system (12 presets including 3 stretch variants)
- Flexbox containers with all properties exposed in the inspector
- One-click Test in Play — compiles and mounts your UI on a real character in a stage scene
- Multi-select, alignment tools, snap-to-grid, marquee, 256-level undo/redo
- 5 sample .sui files included (survival HUD, inventory screen, death modal, quest log, loot pickup)

Generated code
Outputs hand-editable Razor + SCSS to your project's Code/ folder. The .User.scss sidecar preserves your custom styles, hovers, and animations across every recompile — your customizations never get overwritten.

Honest scope
V1 ships static UI design + code generation + Test in Play. Data bindings (HealthBar ← PlayerStats.Health, UMG ViewModel style) are coming in V1.5, in active development. WorldPanel support and animation timeline are V2.

Usage
After install: right-click in Asset Browser → New → Sbox UI Document. Double-click the .sui file to open the designer window.

Quick start

Install the library — clone this repo into your s&box project's Libraries/ folder, or pull as a published package. Editor picks it up on next launch.
Open the editor in s&box — File → New Project → ensure your .sbproj references the library.
Create your first .sui — right-click in Asset Browser → New → Sbox UI Document. Name it (e.g. InventoryUI).
Open it — double-click. The Sbox UI Designer window appears.
Drag elements from the Palette onto the canvas OR click to add them at root.
Edit properties in the Details panel on the right (anchor, position, size, color, text content, etc.).

Click Compile in the toolbar (or Ctrl+B). First time: a folder picker asks where the generated files should land (typically Code/UI/ or similar inside your project).

The engine hot-loads the new .razor + .razor.scss — your PanelComponent type is now available to mount in your scene.

Use the Preview button to see the live render in a modal without leaving the designer.

Concepts

.sui is the source of truth. All edits go here. The schema is documented at docs/reference/sui-json-schema.md.
.razor / .razor.scss are generated. Each generated file carries a SUI:GENERATED header so the compile pipeline can detect manual edits and refuse to overwrite them.
Manifest tracks ownership. <output>/.sui-manifest/<DocumentId>.json records which files this document owns + their hashes at last write. Recompile-with-changes triggers a backup before overwrite, recompile-without-changes is a no-op (Skipped).
Backups are outside Code/. Backups land in <projectRoot>/.sui-backups/<DocName>/<UTC-timestamp>/... so the engine never compiles them as duplicate partial class declarations.
Preview cache is separate from final output. Preview cache lives at <projectRoot>/Code/_sui_preview/<ClassName>/ and uses a sub-namespace .SuiPreview to avoid colliding with the final-compiled type.

Sample documents

The Tools menu has Install Sample Documents which writes 4 canonical samples into Assets/SuiSamples/:

simple_panel.sui — minimal panel + centered text. Anchor + pivot basics.
inventory_basic.sui — InventoryGrid + 15 InventorySlot composition.
hotbar_basic.sui — bottom-anchored Hotbar with 9 slots, first one highlighted.
hud_survival.sui — composite top-left HUD with Health / Stamina / Hunger ProgressBars + labels.

Open any of them to see the schema in action.

Links
- Docs
- GitHub
- License: MIT

Package

Tags