Skip to Content
ScriptingNUI (User Interface)

NUI (User Interface)

NUI allows you to create custom HTML/CSS/JavaScript interfaces.

Basic Setup

fxmanifest.lua

ui_page 'html/index.html'
 
files {
    'html/index.html',
    'html/style.css',
    'html/script.js'
}

HTML Structure

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app"></div>
    <script src="script.js"></script>
</body>
</html>

Communication

Client to NUI

-- Send data to NUI
SendNUIMessage({
    type = 'showMenu',
    data = menuData
})

NUI to Client

// Send data from NUI
fetch(`https://${GetParentResourceName()}/callback`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        type: 'buttonClick',
        data: buttonData
    })
})

Client Receives from NUI

RegisterNUICallback('callback', function(data, cb)
    print('Received from NUI:', data)
    cb('ok')
end)

React Setup

For React applications:

  1. Build React app
  2. Output to html/ folder
  3. Configure in fxmanifest.lua

CORS Configuration

NUI automatically handles CORS. No additional configuration needed.

Best Practices

  • Minimize NUI calls
  • Use efficient rendering
  • Handle errors gracefully
  • Test on different resolutions
Last updated on
Lua BasicsScripting Overview