NUI and React: how servers draw their menus
Open almost any roleplay server and the first thing you touch is a menu: a phone, a shop, an inventory grid, a health bar in the corner. Those are not drawn by the game engine. They are web pages, the same kind that run in your browser, rendered on top of the game. That layer has a name in FiveM, and it is the last piece of the ecosystem you need to recognize. By the end of this lesson you will know what NUI is, why it exists, and where the word React fits, without writing a single line of it.
Watch
What NUI is
Here is the core idea, in one sentence: FiveM can take a web page made of HTML, CSS, and JavaScript and render it inside the game, on top of everything else, and that page becomes the user interface the player sees and clicks.
That is it. The shop you walk up to, the phone you pull out, the scoreboard you open with a key: each one is a small web page floating over the 3D world. The game keeps running underneath. The page just sits on top, drawing the buttons and panels.
The name for this layer is NUI, which stands for new UI. When a developer says "I built the menu in NUI" or "that bug is in the NUI," they mean exactly this: the web page rendered over the game. Most beginners hear the word NUI and assume it is some deep, scary game-engine thing. It is not. It is a web page. If you have ever made a single button in HTML, you have already done the hardest conceptual part of NUI.
Vocabulary
- NUI
- New UI. FiveM's name for a web page (HTML, CSS, JavaScript) rendered on top of the game. Every menu, shop, and HUD you see in a server is NUI.
- HTML
- The language that describes the structure of a web page: where the buttons, text, and boxes go. It is the skeleton.
- CSS
- The language that styles a web page: colors, fonts, spacing, layout. It is the paint and the layout rules.
- JavaScript
- The language that makes a web page do things: react to a click, change text, show or hide a panel. It is the behavior.
- SetNuiFocus
- A FiveM function that decides whether the mouse and keyboard are talking to the game or to the NUI page. It is how a menu captures your cursor when it opens, and releases it when it closes.
- NUI callback
- A named message the page sends back to your Lua code, for example when a player clicks a button. It is how the page tells the rest of the server something happened.
Why NUI exists
To see why FiveM bothers with web pages at all, picture the alternative. The game engine can draw text and basic rectangles on screen directly, with built-in drawing commands. That works for a quick label or a debug number, but it is painful the moment you want something that looks finished. Rounded corners, hover effects, a scrollable list, a clean font, a layout that adapts to different screen sizes: all of that is slow, fiddly work with raw drawing commands, and the result rarely looks good.
Web technology already solved this problem years ago. HTML, CSS, and JavaScript are the exact tools the entire internet uses to build beautiful, interactive screens, and millions of people already know them. So FiveM made a deliberate choice: instead of forcing developers to hand-draw every menu, let them build the menu as a web page, then render that page over the game. You get the full power of web design, the huge pool of people who already know it, and a flood of free tools and examples, all pointed at making FiveM menus.
How it talks to your Lua
A web page on its own knows nothing about the game. It does not know your money, your inventory, or which NPC you are standing next to. So the page and your Lua code need a way to talk to each other, and they talk in two directions.
The first direction is Lua to the page. Your Lua code sends a message into the page using a function called SendNUIMessage. That is how Lua says "open the shop, and here are the items and prices to show." The page receives the message and draws what it was told.
The second direction is the page to Lua. When the player clicks a button, the page sends a message back out to your Lua code. That outgoing message is called a NUI callback. It is how the page says "the player clicked Buy on the bread," and then your Lua code decides what to do about it.
Here is one tiny illustration, only so you can see the shape of it. You are not building this. Reading it is the goal.
This is a sketch of the Lua side telling the page to open:
-- ILLUSTRATION ONLY. Lua sends a message into the page.
SetNuiFocus(true, true)
SendNUIMessage({ action = 'open', title = 'Corner Shop' })And this is a sketch of the page side, listening for that message and showing itself:
<!-- ILLUSTRATION ONLY. The web page that becomes the menu. -->
<div id="shop">Corner Shop</div>
<button id="buy">Buy</button>That is the whole conversation in miniature: Lua sends the page a message to open, the page draws itself, the player clicks, and the page sends a callback back to Lua. You do not need to memorize any of this yet. The point is simply that NUI is a two-way street between a web page and your Lua.
Where React fits
You have heard the word React attached to FiveM menus, so let us place it exactly.
For a small UI, plain HTML, CSS, and JavaScript are completely fine, and that is how every NUI page starts under the hood. A single button, a confirm box, a simple health bar: you do not need anything fancy.
React is a popular JavaScript library, which is a pre-written toolkit you add on top of plain JavaScript. Its job is to make large, complicated interfaces manageable: a phone with twenty apps, an inventory you drag items around, a dashboard that updates live. As a UI grows and starts holding lots of changing information (developers call that "state"), plain JavaScript gets messy fast. React gives you a cleaner way to organize all those moving parts.
The thing to lock in: you do not need React to start, and React is not a replacement for HTML, CSS, and JavaScript. It sits on top of them. A NUI page built with React is still, at the end, a web page rendered over the game. React is just the tool a developer reaches for when the page gets big.
You build this in Track C
This is an awareness lesson, by design. Start Here exists so you can look at any server, point at a menu, and say "that is NUI, it is a web page, it talks to Lua with messages and callbacks." That recognition is the win.
Common beginner mistakes
These are the three traps people hit the first time they touch NUI in Track C. You will not run into them yet, but seeing them now means you will recognize the symptom the moment it shows up, instead of staring at a frozen screen wondering what broke.
| Symptom | Fix |
|---|---|
The menu opens but the mouse cursor never appears, or the player gets stuck and cannot move after closing. | This is forgetting SetNuiFocus, or forgetting to release it. Opening a menu has to capture the mouse so the player can click, and closing it has to hand control back to the game. Skip the release and input is still routed to the page, so the game looks frozen when it is not. |
Clicking a button does nothing, with no error to explain why. | Usually the callback name does not match. The page sends a callback with one name and the Lua code is listening for a different one, so the message arrives nowhere. The two names have to be spelled identically. |
The server runs fine until the menu is open, then it stutters or the framerate drops. | A heavy UI that redraws constantly costs performance. NUI is a real browser, so a page doing too much work every frame can slow the whole game. Lean pages stay fast. |
In one sentence, what is a NUI?
A NUI is a web page, made of HTML, CSS, and JavaScript, that FiveM renders on top of the game so it becomes the menu, shop, or HUD the player sees and clicks.
Try it yourself
What you can do now
- Explain that a NUI is a web page (HTML, CSS, JavaScript) rendered on top of the game, and that NUI stands for new UI.
- Point at a menu, shop, or HUD in any server and recognize it as NUI rather than something the game engine drew.
- Say why NUI exists: web technology makes rich, good-looking menus far easier than the game's built-in drawing.
- Describe the two-way conversation: Lua sends messages to the page with SendNUIMessage, the page sends callbacks back to Lua.
- Place React correctly: a JavaScript library that makes big, stateful UIs manageable, sitting on top of plain web tech, not required to start.
- Know that actually building NUIs, plain and with React, is taught hands-on in Track C.
That completes your tour of the ecosystem. You now know the runtime, the resources, the frameworks, and the interface layer that every server is built from. Next you will stop touring and start thinking like a developer: reading errors without panic, and writing code that is safe and fast. The next module is "Think like a developer," and it is where the building begins.