Build a HUD in the Visual UI Editor

tutorial lesson Intermediate ⏱ 9 min vgai 0.1.0

Prerequisites: Show a React HUD (quick start)

What you'll learn

• Reach the Visual UI Editor (a dedicated page, not the 3D editor toolbar)
• Read the UI node tree and how it maps to the rendered HUD
• Add a control from the palette and select a node to edit it
• See layout, style, data-binding, and event properties in the inspector

What you'll build: A guided tour of the shipped Visual UI Editor — node tree, palettes, preview, inspector.

Walkthrough — Build a HUD in the Visual UI Editor · generated by site/media/lessons/surfaces-batch.lesson.ts (4 steps)

Beyond hand-writing React HUDs, vgai ships a Visual UI Editor: you compose a game UI from a palette of containers and controls, see it rendered live, and edit each node’s layout, style, data-bindings, and events in an inspector — no code required for the structure.

How to reach it (it's not in the 3D toolbar yet)

The Visual UI Editor ships as a dedicated page, not a button in the main 3D editor. Open it directly: ui-editor.html on the live build (or packages/editor/ui-editor.html under npm run dev).

Steps

1. Open the UI Visual Editor — node tree, palettes, and a live preview. Left: a CONTAINERS palette (box, grid, stack, scroll, panel, center, …) and a CONTROLS palette (text, button, image, input, toggle, slider, dropdown, progress). Center: the live-rendered UI. Right: the inspector.

   

   Palettes (left), live preview (center), inspector (right).

2. The node tree maps to the rendered game UI. The tree (HUD → TopBar → HealthGroup → HealthLabel / HealthBar / HealthNum, Inventory, Menu, …) is the UI’s structure; the center panel renders exactly that tree (an HP bar, an Inventory panel, an Audio card).

   

   Each tree node is a rendered UI element.

3. Add a control from the palette. Click a control type (e.g. button) to insert a node — the tree gains a Button and the node count ticks up.

   

   Clicking a palette control inserts a node into the tree.

4. Select a node to edit its properties. Selecting HealthBar populates the inspector: Layout (position/width/height/align), Style (background $accent, radius, opacity), Props with a data-binding (value → player.health), and Events (onClick/onChange).

   

   Layout, style, a data-binding (value → player.health), and events.

Recap

New functionality

• Reached and read the Visual UI Editor
• Added a control and inspected a node's layout/style/binding/events

New concepts & skills

• A game UI is a node tree of containers + controls, rendered live
• The inspector edits layout, style, data-bindings (value → player.health), and events
• It ships as a dedicated ui-editor.html page, not yet in the 3D editor toolbar

Next lesson → UI: styling & binding

See also

• UI in the scene · Styling & binding · Show a React HUD