Introduction to NUI in FiveM Development

/ Main / By

When developing immersive FiveM servers, creating interactive user interfaces is a crucial part of the experience. This is where NUI (New User Interface) comes in. NUI allows you to build fully customizable HTML, CSS, and JavaScript-based menus, HUDs, and pop-ups that integrate seamlessly with your server scripts.

In this post, we’ll explore what NUI is, how it works in FiveM, and how you can use it to create engaging interfaces for players.

What is NUI?

NUI in FiveM is a system that lets you create browser-based interfaces that are rendered in-game. Unlike standard GTA V HUD elements, NUI is fully customizable, interactive, and can respond to player inputs in real-time.

For example, you can use NUI to:

  • Create inventory systems with drag-and-drop functionality
  • Build interactive job menus for roleplay servers
  • Display custom notifications or mission objectives
  • Design mini-games and custom interactive maps

NUI bridges the gap between web development and FiveM scripting, making it possible to leverage your HTML and JavaScript skills to enhance the gameplay experience.

How NUI Works in FiveM

NUI interfaces are essentially HTML pages that communicate with client scripts using messages and callbacks. The flow typically looks like this:

  1. Client triggers NUI – For example, a player presses a key to open an inventory.
  2. NUI page opens – The HTML interface is displayed, allowing interaction.
  3. Messages sent between NUI and client scripts – JavaScript sends data to the Lua or C# client script using SendNUIMessage, and the client can send events back to the interface.

Example: Opening a Simple NUI Menu

Client Script (Lua)

RegisterCommand("openMenu", function()
    SetNuiFocus(true, true)
    SendNUIMessage({ action = "openMenu" })
end)

HTML/JavaScript (NUI)

<script>
window.addEventListener('message', function(event) {
    if (event.data.action === "openMenu") {
        document.getElementById("menu").style.display = "block";
    }
});
</script>

This simple setup allows a player to press a key and open a custom menu directly in-game.

Sending Data Between NUI and Scripts

You can send data from your NUI interface back to the client script using POST events. For example, submitting a form or selecting an option:

fetch(`https://${GetParentResourceName()}/submitForm`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ item: selectedItem })
});

On the Lua side, you handle this with a callback:

RegisterNUICallback('submitForm', function(data, cb)
    print("Player selected item: " .. data.item)
    cb('ok')
end)

This two-way communication makes NUI ideal for dynamic interfaces like inventories, shops, or custom menus.

Practical Uses for NUI

NUI can be applied to virtually any interactive system in your FiveM server:

  1. Inventory Systems – Drag and drop items, equip weapons, or manage player storage.
  2. Job Menus – Allow players to select roles, view tasks, or track progress.
  3. HUDs and Status Bars – Display player health, hunger, stamina, or money in a visually appealing way.
  4. Mini-Games and Quests – Integrate puzzles, mission objectives, or other interactive elements.
  5. Custom Notifications – Display pop-ups for events like bank transactions, alerts, or announcements.

By using NUI, your server feels modern, interactive, and professional, which can dramatically improve player engagement.

Best Practices for NUI in FiveM

  1. Optimize performance – Avoid heavy animations or frequent DOM updates, as NUI is rendered in-game and can affect FPS.
  2. Keep communication clear – Use consistent event names and callbacks to prevent errors between NUI and scripts.
  3. Focus on UX – Design interfaces that are intuitive and visually clear.
  4. Secure your scripts – Never trust data from NUI blindly; always validate it on the client or server side.
  5. Combine with server events – Integrate NUI menus with server-side logic for dynamic gameplay experiences.

NUI in FiveM Development

NUI is an essential tool for any FiveM developer looking to create interactive, polished, and engaging interfaces. By combining HTML, CSS, and JavaScript with client and server scripts, you can design menus, HUDs, and custom UI elements that bring your server to life.

In the Learn FiveM Development course, you’ll practice creating NUI interfaces through real-world projects—like interactive inventories, job menus, and custom notifications—so you can confidently integrate them into your servers and provide a professional, immersive experience for your players.

Scroll to Top