Layouts, frames, and slots
A layout is a composition component. It receives an identifier in layoutPool; other layouts find it through that identifier.
Choose the right layout
| Layout | Use it for | Important fields or elements |
|---|---|---|
simple | Static menu, decoration, fixed buttons | id, items, x, y |
flex | Alignement automatique et contenu adaptable | justifyContent, alignItems, wrap, virtualHeight |
paginated | List split across several pages | itemsPerPage, slots, navigationButtons |
scrollable | Content larger than the window | innerId, virtualWidth, virtualHeight, buttons |
frame | Several independent areas | frames, layoutId, x, y, width, height |
composite | Superposer plusieurs couches | children, ordre des enfants |
book | Pages d’un livre | pages et GuiType: BOOK |
merchant | Trades Minecraft | trades et GuiType: MERCHANT |
storage | Items persistants | entry, groupKey, slots |
leaderboard | Ranking built from Typewriter facts | leaderboard, x, y, width, height, previousButton, nextButton |
simple
The simple layout is the starting point.
In layoutPool, create a simple layout, give it an identifier, then add items. Each item receives an x/y position. Use a composite when decoration and content should be separated.
flex: align content
flex is useful when content changes size or item count. justifyContent and alignItems control alignment, wrap allows line wrapping, and virtualHeight defines the logical height.
paginated: change page
A paginated layout separates displayed items, available slots, and navigation buttons. Navigation roles are NEXT, PREVIOUS, BACK, and INDICATOR. Reserve button slots so the list does not cover them.
scrollable
The scrollable layout displays a large area.
A scrollable layout wraps an inner layout through innerId. The virtual area can be larger than the visible inventory. Add ScrollButtonData with a direction UP, DOWN, LEFT, or RIGHT, a step, and a stepMode of PAGE or ITEM.
Scroll arrows are not added automatically. If no button is configured, the content stays at its initial position.
Buttons are anchored to the visible window; they do not move with the content.
frame: split the menu
A FrameLayoutData defines several rectangles. Each frame contains id, x, y, width, height, and layoutId. The target layout can itself be scrollable. Give each scrollable area a unique identifier to isolate positions.
Example: a fixed navigation column on the left, scrollable content in the center, and an action bar at the bottom.
composite
The composite layout overlays layers.
A CompositeLayoutData receives children by identifier. They render in the supplied order; later children appear above earlier ones. Use it to separate backgrounds, content, buttons, and overlays.
Slots and items
| Field | Role |
|---|---|
item | Resolved material or item. |
displayName | Visible name. |
lore | Lines below the name. |
x, y | Position. |
count | Number of component repetitions, not the displayed stack size. |
direction | Repetition direction. |
gap | Step between repetitions, not a spacing: 1 = adjacent slots (default), 2 = one empty slot between each. Applies to both axes. |
repeatY | Vertical repetition according to the configuration. |
viewPermission | Hides the slot without the permission. |
clickPermission | Makes the slot inactive without the permission. |
Connect layouts
A layout is connected when another layout references its id: mainLayoutId, innerId, a frame's layoutId, or a composite child. If an identifier is missing or cyclic, the parser cannot produce the expected tree.
In practice
For a shop menu, use a simple or flex layout for the grid, a composite for the background, then add Shops buttons. For a long list, put the list in a scrollable or paginated layout and keep controls in a fixed frame.