u/Ostrich_Chance

▲ 68 r/sandbox

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.

u/Ostrich_Chance — 23 hours ago
▲ 13 r/sandbox

SUI Designer MVP visual UI editing inside s&box

I skipped yesterday’s devlog, but for a good reason.

I spent the day validating the MVP for SUI Designer, a visual runtime/in-engine UI editor for s&box.

The idea is simple: build, edit, and test game UI visually instead of adjusting everything only through code.

Right now the MVP already has:

  • Visual canvas editing
  • Element selection, drag, resize, and positioning
  • Hierarchy tree
  • Widget palette
  • Details/Inspector panel
  • Transform, anchor, margin, and padding editing
  • Basic widgets like Panel, Text, Image, Button, HorizontalBox, VerticalBox, Grid, and Overlay
  • Asset/image picker
  • Text styling controls
  • Color picker/tint support
  • Visual preview
  • Initial compile/output pipeline

Still very early and there’s a lot of UX/layout polish to do, but the core workflow is working now.

u/Ostrich_Chance — 5 days ago
▲ 28 r/sandbox

A lot of people told me I should focus on multiplayer / replication early, so today I decided to stop avoiding it and actually test the inventory system in a networked session.

This ended up being one of the biggest updates so far.

The inventory system is now running in multiplayer, with multiple players seeing the same replicated state in real time.

In the video, I’m testing with 4 players and showing:

  • players dropping items for each other
  • dropped loot spawning in the world with physics
  • other players seeing the drops in real time
  • equip / unequip syncing across clients
  • clothing changes being visible to other players
  • chests with synchronized loot/storage
  • players looting the same world/chest state
  • death and respawn flow
  • ragdoll bodies staying in the world after death
  • dead bodies becoming lootable by other players

The death system was probably the most interesting part of this update.

When a player dies, the body stays where it fell with ragdoll enabled. Other players can then interact with that body and loot it like a container. The dead player can respawn and continue playing.

It’s still rough, and I’m sure there are a lot of edge cases I need to clean up, but this was the first update where the inventory stopped feeling like a local UI/system experiment and started feeling like part of a real online gameplay loop.

Also, honestly, s&box’s replication system has been one of the easiest multiplayer systems I’ve had to understand so far. I expected this part to be way more painful, but the engine made the core flow surprisingly clear.

Next I want to keep testing edge cases, clean up the architecture, and make sure the replicated state stays stable before adding more inventory features.

u/Ostrich_Chance — 7 days ago
▲ 22 r/sandbox

For this update, I focused on adding more gameplay around the inventory system instead of only improving the UI.

Today I added:

  • Procedural loot bags
  • Loot pools by item type
  • Chest/storage interaction
  • Small, medium and large chest variants

The loot bags can now roll random items from different loot pools. So I can define if a specific spawn should generate food, resources, equipment, or other item types dynamically.

I also added chests, so the player can store items and take items back out. Right now I have three chest sizes: small, medium and large, each with a different amount of inventory slots.

It’s still very early and the architecture is not perfect yet, but the system is starting to become more than just an inventory screen.

Now it has loot, storage, interaction, and actual gameplay flow around it.

I’m still deciding what to tackle next: item drops, persistence, or multiplayer replication.

Any tips from more experienced s&box devs are welcome.

u/Ostrich_Chance — 8 days ago
▲ 97 r/sandbox

Yesterday I posted a small devlog showing a real-time 3D character preview inside my inventory UI.

Today I connected that preview to the actual inventory/equipment logic.

The system can now:

  • equip and unequip clothing items
  • update the 3D character preview in real time
  • apply the outfit to the actual player character in-game
  • keep the UI preview and the in-game character visually synced

It’s still very early and the architecture is far from perfect, but this was a nice step because the inventory is no longer just a UI mockup.

It’s starting to behave like a real game system.

Next I want to work on better item interaction, hotbar behavior, and eventually world pickup/drop.

u/Ostrich_Chance — 9 days ago
▲ 133 r/sandbox

I started learning s&box 2 days ago after coming from Unreal Engine / UEFN.

Instead of doing small isolated tests, I decided to build an inventory system because it forces me to touch a lot of the engine at once: C#, Razor UI, item data, equipment, replication and native rendering features.

Today I got a real-time 3D character preview working inside the inventory UI using SceneWorld / render-to-widget.

It’s still very early, and UI/Razor has been the biggest headache so far, but this was the first thing that made the project feel like an actual game feature.

u/Ostrich_Chance — 10 days ago