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.

Lobby Theme

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 editor

Description

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 Print with 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

  1. Close UEFN, copy the WorldUIKit folder into your project's Content folder, open the project and build Verse code.
  2. Drag your Widget Blueprint into the level. Set its scale (10 is a good start) and turn it to face the players.
  3. Select it and add the interactive_widget_component component in the Details panel.
  4. 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.verse and <your_wbp>_logic.verse. Save them in your project's Content folder, next to WorldUIKit (not inside it, so updates never overwrite them). Build Verse, then add the <your_wbp>_layout and <your_wbp>_logic components next to interactive_widget_component.
    • Details panel: fill the Elements list of interactive_widget_component (name, type, rectangle in widget units). The elements are clickable, but the widget shows no state.
  5. 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.
  6. Write the actions in <your_wbp>_logic.verse: replace each Print with your code. When you change the zones later, download the layout file again. The logic file is yours: the editor never rewrites it.
  7. 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:

ExampleWBPComponents
SettingsWBP_WorldUIKit_Demoworld_ui_kit_demo_layout, world_ui_kit_demo_logic
Shop (set States to PerPlayer)WBP_WorldUIKit_Shopworld_ui_kit_shop_layout, world_ui_kit_shop_logic
KeypadWBP_WorldUIKit_Keypadworld_ui_kit_keypad_layout, world_ui_kit_keypad_logic
RadioWBP_WorldUIKit_Radioworld_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

TypeWhat a click does
ButtonSends ClickedEvent.
ToggleSwitches On / Off, then sends ChangedEvent with Event.On.
ChoiceSelects it in its Group, the one selected before is deselected, then sends ChangedEvent.
TabA choice that opens OpensScreen. Elements with Screen set are only on that screen (0 = every screen).
SliderValue from MinValue to MaxValue along its rectangle, snapped to Step. Hold fire to drag: ChangedEvent while it moves, ClickedEvent on release.
StepperMoves 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

FieldValue
<Name>Hover1 while a player aims at the element.
<Name>Pressed1 for a moment on each click.
<Name>On1 while a toggle is On, or a choice or tab is selected.
<Name>Value, <Name>FillA slider's position, from 0 to 1, and in widget units for a SizeBox.
<Name>TextA slider's value as text.
<Name>Disabled1 while the element is disabled.
ScreenThe 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:

code.verse
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

interactive_widget_component.verse
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.