goo-ui

Goo

goo is a full-featured s&box UI framework in C#. structure, style, and behavior in one language.

think about it like this: if markup and stylesheets did the whole job, there'd be no JavaScript. goo exists to consolidate layout, behavior, and styling into one language with a simplified syntax.

Docs: https://obselate.github.io/Goo/docs/ itch.io: https://obselate.itch.io

Claude Code skill

goo provides a skill for creating goo UI in s&box. install it then next time you mention goo or creating UI, the skill will be invoked. Install in claude code with:

/plugin marketplace add obselate/Goo
/plugin install goo-ui@goo

If you're using another agent, copy .claude-plugin/goo-ui/skills/goo-ui/ into your agent's skills directory.

Quick example

using Goo;
using Sandbox.UI;

namespace Sandbox;

public class CounterUI : GooPanel<Container>
{
	private int _count;

	protected override Container Build() => new Container
	{
		Padding = 16,
		Gap = 12,
		FlexDirection = FlexDirection.Row,
		AlignItems = Align.Center,
		BackgroundColor = Color.White,
		BorderRadius = 12,
		Children =
		{
			new Text( _count.ToString() ),
			new Container
			{
				Padding = 8,
				BorderRadius = 6,
				BackgroundColor = Color.Orange,
				HoverBackgroundColor = Color.Cyan,
				TransitionMs = 150,
				OnClick = e => _count++,
				Children = { new Text( "+" ) },
			},
		},
	};
}

Build() is a pure function of your state. Event handlers trigger a rebuild automatically, so OnClick = e => _count++ is the whole wiring; the reconciler applies only what changed. Hover and focus variants like HoverBackgroundColor resolve engine-side with no rebuild at all.

Mount it

GooPanel<TRoot> is a Sandbox.PanelComponent, so CounterUI is a Component. In the s&box editor:

1. Create a GameObject.
2. Add Component -> ScreenPanel (fullscreen overlay) or WorldPanel (3D worldspace).
3. Add Component -> CounterUI on the same GameObject.
4. Press play.

What is in the box

• Layout: a nested tree of Container/Text nodes with flexbox positioning, plus blobs for images, shapes (Sector, Arc, Polygon), text entry, SVG, web, and 3D scene panels.
• Styling: typed style properties on every node, no stylesheet and no class strings; styles are values you can compute inline, with built-in Hover/Active/Focus variants and transitions.
• Reactive state: ordinary C# fields are the source of truth; handlers rebuild automatically, and Cell gives reusable widgets their own private state.
• Animation: springs, smooths, decays, tweens, and timelines advanced in Tick, sampled in Build; transforms and colors are the cheap per-frame channels.
• HUD scaffolding: Hud.Overlay, Hud.Anchored, Hud.Fill, Hud.Scrim for full-screen layers and corner pinning, and Goo.Controls for ready-made buttons and sliders.
• Effects and input: custom shaders per panel via ShaderEffect with live uniforms, keyboard tracking with KeyTracker, and drag and drop with DragSource/DropZone.

Start with your first panel, or jump to the overview.