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.

start here¶

• install - add goo to your s&box addon.
• the model - how goo's tree works and why.
• your first panel - the shortest goo UI, end to end.
• styles - reusable styles via tokens and helpers.

build something¶

short hands-on guides, each building one real thing. new here? start with your first counter.

foundations

• managing state - fields, Rebuild(), and cells that survive parent rebuilds.
• animating a panel - springs, dampers, and panel transforms.

input & interaction

• a text input form - controlled, numeric, and validated TextEntry fields.
• a context menu - open a menu at the cursor and dismiss on outside click.
• drag and drop a list - reorder rows with a live insertion preview.
• a resizable panel - drag a corner grip to resize a box live.
• a pannable canvas - drag to pan and wheel to zoom under the cursor.

drawing & embedding

• drawing a gauge - stack Sector shapes into a value-driven dial.
• embedding a web page - load a URL in a WebPanel, pause it, hide it.

capstones

• building a compass - read the camera each frame and draw a scrolling heading strip.
• building a keystroke hud - poll the keyboard and animate a stack of chips.

structure & style¶

how the tree builds, lays out, and stays dry.

• build method - how Build() and Rebuild() drive the diff-and-apply loop.
• styles - keep init-only style properties dry across many blobs.
• tokens - lexically-scoped design values for theming and runtime swaps.
• arranging children - flex layout: direction, gap, and alignment.
• dynamic children - build lists from data with Children.AddRange and keys.
• overlay layout - a screen-filling, click-through root for HUDs.
• composition - one stateful root, stateless presenters below it.
• cells - push self-owning state down into the tree where it is used.

behavior & motion¶

making the tree respond and move.

• events - the six mouse-event properties and the MousePanelEvent payload.
• reading input - poll the keyboard each frame with KeyTracker.
• drag and drop - the context, source, zone, and layer pieces for draggable UI.
• animations - dampers and springs advanced in Tick through an AnimationSet.
• panel transform - chain scale, translate, and rotate ops on a Container.

guidance¶

deeper usage notes for the specialized blobs.

• shapes - Sector, Arc, and Polygon, plus the Goo.Shapes helpers.
• text input - controlled and uncontrolled TextEntry fields.
• svg panel - render imported .svg art at any resolution.
• web panel - embed a live Chromium webview in your tree.

reference¶

every property on every blob, generated from the source.

primitives

• container - all 171 properties.
• text - all 62 properties.
• image - all 52 properties.

panels & media

• text entry - the typed text field, controlled or uncontrolled.
• scene panel - a live 3D scene rendered into the UI.
• svg panel - an SVG asset with an optional color override.
• web panel - an embedded Chromium webview.

shapes

• sector - a pie wedge or ring segment.
• arc - a stroked arc line.
• polygon - a filled shape from arbitrary vertices.

advanced & background¶

• gotchas - common surprises and their fixes.
• custom shaders - paint a Container with a custom shader or Draw callback.
• rendering benchmarks - what rebuild, diff, and apply actually cost.
• goo for AI - a dense primer for AI agents working in goo.