Hytale UI Studio 🎨

Hytale UI Studio is a powerful, web-based, real-time editor for prototyping Hytale’s custom user interface (.ui) files.
Write Hytale-specific declarative code and instantly see the result. No game restarts. No pain.

---

✨ Features

• Real-Time Preview
  Type code on the left, see the UI update instantly on the right.

• Custom Parser
  Built-in Lexer + Parser written in JavaScript, made specifically for Hytale’s UI syntax.

• Error Detection
  Detects missing semicolons, unclosed braces, and syntax errors with line highlighting.

• Material Design 3
  Clean, modern, dark UI following Google’s Material 3 guidelines.

• Internationalization (i18n)
  Full support for English and Portuguese (PT-BR).

• Documentation
  Built-in API reference and guides for Hytale UI components.

---

🚀 How to Use

1. Open index.html in any modern web browser
2. Start typing your UI code in the editor
3. Watch the preview update in real time
4. Use Spawn Example to load a working template

---

🛠️ Hytale UI Crash Course

Hytale uses a declarative language mixing JSON-like structure with CSS-like behavior.

---

📁 File Structure

UI files usually live in:

src/main/resources/Common/UI/Custom/

---

🧠 Key Concepts

Concept	Syntax Example	Description
Groups	Group { ... }	Base container (like HTML div)
Variables	@Color = #fff;	Reusable values
Imports	$C = "../Common.ui";	Import other UI files
Layouts	LayoutMode: Top;	Child arrangement (Top, Left, Center)
Anchors	Anchor: (Width: 100);	Size and positioning

---

🧩 Example Code

@MainColor = #eca024;

Group #MyContainer {
  LayoutMode: Top;
  Background: #212121;
  Padding: (Full: 20);
  Anchor: (Width: 400);

  Label {
    Text: "HELLO HYTALE";
    Style: (
      FontSize: 24,
      TextColor: @MainColor,
      Alignment: Center
    );
  }

  Button #MyButton {
    Text: "Click Me";
    Anchor: (Height: 48, Top: 20);
  }
}

---

🤝 Contributing

Open-source and ready to evolve.

1. Fork the project

2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m "Add some AmazingFeature"

4. Push to your branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

---

☕ Support the Creator

If this tool helped you build sick Hytale mods, consider supporting:

• GitHub: @cookieukw
• YouTube: @cookieukw
• Ko-fi: Buy me a coffee ☕

---

Disclaimer

This is a community-made tool. Not affiliated with or endorsed by Hypixel Studios.