HyTari Studios · Official visual guide

Menu Info Pages

Learn JSON by seeing the result.

A hands-on visual reference for configuring MenuInfoPages. Start with the central window, build navigation on the sidebars, then customize O-Key shortcuts and interactive items. Every example includes copyable JSON and a simplified representation of its result.

START THE GUIDE MOD PAGE

Read this first

Getting started

STEP 01

Enable the tutorials

In config.json, set languages.en-US.enabled and demo to true. The Full package includes tutorials in 25 languages.

STEP 02

Create a page

Use /infopages newpage <name> <command> or create a JSON file under mods/MenuInfoPages/pages/en-US/.

STEP 03

Reload & test

Run /infopages reload after content or image changes. A newly introduced player command or structural ItemCommands change may require a restart.

These examples are based on the current Full edition's bundled JSON configuration and tutorial files. The previews are educational diagrams, not screenshots or native Hytale UI rendering. Replace example commands, targets and PNG names with resources available on your server. Keep a backup of existing files.

CHAPTER 01 · 10 EXAMPLES

Central GUI

Start with the page itself: text, sections, images, buttons, permissions and AutoOpen.

01Page JSON

Your first page

One JSON file creates a page with its own command, title and introduction.

JSON configuration

{
  "command": "welcome",
  "title": "WELCOME TO OUR SERVER",
  "intro": "Hello {player}! Here is everything you need to get started.",
  "images": [],
  "sections": [
    {
      "title": "GETTING STARTED",
      "text": "Read the rules, find a place to build and enjoy the adventure!",
      "images": []
    }
  ],
  "buttons": [],
  "footer": "Enjoy your stay!"
}

pages/en-US/welcome.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

WELCOME TO OUR SERVER

Hello Alex! Here is everything you need to get started.

GETTING STARTED

Read the rules, find a place to build and enjoy the adventure!

Enjoy your stay!

The file name can be different from the command. New player commands may require a server restart after creation.

02Page JSON

Rich text & placeholders

Format your text and insert dynamic information from the player and server.

JSON configuration

{
  "command": "player-info",
  "title": "PLAYER INFORMATION",
  "intro": "{center}{#54DAF4}{b}Welcome back, {player}!{/}{/}",
  "images": [],
  "sections": [
    {
      "title": "{#F894FF}{b}YOUR DETAILS{/}{/}",
      "text": "{b}Player:{/} {player}\n{b}World:{/} {world}\n{b}Online:{/} {online}/{max_players}\n{m}Helpful server information{/}",
      "images": []
    }
  ],
  "buttons": []
}

pages/en-US/player-info.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

PLAYER INFORMATION

Welcome back, Alex!{/}{/}

YOUR DETAILS{/}{/}

Player:{/} Alex World:{/} Survival Online:{/} 12/256 Helpful server information{/}

Rich text is rendered by Hytale. The schematic preview removes format tokens instead of replicating the native font renderer.

03Page JSON

Section background colors

Combine standard, transparent and HEX-colored sections in the same menu.

JSON configuration

{
  "command": "colors",
  "title": "CUSTOM SECTIONS",
  "intro": "Choose a visual treatment for each content area.",
  "images": [],
  "sections": [
    {
      "title": "DEFAULT",
      "text": "Native section styling.",
      "backgroundColor": "default",
      "images": []
    },
    {
      "title": "TRANSPARENT",
      "text": "The background panel is removed.",
      "backgroundColor": "none",
      "images": []
    },
    {
      "title": "CUSTOM HEX",
      "text": "A custom section color.",
      "backgroundColor": "#243D59",
      "images": []
    }
  ],
  "buttons": []
}

pages/en-US/colors.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

CUSTOM SECTIONS

Choose a visual treatment for each content area.

DEFAULT

Native section styling.

TRANSPARENT

The background panel is removed.

CUSTOM HEX

A custom section color.

Use backgroundColor on the individual section, not on the entire page.

04Page JSON

Fixed introduction & header images

An intro and up to six images remain above the scrollable sections.

JSON configuration

{
  "command": "header",
  "title": "OUR COMMUNITY",
  "intro": "{center}Explore the server and its features.",
  "images": [
    {
      "image": "server-logo.png"
    },
    {
      "image": "welcome-banner.png"
    }
  ],
  "sections": [
    {
      "title": "SCROLLABLE CONTENT",
      "text": "This section scrolls while the introduction and header images stay visible.",
      "images": []
    }
  ],
  "buttons": []
}

pages/en-US/header.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

OUR COMMUNITY

Explore the server and its features.

server-logo.png

welcome-banner.png

SCROLLABLE CONTENT

This section scrolls while the introduction and header images stay visible.

Place server-logo.png and welcome-banner.png in mods/MenuInfoPages/images/ before opening the page. PNG only; keeping individual files below 2 MB is recommended for faster loading, but it is not mandatory.

05Page JSON

Multiple images in a section

Place up to six images in a section. They are distributed into equal horizontal cells.

JSON configuration

{
  "command": "places",
  "title": "PLACES TO VISIT",
  "intro": "Pick a destination.",
  "images": [],
  "sections": [
    {
      "title": "DESTINATIONS",
      "text": "Choose where you want to go.",
      "images": [
        {
          "image": "spawn.png",
          "command": "spawn",
          "runAs": "player",
          "close": true,
          "delayMs": 100
        },
        {
          "image": "market.png",
          "command": "warp market",
          "runAs": "player",
          "close": true,
          "delayMs": 100
        },
        {
          "image": "website.png",
          "command": "https://example.org",
          "close": false
        }
      ]
    }
  ],
  "buttons": []
}

pages/en-US/places.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

PLACES TO VISIT

Pick a destination.

DESTINATIONS

Choose where you want to go.

spawn.png

market.png

website.png

Each filename represents a PNG you provide inside mods/MenuInfoPages/images/.

06Page JSON

Buttons inside a section

Give a section its own interactive primary, secondary and danger actions.

JSON configuration

{
  "command": "section-actions",
  "title": "USEFUL COMMANDS",
  "intro": "Different button styles make actions easy to identify.",
  "images": [],
  "sections": [
    {
      "title": "NAVIGATION",
      "text": "A section can contain text, images and buttons.",
      "images": [],
      "buttons": [
        {
          "text": "SPAWN",
          "command": "spawn",
          "runAs": "player",
          "close": true,
          "delayMs": 250,
          "style": "primary"
        },
        {
          "text": "SERVER RULES",
          "page": "rules",
          "style": "secondary"
        },
        {
          "text": "DANGER EXAMPLE",
          "style": "danger"
        }
      ]
    }
  ],
  "buttons": []
}

pages/en-US/section-actions.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

USEFUL COMMANDS

Different button styles make actions easy to identify.

NAVIGATION

A section can contain text, images and buttons.

SPAWN

SERVER RULES

DANGER EXAMPLE

Use page to open another MenuInfoPages page directly. Use command to execute commands; runAs: console should only be used for trusted actions.

07Page JSON

Bottom action bar

Place up to six actions at the bottom, separate from the scrolling sections.

JSON configuration

{
  "command": "shortcuts",
  "title": "QUICK ACTIONS",
  "intro": "Common shortcuts in one place.",
  "images": [],
  "sections": [
    {
      "title": "HELP",
      "text": "Choose an action below.",
      "images": []
    }
  ],
  "buttons": [
    {
      "text": "RULES",
      "page": "rules",
      "style": "primary"
    },
    {
      "text": "SPAWN",
      "command": "spawn",
      "runAs": "player",
      "close": true,
      "delayMs": 250,
      "style": "secondary"
    },
    {
      "text": "WEBSITE",
      "command": "https://example.org",
      "style": "secondary"
    }
  ]
}

pages/en-US/shortcuts.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

QUICK ACTIONS

Common shortcuts in one place.

HELP

Choose an action below.

RULES

SPAWN

WEBSITE

Targets such as rules or warp market must exist on your server. A page target is an internal MenuInfoPages page command.

08Page JSON

Page permissions

Add an optional permission node to restrict a page to authorized users.

JSON configuration

{
  "command": "staff-info",
  "permission": "server.staff",
  "title": "STAFF INFORMATION",
  "intro": "Restricted information for authorized players.",
  "images": [],
  "sections": [
    {
      "title": "STAFF NOTES",
      "text": "Only players with the server.staff permission may open this page.",
      "images": []
    }
  ],
  "buttons": []
}

pages/en-US/staff-info.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

STAFF INFORMATION

Restricted information for authorized players.

STAFF NOTES

Only players with the server.staff permission may open this page.

The permission node is an example. Grant it through your server's permission system. AutoOpen also respects page permissions.

09Page JSON

Automatic opening on join

Show a welcome page once, always, or until the player dismisses it.

JSON configuration

{
  "autoOpen": {
    "enabled": true,
    "mode": "dismissible",
    "version": 1,
    "worlds": [],
    "delayMs": 1500
  },
  "command": "server-guide",
  "title": "SERVER GUIDE",
  "intro": "Welcome! Tick Do not show again to hide this page on future joins.",
  "images": [],
  "sections": [
    {
      "title": "FIRST STEPS",
      "text": "Read our rules and find your way around.",
      "images": []
    }
  ],
  "buttons": []
}

pages/en-US/server-guide.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

SERVER GUIDE

Welcome! Tick Do not show again to hide this page on future joins.

FIRST STEPS

Read our rules and find your way around.

Configure autoOpen on the fallback-language version of this page. Do not enable overlapping AutoOpen pages for the same world: if multiple pages match, none opens automatically.

10Config JSON

Enable the included tutorials

Choose loaded languages independently from which demo pages are generated.

JSON configuration

{
  "fallbackLanguage": "en-US",
  "languages": {
    "en-US": {
      "enabled": true,
      "demo": true
    },
    "it-IT": {
      "enabled": true,
      "demo": false
    },
    "de-DE": {
      "enabled": true,
      "demo": false
    }
  }
}

config.json — top-level fields

Visual resultSchematic preview

Language settings

en-USLoaded · Demo ON

it-ITLoaded · Demo OFF

de-DELoaded · Demo OFF

The client language selects the page translation; missing translations use the configured fallback.

The Full edition ships 25 language folders. Both enabled and demo must be true for a language's tutorial pages to be generated. Set demo: false when you no longer need them.

CHAPTER 02 · 5 EXAMPLES

Left & right sidebars

Add one or both independent rails, fixed rail headers and mixed navigation elements.

Automatic PRIMARY highlight for the open page

On both leftContent and rightContent, a sidebar button whose page matches the currently open page's command automatically appears as primary. You do not need to specify "style": "primary". The examples below show this in gold. Other buttons retain their configured style.

Only matching page targets are highlighted automatically: a parent category or unrelated button on the opposite sidebar is not selected automatically. To keep such a button highlighted on a different page, explicitly use "style": "primary" in that page's JSON.

01Page JSON

Left navigation sidebar

Create a separately scrolling left rail with page links and text headings. The active page button is highlighted as primary automatically.

JSON configuration

{
  "command": "help-index",
  "title": "HELP CENTER",
  "intro": "Use the left menu to browse information.",
  "images": [],
  "sections": [
    {
      "title": "SELECT A TOPIC",
      "text": "Pages can link to each other without closing the interface.",
      "images": []
    }
  ],
  "leftContent": [
    {
      "type": "text",
      "text": "INFORMATION"
    },
    {
      "type": "button",
      "text": "HELP CENTER",
      "page": "help-index"
    },
    {
      "type": "button",
      "text": "WELCOME",
      "page": "welcome"
    },
    {
      "type": "button",
      "text": "RULES",
      "page": "rules"
    },
    {
      "type": "button",
      "text": "HELP",
      "command": "help",
      "runAs": "player"
    }
  ],
  "buttons": []
}

pages/en-US/help-index.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

left rail

INFORMATION

HELP CENTER

WELCOME

RULES

HELP

HELP CENTER

Use the left menu to browse information.

SELECT A TOPIC

Pages can link to each other without closing the interface.

HELP CENTER points to this page’s command (help-index), so it becomes primary without a style field. Use identical page targets in every translation.

02Page JSON

Right sidebar

Use rightContent for subtopics or a contextual list of actions. Active page highlighting also works on the right.

JSON configuration

{
  "command": "guide-topic",
  "title": "GUIDE TOPIC",
  "intro": "Extra navigation lives on the right.",
  "images": [],
  "sections": [
    {
      "title": "MAIN ARTICLE",
      "text": "Keep the primary content in the center.",
      "images": []
    }
  ],
  "rightContent": [
    {
      "type": "text",
      "text": "TOPICS"
    },
    {
      "type": "button",
      "text": "CURRENT TOPIC",
      "page": "guide-topic"
    },
    {
      "type": "button",
      "text": "COMMANDS",
      "page": "shortcuts"
    }
  ],
  "buttons": []
}

pages/en-US/guide-topic.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

GUIDE TOPIC

Extra navigation lives on the right.

MAIN ARTICLE

Keep the primary content in the center.

right rail

TOPICS

CURRENT TOPIC

COMMANDS

CURRENT TOPIC becomes primary automatically because its page target matches guide-topic. No manual style is needed; each rail scrolls independently.

03Page JSON

Both sidebars together

Combine independent left and right navigation without changing the central page structure.

JSON configuration

{
  "command": "server-manual",
  "title": "SERVER MANUAL",
  "intro": "Navigate by category and subtopic.",
  "images": [],
  "sections": [
    {
      "title": "CURRENT TOPIC",
      "text": "The center stays dedicated to your main information.",
      "images": []
    }
  ],
  "leftContent": [
    {
      "type": "button",
      "text": "INTRODUCTION",
      "page": "welcome"
    },
    {
      "type": "button",
      "text": "RULES",
      "page": "rules"
    }
  ],
  "rightContent": [
    {
      "type": "text",
      "text": "QUICK LINKS"
    },
    {
      "type": "button",
      "text": "SPAWN",
      "command": "spawn",
      "runAs": "player"
    },
    {
      "type": "button",
      "text": "WEBSITE",
      "command": "https://example.org"
    }
  ],
  "buttons": []
}

pages/en-US/server-manual.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

left rail

INTRODUCTION

RULES

SERVER MANUAL

Navigate by category and subtopic.

CURRENT TOPIC

The center stays dedicated to your main information.

right rail

QUICK LINKS

SPAWN

WEBSITE

Up to 24 mixed items can be placed in each rail, in the order written in JSON.

04Page JSON

Fixed images above sidebars

Add fixed header artwork independently to either rail.

JSON configuration

{
  "command": "branded-menu",
  "title": "BRANDED NAVIGATION",
  "intro": "The rail headers stay visible while their items scroll.",
  "images": [],
  "sections": [
    {
      "title": "WELCOME",
      "text": "Try one or both fixed sidebar headers.",
      "images": []
    }
  ],
  "leftHeaderImage": {
    "image": "left-logo.png",
    "page": "welcome"
  },
  "leftContent": [
    {
      "type": "button",
      "text": "HOME",
      "page": "welcome"
    }
  ],
  "rightHeaderImage": {
    "image": "right-logo.png"
  },
  "rightContent": [
    {
      "type": "button",
      "text": "RULES",
      "page": "rules"
    }
  ],
  "buttons": []
}

pages/en-US/branded-menu.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

left rail

left-logo.png

HOME

BRANDED NAVIGATION

The rail headers stay visible while their items scroll.

WELCOME

Try one or both fixed sidebar headers.

right rail

right-logo.png

RULES

Place left-logo.png and right-logo.png in mods/MenuInfoPages/images/. Each rail header accepts an optional page or command action.

05Page JSON

Mixed text, images & buttons

Order text, clickable images and navigation buttons freely inside either sidebar.

JSON configuration

{
  "command": "player-panel",
  "title": "PLAYER PANEL",
  "intro": "Sidebars may mix three item types.",
  "images": [],
  "sections": [
    {
      "title": "OVERVIEW",
      "text": "Welcome back, {player}!",
      "images": []
    }
  ],
  "leftContent": [
    {
      "type": "text",
      "text": "{center}{b}YOUR PROFILE{/}"
    },
    {
      "type": "image",
      "image": "profile.png",
      "command": "profile",
      "runAs": "player",
      "close": true,
      "delayMs": 250
    },
    {
      "type": "text",
      "text": "Player: {player}"
    },
    {
      "type": "button",
      "text": "HOME",
      "page": "welcome"
    }
  ],
  "buttons": []
}

pages/en-US/player-panel.json

Visual resultSchematic preview

MENUINFOPAGES · SCHEMATIC×

left rail

YOUR PROFILE{/}

profile.png

Player: Alex

HOME

PLAYER PANEL

Sidebars may mix three item types.

OVERVIEW

Welcome back, Alex!

Current Full sidebar arrays are leftContent/rightContent. The future unified content/cells schema is not part of this guide.

CHAPTER 03 · 4 EXAMPLES

O-Key & HUD

Create quick-access shortcuts, position their indicators and configure per-world behavior.

01Config JSON

Global O-Key shortcut

Set the default command, permissions and HUD indicator for every world.

JSON configuration

{
  "O-Key": {
    "Enabled": true,
    "RequirePermission": false,
    "Permission": "menuinfopages.okey",
    "OpPermission": "hytale.command.gamemode",
    "AllWorlds": {
      "Command": "menuinfopages",
      "OpCommand": "menuinfopages",
      "AppliesOnOP": true,
      "CooldownMs": 250,
      "Hud": {
        "Enabled": true,
        "Horizontal": "right:-8",
        "Vertical": "top:245",
        "Title": "menuinfopages.hud.okey.press",
        "Image": "default",
        "Width": 112,
        "Height": 112
      }
    }
  }
}

config.json — O-Key object

Visual resultSchematic preview

O-Key · illustrative HUD

Game screen representation

HUD position: right:-8, top:245. Commands and behavior are configured in config.json.

Edit the existing O-Key object rather than replacing your whole config.json. The HUD image default refers to the bundled icon.

02Config JSON

Center the O-Key HUD

Use center independently on either axis; adjust the other axis from an edge.

JSON configuration

{
  "Hud": {
    "Enabled": true,
    "Image": "default",
    "Width": 112,
    "Height": 112,
    "Horizontal": "center",
    "Vertical": "top:190"
  }
}

config.json — O-Key.AllWorlds.Hud

Visual resultSchematic preview

O-Key · illustrative HUD

Game screen representation

HUD position: center, top:190. Commands and behavior are configured in config.json.

This example is a partial Hud object; merge these values into your existing O-Key.AllWorlds.Hud settings.

03Config JSON

World and instance overrides

Give specific worlds another shortcut, including generated instances with a trailing wildcard.

JSON configuration

{
  "WorldOverrides": [
    {
      "Worlds": [
        "Survival"
      ],
      "Enabled": true,
      "Command": "welcome",
      "Hud": {
        "Enabled": true,
        "Horizontal": "right:-5",
        "Vertical": "center"
      }
    },
    {
      "Worlds": [
        "instance-Forgotten_Temple-*"
      ],
      "Enabled": true,
      "Command": "server-guide",
      "Hud": {
        "Enabled": true,
        "Horizontal": "center",
        "Vertical": "top:190"
      }
    }
  ]
}

config.json — O-Key.WorldOverrides

Visual resultSchematic preview

O-Key · illustrative HUD

Game screen representation

Survival → /welcome

instance-Forgotten_Temple-* → /server-guide

A single trailing * is supported in a world-name prefix. Exact names win over wildcard patterns; otherwise the longest matching prefix wins.

04Config JSON

Custom O-Key image

Use your own PNG with a configurable size and position.

JSON configuration

{
  "Hud": {
    "Enabled": true,
    "Image": "okey-survival.png",
    "Width": 300,
    "Height": 200,
    "Horizontal": "right:-5",
    "Vertical": "top:138"
  }
}

config.json — O-Key.AllWorlds.Hud

Visual resultSchematic preview

O-Key · illustrative HUD

Game screen representation

HUD position: right:-5, top:138. Commands and behavior are configured in config.json.

Place okey-survival.png in mods/MenuInfoPages/images/. Match Width/Height to the PNG aspect ratio (for example 600×400 rendered as 300×200).

CHAPTER 04 · 2 EXAMPLES

ItemCommands

Create items with separate left and right click commands.

01Config JSON

Enable a demonstration item

The bundled example provides an interactive source item with separate left and right actions.

JSON configuration

{
  "itemCommands": {
    "enabled": true,
    "items": [
      {
        "id": "demo",
        "sourceItem": "MenuInfoPages_Demo_Grimoire_Source",
        "name": "Demo Pages",
        "quality": "",
        "leftClickCommand": "menuinfopages",
        "rightClickCommand": "menuinfopages"
      }
    ]
  }
}

config.json — itemCommands object

Visual resultSchematic preview

ItemCommands · interaction map

Demo Pages

Left click/menuinfopages

Right click/menuinfopages

This is the actual bundled example's source item ID. Unlike page changes, structural item updates may need a server restart.

02Config JSON

Separate left & right commands

Use an existing Hytale or installed mod item as the source of a new interactive shortcut.

JSON configuration

{
  "itemCommands": {
    "enabled": true,
    "items": [
      {
        "id": "server-shortcuts",
        "sourceItem": "MenuInfoPages_Demo_Grimoire_Source",
        "name": "Server Shortcuts",
        "quality": "",
        "leftClickCommand": "welcome",
        "rightClickCommand": "spawn"
      }
    ]
  }
}

config.json — itemCommands object

Visual resultSchematic preview

ItemCommands · interaction map

Server Shortcuts

Left click/welcome

Right click/spawn

Replace sourceItem with a real item ID installed on your server and choose commands that exist and players can access. ItemCommands are independent of page JSON.

Before using an example

Complete page examples: Place each JSON object into its own file under mods/MenuInfoPages/pages/en-US/. Keep each page command distinct and translate matching page files in other language folders if needed.

Config examples: The O-Key and ItemCommands objects are fragments of your existing config.json. Merge the illustrated properties into their correct location; never replace the entire config file with a small example.

Safe configuration: Place referenced PNGs in the expected image folder. For best performance, keeping individual images under 2 MB is recommended, not mandatory; larger files may require more time and memory to load. Demo commands, page navigation targets, permission nodes and external URLs are placeholders for resources you provide. Avoid executing elevated commands from untrusted players.

Current schema: This guide documents the existing sections, leftContent and rightContent system; a potential future unified content/cells model is not shown as a shipping feature.