Use NUI: create UI with HTML, CSS, and JavaScript

NUI (Native UI) is how you render HTML, CSS, and JavaScript on top of the GTA V game world. Every custom HUD, inventory screen, phone UI, and menu in FiveM runs through NUI. This lesson builds a functional NUI overlay from scratch - the foundation for every interface you will ever build.

You'll build: A FiveM resource that shows an HTML overlay with a button, sends data between Lua and JavaScript, and closes cleanly.
Time: ~25 minutes
You need: A local FiveM server, basic knowledge of HTML and JavaScript.
You'll learn: Setting up NUI in fxmanifest, sending messages with SendNUIMessage, receiving with RegisterNUICallback, and focusing input correctly with SetNuiFocus.

BEFORE YOU START

Build it

Create the resource skeleton

The folder structure and manifest are ready.

code

resources/qu_nui_demo/
fxmanifest.lua
client.lua
html/
index.html
style.css
script.js

code

fx_version 'cerulean'
game 'gta5'

client_script 'client.lua'

ui_page 'html/index.html'

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

ui_page tells FiveM which HTML file to load. files {} lists every file NUI needs so the client downloads them.

Build the HTML page

A basic overlay with a button and a text display.

Use NUI: create UI with HTML, CSS, and JavaScript

Build it

Create the resource skeleton

Build the HTML page

Open NUI from Lua

Receive messages in JavaScript

Handle NUI callbacks in Lua

Keep reading the full lesson