Build FiveM UIs faster with fivem-ui-lib

Writing raw NUI callbacks involves repetitive fetch URLs, manual JSON parsing, and boilerplate event listeners. fivem-ui-lib wraps all of that in a clean API so you focus on your UI logic instead of the plumbing. This lesson sets up fivem-ui-lib and builds a working overlay in half the code of raw NUI.

You'll build: A NUI overlay using fivem-ui-lib - bidirectional Lua↔JS communication with clean .send() and .on() methods, plus in-game notifications.
Time: ~20 minutes
You need: A local FiveM server, basic HTML/JS knowledge, and the fivem-ui-lib from GitHub.
You'll learn: How fivem-ui-lib simplifies NUI development, the .send()/.on() pattern, built-in notifications, and how to skip boilerplate NUI code.

BEFORE YOU START

Build it

Get the library

fivem-ui-lib is in your resource folder.

Get it from GitHub: https://github.com/Jax-Danger/fivem-ui-lib

Or clone directly into your resource:

code

cd resources
git clone https://github.com/Jax-Danger/fivem-ui-lib.git

Set up the resource

Your resource loads the library alongside your NUI.

code

fx_version 'cerulean'
game 'gta5'

client_script 'client.lua'
ui_page 'html/index.html'

files {
'html/index.html',
'html/script.js',
'fivem-ui-lib/**/*',
}

Use .send() and .on() for communication

Two-way Lua↔JS with clean method calls.

code

// Import the library
import { useNui } from './fivem-ui-lib/index.js';

const nui = useNui();

// Send data to Lua
document.getElementById('submitBtn').addEventListener('click', () => {
nui.send('submitForm', { name: 'Player1', amount: 500 });
});

// Receive data from Lua
nui.on('openMenu', (data) => {
document.getElementById('app').style.display = 'block';
document.getElementById('title').textContent = data.title;
});

// Show an in-game notification
nui.showNotification('Welcome back!', 'success');

code

-- Receive from NUI
RegisterNUICallback('submitForm', function(data, cb)
print(('Received: name=%s amount=%s'):format(data.name, data.amount))
cb('ok')
end)

-- Send to NUI
RegisterCommand('openmenu', function()
SetNuiFocus(true, true)
SendNUIMessage({
    __type = 'openMenu',  -- fivem-ui-lib routes by __type
    title = 'Player Menu'
})
end, false)

Keep reading the full lesson

Still ahead in this lesson

Common failures