Build Unity UIs with
Web Technologies

Installation & Setup

Method 1: Setup Wizard (Recommended)

The easiest way to get started is by using the built-in Setup Wizard. This will automatically fetch the required packages and activate the core files.

1. In Unity, go to the top menu and select Tools > NexusUI > Setup Wizard.
2. Click the green Download & Install Dependencies button.
3. Wait for Unity to fetch the packages and recompile. You are ready to go!

Method 2: Manual Installation (GitHub)

If you prefer to install the dependencies manually via the Unity Package Manager (UPM), follow these steps:

1. Open the Package Manager (Window > Package Manager).
2. Click the + button in the top-left corner and select Add package from git URL...
3. Paste the following URL and click Add:

https://github.com/GokhanTtnDev/NexusUI-Dependencies.git

Once installed, Unity will automatically define the NEXUSUI_JINT_INSTALLED symbol and awaken the core framework components.

Build Your First UI in 3 Steps

• 1.
  Add the Component: Create an empty GameObject in the Unity Hierarchy window and add the NexusDocument script via the Inspector.
• 2.
  Open Nexus Studio: Click on Window > NexusUI > Nexus Studio from the top menu. This is your live code editor.
• 3.
  Write the Code: Paste the code below into the text area in the opened window. You will see the interface generate instantly on the Unity screen without needing to press Play.

<!-- absolute and inset-0: Expands the UI to full screen -->
<div class="absolute inset-0 flex flex-col items-center justify-center bg-[rgba(15,23,42,0.95)]">
    <h1 class="text-5xl font-extrabold text-transparent bg-gradient-to-r from-cyan-400 to-blue-500 mb-4">
        Welcome to the Game
    </h1>
    <p class="text-lg text-slate-400">Designing UI with NexusUI is this easy!</p>
</div>

Design: Alignment, Color, and Size

NexusUI supports the popular Tailwind CSS system. You don't need to create extra stylesheet files; you write the classes directly into your HTML elements.

• Flexible Sizes: You can assign exact pixel values using arbitrary brackets, such as w-[250px] or h-[50%].
• Alignment (Flexbox): Use flex-row to align items side-by-side, or flex-col to stack them. You can add spacing between them using gap-x-4.
• Colors: Infinite color support is available. You can use formats like bg-[#FF0000], text-slate-300, or bg-[rgba(0,0,0,0.5)].

Example: Miner Game Resource Panel (HUD)

Let's design a stylish info bar positioned at the top of the game screen to display the amount of gold.

<!-- A flex container pinned to the top of the screen -->
<div class="absolute top-0 inset-x-0 w-[100%] pt-[20px] px-[40px] flex flex-row justify-between pointer-events-none">
    
    <!-- Gold Indicator -->
    <div class="bg-[rgba(15,23,42,0.85)] border-2 border-yellow-500 rounded-[16px] px-6 py-3 flex flex-row items-center gap-x-3 pointer-events-auto">
        <div class="w-[20px] h-[20px] bg-yellow-500 rounded-full"></div>
        <span class="text-[20px] font-extrabold text-white">Gold: 1,450</span>
    </div>
    
    <!-- Player Name -->
    <div class="bg-[rgba(15,23,42,0.85)] border-2 border-slate-600 rounded-[16px] px-6 py-3 flex items-center pointer-events-auto">
        <span class="text-lg text-slate-300 font-bold">Player: Gokhan</span>
    </div>

</div>

Interaction: Buttons and Click Protection

There are two very simple rules you need to follow when creating clickable elements (buttons) in your interface:

1. Preventing Clicks from Passing Through

While the UI is on the screen in Unity, you must prevent the user from accidentally clicking on the 3D world behind it. To do this, add the pointer-events-none class to the main container (ignores clicks), and add pointer-events-auto (accepts clicks) to the specific button being clicked.

2. Animated States (Hover and Active)

You can define color and size changes in a single line for when the mouse hovers over the button (hover:) or when the button is clicked (active:).

Example: Interactive Menu Button

<!-- Button Definition -->
<button class="
    w-[200px] py-4 bg-blue-600 rounded-xl text-white font-bold 
    pointer-events-auto 
    hover:bg-blue-500 
    active:scale-95 
    transition-all duration-300
">
    Start Game
</button>

Using Components (Templates)

Imagine having dozens of UI elements with the exact same design (for instance, an inventory bag with 20 different items). Instead of copy-pasting the same HTML code over and over, we use a Template system.

First, we create a design using <template>. Inside it, we write variables like {name} for data that will be passed in from the outside. Then, we use it as if it were a custom HTML tag.

Example: Creating a Character Card

<!-- STEP 1: Define the template once -->
<template id="CharacterCard">
    <div class="bg-slate-800 border-2 border-slate-600 rounded-xl p-5 flex flex-col items-center w-[160px] pointer-events-auto hover:border-blue-400">
        
        <!-- {name} and {role} will be provided from the outside -->
        <h3 class="text-xl font-bold text-white">{name}</h3>
        <p class="text-sm text-blue-300 mb-3">{role}</p>
        
        <!-- <slot /> represents any extra HTML placed inside this tag -->
        <div class="w-[100%] border-t border-slate-600 pt-3">
            <slot />
        </div>

    </div>
</template>

<!-- STEP 2: Duplicate the template as many times as needed -->
<div class="flex flex-row gap-4 p-10 absolute inset-0 justify-center items-center">
    <CharacterCard name="Gokhan" role="Mage">
        <p class="text-xs text-slate-400 text-center">Level: 85</p>
    </CharacterCard>
    
    <CharacterCard name="Baran" role="Warrior">
        <p class="text-xs text-slate-400 text-center">Level: 42</p>
    </CharacterCard>
</div>

Dynamic Operations with JavaScript

A powerful JavaScript engine (Jint) is embedded inside NexusUI. By simply opening a <script> tag in your HTML file, you can write code just like you would in standard web development.

Even better, you can directly use popular libraries like lodash, dayjs, uuid, and the fetch API system to pull data from the internet—without needing Node.js or any installations.

Example: Fetching a Leaderboard

<div class="bg-slate-800 p-6 rounded-xl w-[300px]">
    <h3 class="text-xl font-bold text-white border-b border-slate-600 pb-2 mb-4">Champion of the Day</h3>
    <p id="data-screen" class="text-cyan-400 font-bold">Connecting to server...</p>
    <p id="date-screen" class="text-xs text-slate-400 mt-4"></p>
</div>

<script>
    // Using the pre-installed DayJS Library
    const dayjs = require('dayjs');
    document.getElementById('date-screen').innerText = "Last Update: " + dayjs().format('MM/DD/YYYY HH:mm');

    // Fetching data from the internet using fetch
    fetch('https://jsonplaceholder.typicode.com/users/1')
        .then(response => response.json())
        .then(data => {
            // Writing the fetched data to the UI
            document.getElementById('data-screen').innerText = data.username + " (12,500 Pts)";
        })
        .catch(error => console.error("Connection error:", error));
</script>

How do you ensure that when the player's health decreases in the C# code, the number on the UI decreases as well? Or how do you increase the health in C# when a "Drink Potion" button is clicked in the UI? NexusUI simplifies this incredibly with the NexusStateManager.

Step 1: Mark the Variable on the C# Side

Go to your C# script in your game. Add [NexusSync] above the variable you want to bind to the UI and give it a name (a key string).

using UnityEngine;
using NexusUI.Core;

public class CharacterManager : MonoBehaviour
{
    // We bound this variable to the UI using the name "player.health".
    [NexusSync("player.health")]
    public int characterHealth = 100;

    // When the JavaScript code in the UI changes this health, this C# function triggers automatically!
    [NexusWatch("player.health")]
    private void OnHealthChanged(int newHealth)
    {
        Debug.Log("Player health changed via a UI request: " + newHealth);
        if (newHealth <= 0) Debug.Log("Character Died!");
    }
}

Step 2: Modify the C# Variable from the UI

Now, let's listen to this player.health key using JavaScript inside our HTML code, and deal damage when the button on the screen is pressed.

<!-- Interface View -->
<div class="p-6 bg-slate-800 rounded-xl pointer-events-auto w-[250px]">
    <h2 id="health-text" class="text-3xl text-green-400 font-extrabold">Health: 100</h2>
    <button id="damage-btn" class="mt-4 w-[100%] bg-red-600 py-3 rounded-lg text-white font-bold hover:bg-red-500 active:scale-95 transition-all">
        Take Damage (-10)
    </button>
</div>

<script>
    // 1. Listen to the C# Side (Runs when health changes in the C# code)
    watchState('player.health', function(newValue) {
        document.getElementById('health-text').innerText = "Health: " + newValue;
    });

    // 2. Send Data to the C# Side (When the button is clicked)
    document.getElementById('damage-btn').addEventListener('click', function() {
        // The ns() function reads the current data (default: 100)
        var currentHealth = ns('player.health', 100);
        
        // We send the new data to C# using NexusState.set.
        // This instantly triggers the 'OnHealthChanged' C# function in Unity!
        NexusState.set('player.health', currentHealth - 10);
    });
</script>