Fullscreen NUI

The most common use case of NUI is a full-screen 'UI page', which is overlaid on top of the game and may or may not have input focus. These are supported on both FiveM and RedM at this time, and are part of basic CitizenFX framework level support.

The following natives are related to using full-screen NUI:

Setting up a fullscreen NUI page

To assign a full-screen NUI page to a resource, currently you need to specify a single ui_page in the resource manifest for the resource containing an UI page, like shown below:

-- specify the root page, relative to the resource
ui_page 'main.html'

-- every client-side file still needs to be added to the resource packfile!
files {

-- a page can also be hosted externally
ui_page 'https://ui-frontend.cfx.example.com/b20210501/index.html'

Referencing other assets

The NUI system registers a nui:// protocol scope for resource files. Therefore, you can reference a file in a resource as follows:

<script type="text/javascript" src="nui://my-resource/production.js" async></script>

Developer tools

CEF remote debugging tools are exposed on http://localhost:13172/ as long as the game is running. You can use any Chromium-based browser to easily access these tools.

Alternately, it can be opened using the nui_devTools command in the game's F8 console.

NUI focus

There's a limited focus stack for NUI resources, you can set focus to the current resource using the SET_NUI_FOCUS native, which will set keyboard focus and/or mouse cursor focus depending on the provided arguments.

The most recently focused resource will be ordered on top of the focus stack, and resources are currently implemented as full-screen iframes: that means there's no click-through across resources.

NUI messages

You can send a message to the current resource's NUI page using the SEND_NUI_MESSAGE native, or if using Lua, the convenience wrapper SendNUIMessage which encodes a JSON string for you..

For example:

-- Lua
    type = 'open'

// JS
    type: 'open'

// C#, assumes Newtonsoft.Json PCL version is referenced
    type = "open"

// browser side
window.addEventListener('message', (event) => {
    if (event.data.type === 'open') {