FiveM NUI

HTML/CSS/JS interfaces for FiveM: manifest setup, Lua-to-browser messages, NUI callbacks and focus handling.

Activation Contract

Load this skill when the user asks to create or edit a FiveM UI, writes HTML/CSS/JS inside a resource, sets ui_page, or asks about SendNUIMessage, SetNUIFocus or RegisterNUICallback.

Hard Rules

Declare ui_page and include every UI file in files in fxmanifest.lua; a missing file silently fails to load.
Reference assets with https://cfx-nui-<resource>/path; the nui:// protocol is deprecated.
RegisterNUICallback handlers must ALWAYS call cb(...) (at least cb({})), or the browser request hangs.
Browser calls callbacks with fetch('https://' + GetParentResourceName() + '/<name>', { method: 'POST', body: JSON.stringify(...) }); the URL name must match the registered name exactly.
SetNUIFocus(keyboard, mouse): always call SetNUIFocus(false, false) when closing the UI.
NUI callbacks run on the CLIENT. Validate their data client-side, then re-validate on the server before any state change; never trust UI-sent prices, amounts or ids.
Minimize SendNUIMessage calls: batch updates rather than sending per frame.
Debug with F8 and Chrome DevTools; test the page in a browser with a mock mode.

Decision Gates

Direction	Mechanism
Lua to browser	`SendNUIMessage({ type = ..., data = ... })` + `window.addEventListener('message')`
Browser to Lua	`fetch` POST to `https://<resource>/<callback>` + `RegisterNUICallback`
Browser wants server data	callback to Lua client, then a server callback
Show / hide cursor	`SetNUIFocus(true, true)` / `SetNUIFocus(false, false)`
Keyboard only	`SetNUIFocus(true, false)`

Execution Steps

Add ui_page and files to the manifest (read rules/setup.md).
Build index.html, CSS and JS; listen for message events keyed by type.
Register Lua callbacks for every action the UI can request; call cb on every path.
Manage focus on open/close; handle Escape to close.
Forward any state-changing action to the server and validate there.

Output Contract

Return the manifest entries, the HTML/CSS/JS files, and the Lua client script with callbacks and focus handling. Keep security-relevant logic on the server.

References

rules/setup.md — folder layout, manifest, build tools, common mistakes.
rules/fullscreen-nui.md — SendNUIMessage, SetNUIFocus, focus stack, assets, devtools.
rules/nui-callbacks.md — RegisterNUICallback, fetch, async, errors, security.
rules/best-practices.md — performance, security, state, error handling, testing.
rules/reference-links.md — official docs and natives reference.

Upstream docs: https://docs.fivem.net/docs/scripting-manual/nui-development/

fivem-nui