What is NUI in FiveM?
NUI stands for New User Interface and is the system FiveM uses to render HTML-based interfaces inside the game client. Under the hood, NUI is powered by the Chromium Embedded Framework, which means you can use standard HTML, CSS, and JavaScript to build rich, interactive UIs. This opens up enormous possibilities for creating custom phone screens, inventory systems, HUDs, and admin panels that feel native to the game while leveraging the full power of modern web technologies.
Setting Up Your First NUI
To create a NUI interface, you need three things: an HTML file declared as ui_page in your fxmanifest.lua, the HTML/CSS/JS files themselves, and Lua code to communicate between the game and the interface. Your manifest should include ui_page 'html/index.html' and list your web assets in the files directive. The HTML page loads inside an invisible overlay by default, and you control its visibility through Lua by setting the NUI focus state with SetNuiFocus.
SendNUIMessage and RegisterNUICallback
Communication between Lua and your NUI is bidirectional. From Lua to the UI, you use SendNUIMessage to pass a table that gets serialized to JSON and received in JavaScript through a message event listener on the window object. From the UI back to Lua, you use the fetch API to call endpoints registered with RegisterNUICallback. This callback system lets your JavaScript code trigger Lua functions and receive responses, enabling seamless integration between game logic and interface state.
Responsive Design for FiveM
FiveM players use a wide range of screen resolutions, so your NUI designs should be responsive. Use relative units like vh, vw, and percentages instead of fixed pixel values for layout. CSS Flexbox and Grid work perfectly for creating adaptive layouts. Keep in mind that the NUI overlay sits on top of the game, so use transparent backgrounds where possible and avoid covering the entire screen unless your UI is meant to be a full-screen experience like a phone or laptop prop.
Performance Considerations
NUI performance directly impacts the game client frame rate. Avoid heavy CSS animations, excessive DOM manipulation, and large image assets. Use CSS transforms for animations instead of changing layout properties, and debounce JavaScript events that fire frequently. If your UI updates regularly, consider using requestAnimationFrame instead of setInterval. When the UI is not visible, send a message from Lua to pause any running intervals or animations in your JavaScript to free up resources.
Using Frameworks with NUI
While vanilla HTML and JavaScript work fine for simple UIs, complex interfaces benefit from frameworks like React, Vue, or Svelte. These frameworks handle state management and DOM updates efficiently, reducing the code you need to write. Many FiveM developers use React with NUI because of its component-based architecture and strong ecosystem. Set up a build step with Vite or webpack to compile your framework code into static files that can be included in your resource, and use the production build for deployment to minimize bundle size.