Hytale UI VS Code Extension

Your frontpage for building Hytale UI. Fast syntax highlighting, guardrails that catch mistakes early, and project-aware tooling for real .ui codebases.

Showcase

Demo Grid	Demo Inputs

More UI shots are coming as new renders land in the shared interfaces project.

Built with Real UI (Vex Lich Dungeon)

This extension is exercised against a live UI library from the Vex Lich Dungeon project (shared/interfaces). That codebase drives the examples, macros, and patterns you see in the README.

What that library covers:

• Pages: Hello World, Friends List, Widget Examples, plus demo pages for tabs, stats, inputs, modal, toast, pagination, and grid
• HUDs: Party Status, Objectives, Quick Actions, Widget Strip
• Macro libraries: Layout, Grid, Inputs, Tabs, Toolbar, Stats, Toast, Modal, Pagination

A tiny peek at the macro-driven style used in those demos:

$L = "../../Macros/Layout.ui";
$G = "../../Macros/Grid.ui";

$L.@PageFrame #Frame {
  @Width = 560;
  @Height = 360;
  $L.@HeaderBar #Header { @Text = "Demo: Grid"; }
  $G.@TileGrid #Grid { }
}

Why This Extension Exists

This extension is built alongside my procedurally generated dungeon plugin. The same UI system you see here powers real in-game flows, so the extension stays grounded in production patterns instead of toy examples.

UI Learning Log (Procedural Dungeon Plugin)

I publish everything I learn while building my procedurally generated dungeon plugin. If you want the thinking, experiments, and iteration notes behind these UIs, follow the log:

• Findings: https://vex.boop.ninja/dev/ui/
• Dev log home: https://vex.boop.ninja/dev
• RSS: https://vex.boop.ninja/feed.xml

Features

• Syntax highlighting for Hytale UI .ui files
• Diagnostics for common pitfalls (invalid group naming, unsupported attributes, missing imports, etc.)
• Import navigation (Ctrl/Cmd+Click on import paths)
• Asset indexing for custom UI projects to improve import resolution and IntelliSense

Getting Started

1. Install the extension from the VS Code Marketplace.
2. Open any .ui file.
3. Enjoy syntax highlighting and diagnostics.

Configuration

• hytaleUi.unpackedAssetsRoot
  • Path to your unpacked server assets root (relative to the workspace)
  • Default: data/assets/Common
• hytaleUi.enableAssetsIndexing
  • Enable indexing of unpacked assets for improved UI import resolution and IntelliSense
  • Default: true

Development

• Package locally: npx @vscode/vsce package
• Publish: npx @vscode/vsce publish -p <VSCE_PAT>

The CI workflow will also package a .vsix, attach it to GitHub Releases, and publish to the Marketplace when VSCE_PAT is set in repo secrets.

License

AGPL-3.0