NUI basics: building interfaces for FiveM

#Declaring the page

fx_version 'cerulean'
game 'gta5'

ui_page 'html/index.html'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js',
    'html/img/*.png',
}

client_script 'client.lua'

Every file the page loads must be listed in files, or it is not sent to players and the browser gets a 404. Wildcards work. A built React/Vite app is listed the same way — see React and Vite.

#Sending data to the page

RegisterCommand('bank', function()
    SendNUIMessage({ action = 'open', balance = 12500 })
    SetNuiFocus(true, true)
end, false)

window.addEventListener('message', (event) => {
  const msg = event.data;
  if (msg.action === 'open') {
    document.querySelector('#balance').textContent = '$' + msg.balance;
    document.body.classList.add('open');
  }
});

The Lua table is converted to JSON and arrives as a plain JavaScript object. Use one field (like action) to route messages.

#Talking back to Lua

The page answers with a POST request to its resource; Lua handles it with RegisterNuiCallback. Full details and a reusable helper: NUI callbacks with fetch. Keyboard and mouse control: NUI focus and cursor.

#Asset URLs

#NUI page vs loading screen

Loading screens are covered in the HTML loading screen tutorial.

#Plain HTML or a framework?

Plain HTML and JavaScript are perfect for small UIs. For inventories, phones or anything with lots of state, a framework (React, Vue, Svelte) built to static files keeps the code manageable. Either way the result is static files in files — nothing runs on a Node server.