Skip to content

Getting Started

Jump to bottom
curveo edited this page May 12, 2026 · 3 revisions

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 fg.deobf("curse.maven:tesseraui-<project-id>:latest")
}

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

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

2. Create your HTML template

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

<col>
  <h2>My Mod</h2>
  <p>Welcome, {{ player.name }}!</p>
  <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.

3. Create your screen class

public class MyScreen extends TesseraScreen {

    private TesseraPanel root;

    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),
            px, py, pw, ph
        );
    }

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

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

TesseraScreen automatically wires render(), mouseClicked(), keyPressed(), and mouseScrolled().

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

Clone this wiki locally