Screens
Writing a full-screen menu in HTML and CSS: the screen element, tags, state and where the full reference lives.
A screen is one HTML file in plugins/ExyliaScreens/screens/. It is drawn in front of the player with a mouse cursor and no resource pack. The client needs to be Java 1.20.2 or newer
with PacketEvents on the server; for anyone else, write a fallback.
Save a screen and it shows within two seconds. /screensadmin check lists whatever it does not understand, with the line and column.
The markup, the CSS subset, the expressions, components, motion and pictures are ExyliaLib's (its docs/screens.md, screens-markup.md and screens-cookbook.md). This page covers what
a server needs to build menus with no Java. /exylialib screens gallery shows every element in game.
The smallest screen
<screen command="rules" aliases="r">
<panel>
<h1>{primary}Rules</h1>
<p>Be kind. No cheating. Have fun.</p>
<button action="close">Got it</button>
</panel>
</screen>The <screen> element
| Attribute | Does |
|---|---|
command, aliases | The commands that open it, installed on load and on /screensadmin reload. Aliases are separated by spaces. |
permission | Who may open it; without it, everybody. |
require, deny | An expression checked before opening, and the lines run when it fails. |
fallback, min-client, args, on-open | See Opening and fallbacks. |
size, backdrop, scene, keys="navigate", wheel | ExyliaLib's: size in pixels (400x225), background, picture, keyboard focus, mouse wheel. |
Tags you will use most
These are the main ones; ExyliaLib has the complete list.
| Tag | Does |
|---|---|
panel, column, row, box | Boxes. panel is a themed column, row runs across. |
h1, h2, b, small, p, span, text | Text. |
button, card | Themed clickable boxes. card is usually a grid cell. |
tabs/tab, chips/chip | Options that set a state value on click. |
grid, list, pager | Repeat children over a source, with pages. |
item | A real item model with no resource pack: material, head, texture or url. |
img | A picture from the markup's folder, or skin="%player_name%" / face="%player_name%" for a player. |
toggle, progress, modal, search | On/off, a bar, a dialog and a search field. |
Any tag takes id, class, style, if/else, action, action-right, action-shift, require/deny, cooldown and t="key". %placeholder% and ${expression} work in any text. Colours are palette
tokens such as {primary}, so colors.yml recolours everything.
State
set tab food, toggle open and clear tab change the screen's own state, read as %tab% or tab in expressions. <tabs state="tab" default="play"> and <chips> set it on click.
open shop tab=food opens another screen with that state already set.
The examples
Six screens ship ready to use: a server selector, daily rewards, a welcome tour, a hub, a profile and a shop. They show live server counts, per-player streaks with a daily wait, pages, prices that change when the player cannot pay, confirm dialogs, links between screens and every kind of motion. See Example screens, and read them before writing your own.
Something missing on this page? Tell us on Discord