Skip to content
vgai Learn

Visual UI Editor

vgai ships a visual editor for React UI that lives in the scene graph. You build HUDs by direct manipulation, and edits round-trip to both the scene file and your .tsx source.

In this section

Section titled “In this section”
  • UI in the scene graph — the .vscn ui array; canvas, containers, controls; screen-space and world-tracked UI.
  • Visual editing — selection overlay, hover/marquee/resize, align/distribute, preview-vs-commit (one undo per gesture).
  • Layout & anchoring — anchor fractions and presets, pivot, flexbox; container types (box, grid, stack, scroll, panel, center, wrap, aspect, tab, sizebox).
  • Styling & theming — theme tokens/variants, per-element overrides, per-state (hover/pressed/focus/disabled), 9-slice, rich text, transitions.
  • Data binding — one-way, two-way (MVVM), data-bound lists, localized text.
  • Controls & events — button/toggle/slider/input/dropdown/progress; event wiring; pointer passthrough; keyboard focus.
  • Components & reuse — save/instantiate UI prefabs, instance overrides, exposed props/slots.
  • Responsive — global scaling, aspect policies, in-editor resolution preview.
  • Two-way source sync — edits write back to .tsx (inline / className / external CSS) losslessly.