fivemnuihtmljavascriptluaui

NUI Bridge — Properly connect Lua to HTML in FiveM.

M2Dev

March 22, 2026

1 min read

3 views

NUI Bridge — Connects Lua to HTML in FiveM.

NUI (Natural User Interface) is a system that allows FiveM scripts to display HTML interfaces and communicate with Lua code.

Architecture

Lua (Game) <-> NUI Bridge <-> HTML/JS (Browser)

Lua -> HTML: SendNUIMessage({ action = "show", data = {...} })
HTML -> Lua: fetch('https://cfx-nui-resourcename/callback', { method: 'POST' })

Lua side: send data to HTML

function OpenShop(items)
    SetNuiFocus(true, true)
    SendNUIMessage({
        action = "openShop",
        data = { items = items }
    })
end

-- Get callback from HTML
RegisterNUICallback('buyItem', function(data, cb)
    local itemName = data.item
    TriggerServerEvent('myScript:buyItem', itemName)
    cb({ success = true })
end)

RegisterNUICallback('closeUI', function(data, cb)
    SetNuiFocus(false, false)
    SendNUIMessage({ action = "closeShop" })
    cb({})
end)

HTML/JavaScript side

<!DOCTYPE html>
<html>
<body style="margin:0; display:none; background:transparent">
<div id="shop"></div>

<script>
window.addEventListener('message', function(event) {
    const data = event.data;
    if (data.action === 'openShop') {
        document.body.style.display = 'block';
        renderItems(data.data.items);
    } else if (data.action === 'closeShop') {
        document.body.style.display = 'none';
    }
});

function buyItem(itemName) {
    fetch(`https://${GetParentResourceName()}/buyItem`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ item: itemName })
    });
}
</script>
</body>
</html>

fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

ui_page 'ui/index.html'

files { 'ui/index.html', 'ui/style.css', 'ui/app.js' }

client_scripts { 'client.lua' }
server_scripts { 'server.lua' }

Best Practices

GetParentResourceName() — Use dynamic resource name instead of hardcode.
SetNuiFocus — Remember to reset to false when closing the UI.
background: transparent — very important in body style

Summary

NUI Bridge is the foundation of FiveM UI development. Understand this pattern and create unlimited interfaces.

Breaking: GTA Online อัพเดท "Money Fronts" — FiveM Server Owners ต้องทำอะไร?

Rockstar ปล่อย GTA Online อัพเดท Money Fronts มีผลกระทบต่อ FiveM servers บางส่วน นี่คือสิ่งที่ต้องทำทันทีหลังอัพเดท

Community Spotlight: Script และ Projects ที่น่าสนใจจาก FiveM Community

รวม scripts, tools และ projects ที่โดดเด่นจาก FiveM community ในช่วงที่ผ่านมา ตั้งแต่ free resources ถึง open-source projects

txAdmin อัพเดทใหม่ — Dashboard, Diagnostics และ Ban System ที่ดีขึ้น

txAdmin ซึ่งตอนนี้เป็นส่วนหนึ่งของ Cfx.re อย่างเป็นทางการ ได้รับการอัพเดทครั้งใหญ่ มี features ใหม่ที่ทำให้ Server Management ง่ายขึ้นมาก