np_docs

Dev workflow ​

NUI in the browser ​

sh
cd web
npm ci
npm run dev          # http://localhost:5173: the phone with mock data for every app
npm run typecheck && npm run build   # must pass before committing (output: web/dist)

Outside FiveM, every app's mock.ts acts as the backend, so you can build and screenshot the whole phone without a server.

URL parameters ​

ParameterEffect
?app=<id>Open an app (messages, wallet, chirp, …)
?app=<id>&params=<json>Open with deep-link params, e.g. ?app=messages&params={"text":"hi"}
?stage=gameIn-game stage: phone bottom-right with slide / ring / full-screen behaviour
?stage=game&closed=1&incoming=1Ring mode: incoming call while the phone is put away (Y / Backspace)
?locked=1, ?passcode=1234Lock screen, passcode
?cc=1Control Center
?page=2, ?edit=1Widget page, edit mode
?banner=1, ?call=1Notification banner, active call
?streamer=1Streamer mode
?placeholders=1Inert icons for reserved apps that don't exist yet
?time=09:41Fixed clock for screenshots

App-specific parameters (?app=phone&incoming=1, ?app=photos&viewer=1, ?app=chirp&view=compose, …) are listed at the bottom of each app area page.

In the browser console (dev only): window.npDev = { nui, push, store, openApp }.

Lua ​

  • Lua 5.4, 2-space indent, no CfxLua-only syntax (no backtick hashes; use joaat).
  • Every file must pass luac -p.
  • Every server handler validates params types and ownership. Never trust amounts or ids from the client.
  • No polling while the phone is closed. The idle resmon target is 0.00 ms.

Screenshots ​

  1. Take shots of the dev build at a 600×900 viewport into web/screenshots/.
  2. python3 mockups/real/build.py renders the sheets to docs/screenshots/.
  3. In this docs repo: npm run sync:images.

Design mockups ​

The original concept sheets are plain HTML/CSS (mockups/*.html, mockups/phone.css, renders in mockups/renders). Re-render them with ./mockups/render.sh. Icons are Font Awesome Free.

Next ​

np_* FiveM resources