About
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