Getting Started

Getting Started

This guide walks you from zero to a working TesseraUI screen in about 5 minutes.

---

1. Add the dependency

In your mod's build.gradle:

repositories {
    maven { url "https://cursemaven.com" }
}

dependencies {
    implementation "curse.maven:tesseraui-<project-id>:<file-id>"
}

Use a concrete CurseForge file id instead of latest for reproducible builds. If your mod still uses ForgeGradle-style dependency helpers, adapt the dependency line to that build system.

Declare it in src/main/resources/META-INF/neoforge.mods.toml:

[[dependencies.yourmod]]
    modId = "tesseraui"
    type = "required"
    versionRange = "[1.0,)"
    ordering = "NONE"
    side = "CLIENT"

---

2. Create your HTML template

Create src/main/resources/assets/yourmod/ui/my_screen.html:

<col>
  <link rel="stylesheet" href="shared.css"/>
  <h2>My Mod</h2>
  <p>Welcome, {{ player.name }}!</p>
  <input id="playerName" value="{{ player.name }}" oninput="renamePlayer"/>
  <button onclick="openSettings">Settings</button>
</col>

Create src/main/resources/assets/yourmod/ui/my_screen.css:

col {
  background: #1A1208;
  padding: 12px;
  gap: 6px;
}

h2     { color: #F0B27A; font-size: 10px; }
p      { color: #F3E7D3; font-size: 7px;  }

button {
  background: #5C3A1E;
  color:      #F0B27A;
  width:  80px;
  height: 16px;
}
button:hover { background: #7C5A2E; }

Convention: TesseraUI automatically loads <name>.css when it loads <name>.html — no explicit link needed.

Use <link rel="stylesheet" href="..."> only for shared CSS used by several templates.

---

3. Create your screen class

public class MyScreen extends TesseraScreen {

    private TesseraPanel root;
    private final TesseraRenderContext renderContext = new TesseraRenderContext();

    public MyScreen() {
        super(Component.literal("My Screen"));
    }

    @Override
    protected void init() {
        int pw = Math.min(width, 300);
        int ph = Math.min(height, 200);
        int px = (width  - pw) / 2;
        int py = (height - ph) / 2;

        TesseraModel model = TesseraModel.of(Map.of(
            "player.name", Minecraft.getInstance().player.getName().getString()
        ));

        root = TesseraTemplateRenderer.build(
            TesseraTemplate.load("yourmod:ui/my_screen"),
            model,
            Map.of("openSettings", this::openSettings),
            Map.of("renamePlayer", this::renamePlayer),
            renderContext,
            px, py, pw, ph
        );
    }

    @Override
    protected TesseraPanel tesseraRoot() { return root; }

    private void openSettings() {
        // open another screen or handle the click
    }

    private void renamePlayer(String value) {
        // update your screen state or config model
    }
}

TesseraScreen automatically wires render(), mouseClicked(), keyPressed(), and mouseScrolled(). Reuse the same TesseraRenderContext across rebuilds so inputs with an id keep their text, cursor, and focus state.

---

4. Open the screen

Register a key binding or use a command to open it:

Minecraft.getInstance().setScreen(new MyScreen());

---

Project layout

src/main/
├── java/com/yourmod/
│   └── MyScreen.java
└── resources/assets/yourmod/
    └── ui/
        ├── my_screen.html
        └── my_screen.css

---

Next steps

• HTML Tags — full list of supported elements
• CSS Reference — all supported properties
• Data Binding — dynamic content with {{ }}, v-for, v-if
• CSS Animations — hover transitions and @keyframes