Previewing HTML and NUI

Opening the preview

Every AI Script Generator project that contains an .html file has a live preview. It renders your NUI, such as a menu, HUD, phone app or loading screen, right in the browser. There are two ways to open it.

• From the chat: press Preview UI under the chat box. The file panel opens in preview mode. The same button then reads Back to code and takes you back to the editor.
• From the file panel: switch between Code, Split and Preview at the top right of the editor.

1

1. 11. Preview UI: opens the preview, click again for the code

12

1. 11. Back to code: Preview UI switches here
2. 22. Preview: the UI, rendered live

The preview needs no open file: it always shows the project as a whole. It picks the HTML file on its own, a file named index.html first, otherwise the least nested HTML file that is a full page. The bar above the preview names the file it shows. Your choice of view is remembered for each project in this browser.

Code and preview side by side

Split puts the editor and the preview of the AI Script Generator next to each other. You read the HTML on the left and see the result on the right.

123

1. 11. Code / Split / Preview: switch the file panel
2. 22. Preview: html/ui.html: the HTML file being shown
3. 33. Console: logs and errors; the arrow next to it reloads

Both halves share the file panel. When they get narrow, drag the divider between chat and files to the left, or switch to Preview for the full width. Transparent parts of a UI show white in the preview; in game you see the world behind them.

Seeing your changes

The AI Script Generator preview follows every change that is saved, without a restart:

• Your own edits show once they are saved: press Ctrl+S, click outside the editor, or open another file. Text that is still marked unsaved is not in the preview yet.
• The assistant's changes show when its run finishes and the changed files are listed in the chat.
• CSS changes are swapped in place. The page does not reload, so a menu keeps its scroll position and state.

This makes small design changes fast: adjust a colour, a size or a label by hand, save, and look. For bigger changes, ask in chat and check the result in the preview when the run is done.

Hidden menus and HUDs

A NUI usually starts hidden. The game shows it later, when your Lua script sends a message. In a browser that message never comes, so the AI Script Generator preview shows the hidden parts anyway. It overrides these ways of hiding:

• display: none

  Shown as a block

• opacity: 0

  Fully visible

• visibility: hidden

  Visible

• Tailwind classes such as hidden, invisible, opacity-0, scale-0

  Visible, at full size

• Tailwind translate-x-full, translate-y-full and their negatives

  Moved back into view

• pointer-events: none

  Clickable

The job HUD in the screenshots starts with opacity-0 on the page and fades in when the game sends the job data. In the preview it is visible from the start.

Console and reload

The AI Script Generator preview has its own console. Console in the bar above the preview opens it under the page; the number next to it counts warnings and errors.

1

1. 11. Console: Clear empties it, X closes it

• Messages from console.log, warnings and errors appear in the order they happened.
• Uncaught JavaScript errors get their own red counter next to Console. In the list they show with the file and line.
• Clear empties the list. The circular arrow, Reload preview, loads the page again from the start.

The HUD above logs one warning: cdn.tailwindcss.com should not be used in production. It comes from the Tailwind script the page loads from the internet, not from your code, and it does not break the UI.

To get an error fixed, copy it from the console into the chat, as described in Fixing errors.

What the preview cannot do

The AI Script Generator preview runs the HTML, CSS and JavaScript of your project, but without FiveM. Use it for layout, colours, text and animations; test how the UI works together with the game on your server.

• Lua sends data with SendNUIMessage

  Nothing arrives. The UI shows the values written in the HTML.

• The UI calls back with fetch to https://your-resource/...

  The request fails and the console shows an error.

• GetParentResourceName()

  Does not exist. The console shows an error.

• Buttons trigger actions in the game

  Clicks run your JavaScript, but nothing reaches Lua.

• Images, sounds and videos in img, audio and video tags

  Shown when the file is in the project. Files over 2 MB are left out.

• Images from CSS url(...) or set by JavaScript with a relative path

  Not shown. The preview only resolves the tags in the HTML.

• Links to the internet (CDNs, web fonts)

  Loaded from the internet as usual.

• localStorage and cookies

  Blocked, because the preview runs in a closed-off frame for safety.

Errors from the first three rows are expected in the preview. They do not mean the script is broken in game.

Seeing realistic values

Because no game data arrives, the AI Script Generator preview shows whatever the HTML contains before the first update. For a HUD that is often a zero or a placeholder, like $0 and Unemployed in the example.

To judge a design with real-looking data, ask for sample values in chat, for example:

• "Put realistic sample values into the HTML: job Police, grade Sergeant, pay 850 and shift earnings 1,240."
• "Fill the shop menu with five example items with names, prices and icons."

The values then show in the preview straight away. In game, a UI that fills its fields from Lua replaces them with the real data as soon as the first message arrives.