Skip to content

HTML Tags

Jump to bottom
curveo edited this page May 19, 2026 · 11 revisions

HTML Tags

TesseraUI supports a curated subset of HTML tags mapped to native Minecraft widgets.

Layout containers

<link rel="stylesheet">

Declares a shared stylesheet from the HTML template. The linked CSS is loaded before the template's companion .css file.

<col>
  <link rel="stylesheet" href="yourmod:ui/shared.css"/>
  <link rel="stylesheet" href="forms.css"/>
  <label class="field-label">Name</label>
</col>

href can be a full resource id (yourmod:ui/shared.css) or a path relative to the current template (forms.css).

<col> / <div>

Vertical flex container (children stacked top to bottom).

<col class="panel">
  <label>Line 1</label>
  <label>Line 2</label>
</col>

<row>

Horizontal flex container (children placed left to right).

<row>
  <button onclick="save">Save</button>
  <button onclick="cancel">Cancel</button>
</row>

<grid cols="N">

Grid layout with N equal-width columns.

<grid cols="3">
  <col class="card">…</col>
  <col class="card">…</col>
  <col class="card">…</col>
</grid>

You can also drive column widths from CSS with grid-template-columns:

.my-grid { grid-template-columns: 2fr 1fr; }

Semantic containers

The following tags behave identically to <col> but carry semantic meaning:

<section>, <article>, <main>, <nav>, <header>, <footer>

Text & rich content

<h1> … <h6>

Headings with decreasing default font sizes (14 → 7 px). Font size and weight can be overridden in CSS.

<h2>Inventory</h2>

<p>

Paragraph — wraps text by default.

<p>This is a longer description that wraps across multiple lines.</p>

<label>

Single-line text. Does not wrap unless white-space: normal is set in CSS.

<label class="hint">Press ESC to close</label>

<span>

Inline wrapper, useful for applying a CSS class to a segment of text.

<span class="highlight">important</span>

<strong> / <b>

Bold text.

<em> / <i>

Italic text (rendered in a dimmer colour since the vanilla Minecraft font has no italic style).

<a>

Clickable text link. Wire a handler via onclick.

<a onclick="openWebsite">Visit our Discord</a>

<badge>

Pill-shaped label, useful for tags and status chips.

<badge class="rarity-epic">Epic</badge>

By default, a badge has a transparent background. Set background in CSS when you want a chip fill. Badges measure their text before layout, so multiple badges can be placed in a row without manual spacer elements.

<ul> / <ol> / <li>

Unordered or ordered list.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

<virtual-list>

Scrollable list that renders only visible rows — use this for large datasets.

<virtual-list id="myList" v-for="row in rows" row-height="18">
  <row>
    <label>{{ row.name }}</label>
    <button onclick="{{ row.action }}">Open</button>
  </row>
</virtual-list>

If no CSS height is provided, <virtual-list> participates in parent flex layout and grows to available space. Rows are cached around the visible window; focused rows are kept so inputs inside a virtual list continue receiving keyboard events.

For v-for="row in rows", per-row model keys must use the loop variable prefix, e.g. row.name.0, row.action.0. The row template should also use that prefix ({{ row.name }}, onclick="{{ row.action }}").

Compatibility note: bare row keys such as {{ name }} are still resolved for older templates, but the prefixed form is recommended.

Bindings that do not resolve to a per-row key fall back to the parent model. This lets shared values such as {{ s.items }} or {{ screen.title }} be used inside every row without duplicating them per index.

<hr>

A 1 px horizontal separator spanning the available width. Style it with border-color, background, color, height, and opacity.

<hr/>

Inputs & interactive

<button>

<button onclick="save">Save</button>
Attribute Description
onclick Handler name registered in Java
data-i18n i18n key for button label

<input>

Single-line text field.

<input id="username" placeholder="Enter name" maxlength="32"/>

<!-- Comma, semicolon, or pipe separated suggestions -->
<input id="item" value="{{ item }}" suggestions="minecraft:diamond,minecraft:emerald" oninput="onItem"/>

<!-- Suggestions can come from the model -->
<input id="mob" autocomplete="{{ mobSuggestions }}" oninput="onMob"/>
Attribute Default Description
id — Required for state management
placeholder — Hint text
value — Initial value
maxlength 64 Maximum character count
oninput — Callback on every keystroke
onsubmit — Callback on Enter key
suggestions — Suggestion list. Values can be separated with ,, ;, or `
autocomplete on when suggestions exist off / false disables the suggestion popup. Non-boolean values are treated as a suggestion list

Use a stable id when the screen rebuilds and pass a TesseraRenderContext to preserve text, cursor, and focus state.

When suggestions are available, Up/Down selects an entry and Enter or Tab accepts it. The popup is rendered by the input itself, so avoid clipping it inside a parent with overflow: hidden unless that is intentional.

<textarea>

Multi-line text field.

<textarea id="notes" placeholder="Write notes…" rows="4"/>
Attribute Default Description
rows 4 Visible rows (height)
maxlength 4096 Maximum character count
oninput — Callback on change

<checkbox>

Toggle checkbox.

<checkbox id="enabled" checked="true" oninput="onToggle"/>

<slider>

Continuous value slider. oninput is emitted when the value changes during click/drag, so labels bound to the same model can update live. Emitted numbers are compactly formatted with up to two decimals. Sliders use id as their drag identity when present, otherwise the oninput handler name, which lets drag continue across a template rebuild.

<slider id="volume" min="0" max="100" value="80" oninput="onVolume"/>

<select>

Dropdown selector.

<select oninput="onDifficulty">
  <option value="easy">Easy</option>
  <option value="normal">Normal</option>
  <option value="hard">Hard</option>
</select>

Tabs

<tabs>
  <tab label="General">
    <col>
      <label>General settings here</label>
    </col>
  </tab>
  <tab label="Advanced">
    <col>
      <label>Advanced settings here</label>
    </col>
  </tab>
</tabs>

Tables

Full table support with <table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Health</td>
      <td>{{ player.health }}</td>
    </tr>
  </tbody>
</table>

<th> cells are bold and center-aligned by default (overridable via CSS).

Media & data

<img>

<img src="yourmod:textures/gui/banner.png" width="64" height="32"/>

<icon>

Shorthand for icons stored in assets/tesseraui/textures/gui/icons/<name>.png.

<icon src="settings" width="16" height="16"/>

<item-slot>

Displays a single Minecraft item. See Item Slots for the full API.

<item-slot size="24" item="minecraft:diamond"/>

The slot frame and fill can be themed from CSS:

item-slot {
  background: #120E0A;
  border-color: #5A3518;
}

item-slot:hover {
  background: #1C120B;
}

Directives (special attributes)

Attribute Description
v-if="expr" Render element only if expression is truthy
v-show="expr" Show/hide (keeps layout space)
v-for="item in list" Repeat element for each item in a model list
onclick="handler" Wire a Java Runnable handler
oncontextmenu="handler" Wire a right-click handler
oninput="handler" Wire a Consumer<String> for inputs
draggable="true" Make the element draggable
drag-payload="value" Payload string for drag-and-drop
data-i18n="key" Replace text with translation key
tooltip="text" Hover tooltip
tooltip-i18n="key" Hover tooltip resolved through Minecraft i18n
tabindex="-1" Exclude from tab focus order

Tooltips are rendered above the widget tree, wrap long text, and are clamped to the GUI bounds so they stay visible near screen edges. Tooltips from rows inside <virtual-list> are rendered after the list viewport scissor is disabled, which prevents clipped row help text.

Clone this wiki locally