Skip to main content

​
The 6 Layout Types

​
1. SimpleLayout — Static Grid

A flat list of items placed at specific slots (0-53 for a double chest). 
{"case": "simple", "value": {"id": "borders", "items": [
  {"slots": [0,1,2,3,5,6,7,8], "item": {}}
]}}
Use for: borders, background fills, small menus with few items.

​
2. ScrollableLayout — Scrollable Viewport

Wraps a child layout and makes it scrollable. If virtualHeight > 6, vertical arrows appear automatically. 
{"case": "scrollable", "value": {
  "id": "my_scroll",
  "innerId": "my_content",
  "virtualWidth": 9,
  "virtualHeight": 20,
  "showDefaultButtons": true
}}
[!WARNING] virtualHeight must be the total height of the inner content, not the visible area. If content has 20 rows, set virtualHeight: 20. The viewport clips to the inventory size.

​
3. CompositeLayout — Stack Layers

Combines multiple layouts by stacking them on top of each other. Later children render OVER earlier ones.

​
4. FrameLayout — Independent Zones

Divides the inventory into rectangular regions (frames), each with its own layout. 
{"case": "frame", "value": {
  "id": "split_view",
  "frames": [
    {"id": "left",  "x": 0, "y": 0, "width": 4, "height": 6, "layoutId": "left_content"},
    {"id": "right", "x": 5, "y": 0, "width": 4, "height": 6, "layoutId": "right_content"}
  ]
}}

​
5. PaginatedLayout — Pages

Splits items into discrete pages with prev/next navigation.

​
6. FlexLayout — Auto-Positioning

Uses CSS Flexbox-like logic to arrange items automatically. 
{"case": "flex", "value": {
  "id": "flow",
  "items": [],
  "justifyContent": "CENTER",
  "alignItems": "START",
  "wrap": true
}}