NUI Preview

Every FiveM UI starts life display: none. To see what you are building you normally have to launch the game, join your server, and trigger whatever shows the panel — for every change.

NUI Preview renders the interface inside Boltise instead.

Opening it

Open NUI Preview from the sidebar. Boltise finds the UI in your resource by reading ui_page in the manifest, and detects how it is built.

Two modes, chosen for you:

Static — plain HTML, CSS and JS, or an already-built dist/ folder. Served directly.
Dev server — a project with a build step. Boltise detects Vite, Webpack, Create React App, Next, React or Vue, starts the dev server, and proxies it, so hot reload works exactly as it does outside Boltise.

The browser environment is mocked

A FiveM UI does not run in a normal browser. It expects things only the game provides, and without them the page throws before it renders. Boltise supplies them:

GetParentResourceName() returns your actual resource name
fetch() to https://resource-name/callback is intercepted rather than failing as a bad host
SendNUIMessage is simulated, so you can push the messages your UI listens for and watch it react
Force visible overrides the display: none that hides every NUI by default

That last one sounds small and is the reason the feature exists.

Select mode

Turn on Select mode and hover any element: it outlines, and a tooltip shows the CSS selector along with the source file and line it came from. Click it and Boltise opens an editing prompt for that element.

Describe the change in plain English. The assistant produces a diff against the real source file, which you review and apply or reject — and the running preview hot-reloads to show the result. Nothing is written until you accept it, the same approval flow as everywhere else in Boltise.

Cross-referenced with Code Graph

Every fetch('https://your-resource/some-event') in the JavaScript is matched to the RegisterNUICallback('some-event', …) in the Lua that answers it, and you can jump straight to it. That link is the one most often broken by a rename, and it is invisible in either file on its own.

See Code Graph for how those connections are built.

What it does not do

The preview is your UI in a browser, not your UI in the game. Anything that depends on the running game — a native call, real player data, an event your Lua would have sent — is simulated or absent. Use it to build and check the interface; use the game to check the integration.