fivem-nui

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

1. Add ui_page and files to the manifest (read rules/setup.md).
2. Build index.html, CSS and JS; listen for message events keyed by type.
3. Register Lua callbacks for every action the UI can request; call cb on every path.
4. Manage focus on open/close; handle Escape to close.
5. 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/