Online editor
Paste your widget, place the clickable zones, try them, and download the Verse files.
The free layout editor writes the layout of your widget for you. It runs in your browser and keeps your draft there.
1. Your widget
Paste its hierarchy
In UEFN, open your Widget Blueprint. In the Hierarchy panel of the Designer, select the root widget and press Ctrl+C. Paste it in the editor (in the hierarchy box, or anywhere on the page).
The editor reads the widget tree, works out the size of the widget and the position of each widget, draws the widget under the zones, and proposes a zone for each of its buttons: UEFN buttons (Loud, Quiet, Regular), Custom Button, UMG Button, and Blueprint buttons of your project. Native sliders and checkboxes become a slider and a toggle. Every zone starts as a button: change its kind in the inspector (toggle, choice, tab, stepper). Anything else, draw it. Choose to replace your zones, add these to them, or only use the size.
Build your UI with real buttons: the same WBP works on screen, and the kit turns it into an in-world UI. In the world,
clicks come from the kit (ClickedEvent gives you the player who clicked), not from the buttons' own events.
Check the path and size
- Widget Blueprint: the path of your WBP, such as
/MyIsland/Menus/WBP_Shop. It is read from the hierarchy, or you paste its Copy Reference from the Content Browser. It names the files (wbp_shop_layout.verse) and lets the layout write the WBP's fields. - Widget size: read from the hierarchy, in widget units. An estimated size is marked: compare it with the Designer, and change it with Change if needed.
- Kit module:
WorldUIKitwhen the kit folder is at the root ofContent, as the installation says. If you keep it elsewhere, write its folders with dots, e.g.Verse.Products.WorldUIKitforContent/Verse/Products/WorldUIKit.
The positions read from a hierarchy are computed, not measured: a zone whose position is estimated (a text, an unknown widget size) is marked ≈. Compare it with the Designer.
No event fields
A WBP placed in the world must not have Verse event fields: UEFN then skips its entity class and the layout cannot
write its fields. Clicks come from the kit: ClickedEvent (with the player), SubscribeClicked, or the logic file.
2. The zones
In Edit mode:
- Drag on an empty area of the canvas to draw a zone. Drag a zone to move it, and its handles to resize it.
- Arrow keys move the selected zone by 1 unit (Shift: 10). Delete removes it, Ctrl+D duplicates it, Esc deselects it. Zones snap to the widget edges and to the other zones; hold Alt while dragging to turn snapping off.
- The inspector edits every field of the zone: name, kind, rectangle, prompt, group, screen, slider range, stepper target, cooldown. See Elements.
- Effects chooses how your WBP shows each state of the zone (hover, click, on, value, disabled): a widget to show, an animation, or nothing. Each choice but Nothing adds a field to your WBP. See Effects and animations.
- Devices (no code): its Trigger device lists switch adds lists of trigger devices to the zone. See No-code actions.
With several screens, choose which screen the canvas shows. A zone with Screen 0 is on every screen.
Test mode
In Test mode, click the zones as a player would: toggles switch, choices of a group are exclusive, tabs change
the screen, sliders follow the pointer, steppers move their slider, disabled zones do nothing. The event list shows
what the kit would send, and the WBP fields panel shows the value of each field as the kit writes it, live:
BuyHover = 1 while the pointer is on Buy, VolumeFill = 366 for a slider at 75 %. The dashed outline on hover is
an editor aid: in game, the kit draws nothing, your WBP shows the hover from its field. Hitboxes outlines every
zone, like ShowHitboxes in game.
3. The Verse files
The editor writes two files. Download each one from its tab.
| File | Contents | When to download it |
|---|---|---|
<wbp>_layout.verse | The size of the widget, its elements, and the code that writes your WBP's fields (if any). | Every time you change the zones. |
<wbp>_logic.verse | Your actions: one branch per element, with a Print to replace. | Once. It is yours: the editor never rewrites it. |
Save both in Content, next to the WorldUIKit folder. Build the Verse code, then add the <wbp>_layout and
<wbp>_logic components to the widget entity, next to interactive_widget_component.
The In UEFN panel lists these steps for your widget, with the exact file and component names, and the WBP fields to create when your layout writes some.
Editing a layout later
Use Open a Verse file and paste your <wbp>_layout.verse: the editor reads its zones, effects and options back.
Your draft is also kept in the browser between visits.
Without the file
The Values for the Details panel table lists, for each zone, the fields to type in the Elements list of
interactive_widget_component, if you prefer not to add a layout file.