SUI Designer

A visual UI editor for s&box — design .sui documents in a paint-based canvas, generate idiomatic Razor + SCSS, preview live in Play mode.

Get started now View on GitHub

---

What it does

SUI Designer turns the manual loop of writing a Razor file by hand, editing SCSS, hot-reloading the engine, and hoping the layout works into a WYSIWYG workflow:

1. Drop elements onto a canvas (Panel, Image, Text, Button, ProgressBar, Hotbar, InventoryGrid, …)
2. Edit position, size, anchor, style, layout in a Details panel
3. See the result instantly — paint-based canvas + on-demand runtime preview
4. Test in Play opens a real Play-mode scene with a TPS player and mounts your UI as a ScreenPanel
5. Compile to your project’s Code/ folder, with full ownership control — generated files marked, user-edited .User.scss sidecar protected

The .sui document is JSON-backed and version-controlled. The generator emits readable, hand-editable Razor + SCSS that compiles in any s&box game.

Getting started

If you’ve never opened SUI Designer before, start here:

• Installation — bring the addon into your s&box project (2 min)
• Your first UI — build a HUD from scratch (10 min)
• Test in Play — see your UI on a real player (3 min)

User guide

End-to-end reference for the editor and every panel element.

• Editor tour
• Palette
• Hierarchy
• Details panel
• Canvas
• Top toolbar
• Alignment tools
• Compile Results

Element reference

One page per palette type. Properties, defaults, generated output.

• Canvas (root)
• Panel
• Text
• Image
• Button
• HorizontalBox
• VerticalBox
• Overlay
• Grid
• ScrollPanel
• ProgressBar
• InventoryGrid
• InventorySlot
• ItemIcon
• Hotbar

Concepts

• Layout modes (Absolute vs Flex)
• Anchors and pivot
• Styling
• Visibility, overflow, pointer-events

Workflows

• Test in Play workflow
• Compile + output management
• User SCSS customization
• Undo/Redo + commands

Architecture (for developers)

If you want to contribute or extend the editor:

• Overview
• Document model
• Canvas renderer
• Layout solver
• Generator (Razor + SCSS)
• Compile writer
• Preview system

Reference

• .sui JSON schema
• Allowed CSS properties
• Element type matrix
• Keyboard shortcuts
• Known issues

Tutorials

• Build a survival HUD
• Build an inventory screen
• Build a death modal

Support

• Troubleshooting
• FAQ
• Changelog

---

At a glance

What	Details
Asset extension	.sui (JSON)
Generates	<name>.razor + <name>.razor.scss (+ <name>.User.scss sidecar)
Target	s&box PanelComponent (Razor UI)
Editor	100% custom paint chrome — no DockManager, no Editor.TabWidget
Preview	Embedded SceneRenderingWidget + on-demand “Test in Play” with TPS player
License	MIT

Versioning

This documentation tracks the V1.0 release of SUI Designer.

For older or in-progress changes, see the Changelog.