NUI basics: building interfaces for FiveM

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.

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.

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.

Loading screens are covered in the HTML loading screen tutorial.

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.