SUI Designer an open-source visual UI editor for s&box
Razor is powerful, but coming from Unreal / UEFN, I really missed having a visual workflow like UMG / Widget Blueprint.
So I started building my own version of that idea for s&box.
Today I’m releasing the first public version of SUI Designer as an open-source project.
What is SUI Designer?
SUI Designer is a visual UI editor that runs inside the s&box editor.
You create a native .sui asset, double-click it, and get a visual editor where you can build UI without writing everything by hand from scratch.
The current workflow includes:
- visual canvas
- element palette
- hierarchy panel
- details inspector
- drag / resize / edit workflow
- anchor presets
- flexbox controls
- sample UI files
- Razor + SCSS generation
The idea is not to replace Razor completely.
The goal is to make UI creation less intimidating, especially for people coming from visual UI workflows, while still generating real code that can be edited manually.
Why I built it
s&box has been really fun to learn, but UI was one of the first areas where I felt the lack of a visual tool.
In Unreal, Widget Blueprint gives you a very approachable workflow for layout, preview, and iteration.
With s&box, Razor gives a lot of power, but the code-first workflow can be rough when you’re trying to quickly prototype HUDs, inventory screens, menus, or game-specific UI.
So SUI is my attempt at bringing a more visual workflow to s&box UI creation.
What it generates
SUI generates real:
.razor.razor.scss
The generated files are meant to be readable and editable, not hidden behind a black box.
I want the tool to help you move faster, but still let you drop into code whenever you need full control.
Current status
This is still early.
It is not a final polished product yet, and I’m sure there are rough edges, missing features, and things that need to be cleaned up.
But the foundation is working well enough that I wanted to release it publicly and let other people try it, break it, suggest ideas, and maybe help shape where it goes.
Links
Download: https://sbox.game/kikozl/sbox_ui_designer/
Documentation: https://kikozl1.github.io/sbox-ui-designer/
Feedback
I’d love feedback from other s&box developers.
Especially around:
- workflow
- generated Razor/SCSS structure
- missing UI elements
- editor UX
- how this could better fit real game development workflows
This started because I wanted to make UI creation easier for myself, but I’d love for it to become something useful for the community too.