Live demo
Aim, click, watch the fields
The radio included with the kit, rebuilt for the web. Hover a control to aim at it, click to fire, drag the volume. Below, the fields the kit writes to the WBP: the widget shows every state from them alone.
Mouse: aim and click. Keyboard: Tab, then Enter or the arrow keys.
WBP fields
Written by the kit, read by your widget.
- PrevHover0
- PrevPressed0
- PlayHover0
- PlayOn0
- NextHover0
- NextPressed0
- VolumeHover0
- VolumeValue0.6
- VolumeFill168
- VolumeText"60"
Aim at a control and click.
- Your widget, convertedBuild it like a screen UI, with real buttons. The free editor finds them; you give each one its type.
- Nothing drawn over itThe kit writes fields. Your WBP shows hover, clicks and states with its own layers or animations.
- Shared or per playerOne state for everyone, or a copy of the widget per player, each with their own states.
- Or your AI agent does itA Claude Code skill, an AGENTS.md and a CLI: through the UEFN MCP, your agent makes a WBP interactive end to end.
4 ready-made examples
- Settings · toggle, choice, slider, steppers
- Shop · tabs, per-player gold, skins
- Keypad · a code lock everyone shares
- Radio · play / pause, vertical volume
Free layout editor
Paste your WBP: its buttons become zones. Test them, then download the two Verse files. No account needed.
Open the layout editorDescription
Turn any Widget Blueprint into an interface players use in the world. They aim at a button, your widget lights it up, and they click it by firing, with E, or with the native interact button on mobile and controller. There is no UI mode and no cursor, so gameplay never stops. The kit handles the interaction; your widget keeps its own look and shows hover, clicks and states itself.
Features
- Works with your own widgets: drag any Widget Blueprint into the level, add one component, and its buttons become clickable. You don't need to rebuild it or change its design.
- Six element types: buttons, on/off toggles, choices (radio groups), tabs that switch screens, sliders (hold fire to drag, click to jump), and steppers (− / +).
- Your widget, your look: the kit draws nothing over your widget. For each state (hover, click, on or selected, slider value, disabled) it writes a Verse field of your WBP, and your WBP shows it: a widget to show, or an animation. Sliders also get their fill length, ready for a SizeBox. The editor names every field and animation and tells you which bindings and View Binding conditions to add.
- Shared or per-player states: a door panel everyone shares, or a settings menu where each player has their own toggles, choices, sliders and screen. Per-player copies of the widget are handled for you, so each player sees their own states.
- Every input: fire, the E key and the native interact prompt on mobile and controller, with a screen-centre dot that grows over clickable elements.
- Actions in Verse, ready to fill: the editor also writes your logic file, with one branch per element. Replace each
Printwith your code. There are no device lists to wire. - A clean Verse API:
ClickedEvent,ChangedEvent,HoveredEvent,SubscribeClicked,SetOn,SetValue,SetScreen,SetEnabled,SetPrompt,IsOn,GetValue, with per-player variants. - No-code option: if you don't write Verse, an element can trigger devices instead (
OnClick,WhenOn,WhenOff), and clicks can play an audio player for the player who clicked. - 4 ready-made examples: a settings panel, a shop with tabs and per-player gold, a code keypad that opens a door, and a radio with a vertical volume slider. Place them as they are, or copy them to start your own.
- Free online editor: paste your widget (Ctrl+C in the WBP Hierarchy): it finds its buttons and its size. Adjust the boxes, test the interactions while watching the fields your WBP will receive, then download the two Verse files.
- Debug tools: in-game hitboxes and click coordinates, to check every rectangle.
Setup
- Close UEFN, copy the
WorldUIKitfolder into your project'sContentfolder, open the project and build Verse code. - Drag your Widget Blueprint into the level. Set its scale (10 is a good start) and turn it to face the players.
- Select it and add the
interactive_widget_componentcomponent in the Details panel. - Describe its clickable elements, in one of two ways:
- Editor: open https://store.simnjs.fr/tools/world-ui. In your WBP, select the root in the Hierarchy, press Ctrl+C and paste it there. Check the boxes it finds, then download both files:
<your_wbp>_layout.verseand<your_wbp>_logic.verse. Save them in your project'sContentfolder, next toWorldUIKit(not inside it, so updates never overwrite them). Build Verse, then add the<your_wbp>_layoutand<your_wbp>_logiccomponents next tointeractive_widget_component. - Details panel: fill the
Elementslist ofinteractive_widget_component(name, type, rectangle in widget units). The elements are clickable, but the widget shows no state.
- Editor: open https://store.simnjs.fr/tools/world-ui. In your WBP, select the root in the Hierarchy, press Ctrl+C and paste it there. Check the boxes it finds, then download both files:
- In your WBP, create the Verse fields the editor lists (
BuyHover,MusicOn,VolumeFill…) and bind them: the Render Opacity of a highlight, a View Binding condition for an animation, the Width Override of a SizeBox for a slider fill. - Write the actions in
<your_wbp>_logic.verse: replace eachPrintwith your code. When you change the zones later, download the layout file again. The logic file is yours: the editor never rewrites it. - Launch a session, aim, click.
Without code: in the editor, tick Devices (no code) on an element (or use the Elements list). It gets lists of trigger devices to wire in the Details panel: OnClick for every element, plus WhenOn and WhenOff for toggles, choices and tabs.
To try it first, drag one of the examples of WorldUIKit/Widgets into the level and add interactive_widget_component and its two components:
| Example | WBP | Components |
|---|---|---|
| Settings | WBP_WorldUIKit_Demo | world_ui_kit_demo_layout, world_ui_kit_demo_logic |
Shop (set States to PerPlayer) | WBP_WorldUIKit_Shop | world_ui_kit_shop_layout, world_ui_kit_shop_logic |
| Keypad | WBP_WorldUIKit_Keypad | world_ui_kit_keypad_layout, world_ui_kit_keypad_logic |
| Radio | WBP_WorldUIKit_Radio | world_ui_kit_radio_layout, world_ui_kit_radio_logic |
Each example shows its own hover, clicks and states from its fields: open its WBP to see how they are bound.
Elements
| Type | What a click does |
|---|---|
Button | Sends ClickedEvent. |
Toggle | Switches On / Off, then sends ChangedEvent with Event.On. |
Choice | Selects it in its Group, the one selected before is deselected, then sends ChangedEvent. |
Tab | A choice that opens OpensScreen. Elements with Screen set are only on that screen (0 = every screen). |
Slider | Value from MinValue to MaxValue along its rectangle, snapped to Step. Hold fire to drag: ChangedEvent while it moves, ClickedEvent on release. |
Stepper | Moves the slider named Target by Steps (negative goes down). ChangedEvent names the slider. |
Every click also sends ClickedEvent. Rectangles are in widget units, from the top-left corner of the widget, exactly as in the WBP Designer.
WBP fields
| Field | Value |
|---|---|
<Name>Hover | 1 while a player aims at the element. |
<Name>Pressed | 1 for a moment on each click. |
<Name>On | 1 while a toggle is On, or a choice or tab is selected. |
<Name>Value, <Name>Fill | A slider's position, from 0 to 1, and in widget units for a SizeBox. |
<Name>Text | A slider's value as text. |
<Name>Disabled | 1 while the element is disabled. |
Screen | The active screen, for a WidgetSwitcher. |
All are floats, except Text (message) and Screen (int). Verse cannot start a WBP animation: a View Binding condition on the float field does it (== 1 plays it, == 0 plays it in reverse).
Verse
The generated <your_wbp>_logic.verse is a starting point like this one:
1using { /Verse.org/SceneGraph }2using { WorldUIKit }3 4shop_logic := class<final_super>(component):5 var Subscriptions:[]interactive_subscription = array{}6 7 OnBeginSimulation<override>():void =8 if (Kit := Entity.GetComponent[interactive_widget_component]):9 set Subscriptions = array{Kit.SubscribeClicked(OnClicked), Kit.SubscribeChanged(OnChanged)}10 11 OnEndSimulation<override>():void =12 for (Subscription : Subscriptions):13 Subscription.Cancel()14 15 OnClicked(Event:interactive_event):void =16 case (Event.Element):17 "Buy" =>18 Volume := Event.Widget.GetValue("Volume", ?Player := option{Event.Player})19 Print("Buy clicked, volume {Volume}")20 _ => {}21 22 OnChanged(Event:interactive_event):void =23 case (Event.Element):24 "Music" => if (Event.On?) then Print("Music on") else Print("Music off")25 _ => {}States := PerPlayer: each player has their own state. Pass?Player := option{P}to read or change it.SetEnabled,SetPrompt: for everyone. A disabled element can be aimed at but not clicked.
Good to know
- There is no dependency: the helper code is included under
WorldUIKit/WorldUIKitLib. - Several widgets in one island share one aim ray per player.
- In-world widgets are lit in linear space, so a colour or an alpha looks stronger in the Designer than in game. Check them in a session.
- If the boxes are offset in game, turn on
ShowHitboxes(Advanced category).CmPerUnit(0.0263) is the size of a widget unit at scale 1.
What you get
- Works with your own Widget Blueprints: one component, no rebuild
- Buttons, toggles, choices, tabs with screens, sliders and steppers
- Your widget keeps its look: the kit writes Hover, Pressed, On, Value, Fill fields
- 4 ready-made examples: settings, shop, code keypad, radio
- Shared or per-player states, with per-player widget copies
- Fire, E key and native interact prompt on mobile and controller
- No code: trigger devices per element. Verse events and API for coders
- Free online editor: paste your widget, draw the buttons, copy the Verse
Code preview
1# Add it to a Widget Blueprint entity placed in your level: players aim at the widget's elements and click them by2# firing, with E, or with the interact button on mobile and controller. The layout component made by the free editor3# (store.simnjs.fr/tools/world-ui) describes the elements and writes the WBP's fields: the widget plays its own hover,4# press and states.5interactive_widget_component<public> := class<final_super>(component):6 7 @editable{ToolTip := ElementsTip, Categories := array{LayoutCategory}}8 Elements<public>:[]interactive_element = array{}9 10 @editable{ToolTip := StatesTip, Categories := array{PlayersCategory}}11 States<public>:interactive_scope = interactive_scope.Shared12 13 @editable{ToolTip := FireTip, Categories := array{InteractionCategory}}14 ClickWithFire<public>:logic = true15 16 @editable{ToolTip := PromptsTip, Categories := array{InteractionCategory}}17 InteractPrompts<public>:logic = true18 19 @editable{ToolTip := AimDotTip, Categories := array{InteractionCategory}}20 ShowAimDot<public>:logic = true21 22 @editable_number(float){ToolTip := DistanceTip, Categories := array{InteractionCategory}, MinValue := option{100.0}}23 MaxDistance<public>:float = 5000.024 25 @editable{ToolTip := SoundsTip, Categories := array{SoundCategory}}26 ClickSounds<public>:[]audio_player_device = array{}27 28 @editable_number(float){ToolTip := WidgetSizeTip, Categories := array{AdvancedCategory}, MinValue := option{0.0}}29 WidgetWidth<public>:float = 0.030 31 @editable_number(float){ToolTip := WidgetSizeTip, Categories := array{AdvancedCategory}, MinValue := option{0.0}}32 WidgetHeight<public>:float = 0.033 34 @editable_number(float){ToolTip := CmPerUnitTip, Categories := array{AdvancedCategory}, MinValue := option{0.001}}35 CmPerUnit<public>:float = 0.026336 37 @editable{ToolTip := HitboxesTip, Categories := array{AdvancedCategory}}38 ShowHitboxes<public>:logic = false39 40 @editable{ToolTip := DebugTip, Categories := array{AdvancedCategory}}41 DebugClicks<public>:logic = false42 43 # Every click (a slider: on release). Await it, or use SubscribeClicked.44 ClickedEvent<public>:event(interactive_event) = event(interactive_event){}45 # A toggle, choice, tab, slider or screen changed. A stepper reports the slider it moves.46 ChangedEvent<public>:event(interactive_event) = event(interactive_event){}47 # A player's crosshair arrives on an element or leaves it.48 HoveredEvent<public>:event(interactive_hover) = event(interactive_hover){}What’s in the download
- world-ui-kit-0.1.0.zip214 KB
Version history
0.1.0 - 2026-10-16
- First release: any Widget Blueprint used in the world (aim, fire, E or interact button), buttons, toggles, choices, tabs with screens, sliders and steppers, shared or per-player states, WBP fields for your own visuals, 4 ready-made examples, free online editor and AI agent skill
Reviews
No reviews yet
Only buyers can review a product: after your purchase, you get a link to rate it.
How reviews work
- Only verified buyers can leave a review, through the private link of their order. Each review shows its date and the purchase date.
- Reviews are published right away, without prior moderation, newest first. Nobody is paid or rewarded for a review.
- A review may be hidden if it isn’t about the product, contains abusive language, personal information or advertising. Its author is told why and can edit it.