Hytale UI Studio is a powerful visual editor designed specifically for creating and managing user interfaces for Hytale. Built with modern web technologies and packaged as a native desktop app via Tauri 2, it provides an intuitive drag-and-drop experience coupled with a real-time code editor and live preview.
| Project List | Editor (Empty Canvas) | Login Layout Example |
|---|---|---|
 |
 |
 |
| Category | Feature | Description |
|---|---|---|
| 🎨 Editor | Visual Canvas | Drag and drop components to build your UI visually |
| 🎨 Editor | Real-time Preview | See your changes instantly with a live rendered view |
| 🎨 Editor | Design / Blueprint / Split views | Switch between visual design, blueprint, and split modes |
| 🧩 Components | Component Palette | A library of ready-to-use Hytale-style components (Group, Panel, Scroll Area, etc.) |
| 🧩 Components | Input Components | Text Field, Number Field, and more |
| 🧩 Components | Imported UI | Import and reuse UI files within your layouts |
| 🌳 Hierarchy | Tree View | Easily manage complex UI structures with a nested tree view |
| 🌳 Hierarchy | Multi-file Workspace | Work with multiple .ui files in a single project |
| 🔍 Inspector | Property Editor | Fine-tune Anchor, Padding, Margin, Layout, and more |
| 🔍 Inspector | Style Editor | Adjust component styles, inheritance, and visual properties |
| 💻 Code | Code View | Direct access to the underlying .ui markup for advanced users |
| 💻 Code | Live Sync | Code and visual canvas stay in sync in real-time |
| 📂 Project | Project Management | Create, open, search, and manage multiple UI projects |
| 📂 Project | Export/Import | Seamlessly save and load your designs using the .ui format |
| ⏪ History | Undo/Redo | Full history support for your editing session |
| 📱 Platform | Desktop App | Native desktop app for Linux and Windows via Tauri 2 |
| Technology | Purpose |
|---|---|
| Vite | Fast frontend build tool |
| React | UI library |
| Tauri 2 | Native desktop app framework |
| Tailwind CSS | Utility-first CSS framework |
| Radix UI | Unstyled, accessible UI components |
| Zustand | State management |
| Lucide React | Beautiful & consistent icons |
| TypeScript | Type safety and better DX |
-
Clone the repository:
git clone https://github.com/cookieukw/hytale-ui-studio.git
-
Install dependencies:
pnpm install
-
Start the development server:
pnpm tauri:dev
You can build Hytale UI Studio for Linux and Windows.
To build the application on your Linux machine, run the provided script:
./scripts/build.shThe output will be in src-tauri/target/release/bundle/.
The project is configured with GitHub Actions. Every time you push to the main branch:
- It automatically builds for both Windows and Linux.
- You can download the binaries from the Actions tab on GitHub.
To create an official Release:
- Push a tag starting with
v(e.g.,git tag v3.0.0 && git push --tags). - GitHub will automatically create a draft release with all the installers attached.
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
Made with ❤️ for the Hytale community.