NUI

NUI (Native UI) is FiveM's system for rendering HTML/CSS/JS UIs in-game. Shiva provides two tiers for building NUI.

Tier 1: Server-Rendered Templates

Simple UIs defined entirely in Lua with a minimal HTML template. No JavaScript needed. Best for menus, dialogs, and notifications.

local View = require('shiva-fw.view')

-- Show a simple menu to a player
View.show(source, 'menu', {
    title = 'Mechanic Shop',
    items = {
        { label = 'Repair Vehicle',   action = 'repair',   price = 500 },
        { label = 'Upgrade Engine',   action = 'upgrade',  price = 2000 },
        { label = 'Change Color',     action = 'color',    price = 300 },
    },
})

-- Handle selection
View.on('menu:selected', function(source, data)
    if data.action == 'repair' then
        -- handle repair
    end
end)

Tier 2: Full NUI Apps

Full HTML/CSS/JS applications built with any front-end framework (Vue, React, Svelte). Shiva provides a typed message bridge.

-- Server → Client message
TriggerClientEvent('nui:show', source, 'inventory', {
    items = playerItems,
})

-- Client → Server callback (in your JS)
-- fetch('https://my-module/closeInventory', { method: 'POST', body: JSON.stringify({}) })

See the NUI Tier 2 guide → for the full Lua/JS bridge API.

NUI Rules

• Never trust client-sent data — always validate on the server
• No sensitive data in NUI state — player balances sent to the NUI are display-only, never authoritative
• Close NUI on disconnect — always handle cleanup in player:disconnected

See Also

• Developing: NUI Tier 1 →
• Developing: NUI Tier 2 →
• API: View →