VelonLabs

Skip to content
velonlabs
.dev
EN
…

FiveM development. Step by step.

See your NUI before switching into the game.

FiveM interfaces often use HTML, CSS and JavaScript. NUI preview displays that interface in your browser, so you can review its appearance and supported interactions during development.

What you can do

A quick layout and interaction review complements your test server. Game logic and real server responses still need testing in FiveM.

Work on a NUI in chat
NUI · Live SimulationExample
CENTRAL GARAGE▱ Vehicles› Park vehicle› Close
HTML · CSS · JavaScript

Open the interface with its dependencies

Use the HTML file together with its styles, scripts and required assets. Missing images or incorrect paths often become obvious in a preview before they do in a code review. For a resource with several files, identify the NUI entry point.

Review appearance and supported interactions

Look at spacing, readability, menus and states. Supported interactions help you follow the intended flow. Check long vehicle names, empty lists and different amounts of content. Tell the AI exactly what should change, then compare the next version of the interface.

Keep browser preview and FiveM testing distinct

Preview runs in an isolated browser environment. It does not provide a complete FiveM client or prove that NUI callbacks, database operations and server events work. Test focus changes, keyboard input, messages between Lua and the UI, and permissions in game afterwards.

For your next task

Make a UI revision specific

A long vehicle name is clipped in the garage NUI. Adjust the cards so the name and status remain readable. Include a state with no vehicles. Preserve the existing callback names.

Check before moving on

  • Check the HTML entry point and asset paths
  • Review long text and empty states
  • Test mouse and keyboard interaction
  • Verify callbacks and focus in the real client

Scope and limitations

Not every FiveM or external browser interface is available in preview. A correctly displayed interface can still have integration problems in game. Complete the final checks on a test server.

Current plans and conditions →

Common questions

Is preview a FiveM server?

No. It shows web interfaces and supported interactions in an isolated browser environment.

Can I discuss NUI changes with the AI?

Yes. Describe the specific visual problem and provide the affected files. You can then compare the result in preview.

For your next step

01

Create FiveM scripts with AI

Plan and create FiveM Lua scripts with VelonLabs. ESX, QBCore, Qbox and Standalone: turn a specific request into editable source code.

See workflow and examples →02

Debug FiveM scripts

Upload FiveM resources and investigate Lua errors with context. VelonLabs helps analyse problems, revise code and compare script versions.

See workflow and examples →03

FiveM Config Editor for Lua, JSON, YAML, TOML & INI

Edit supported FiveM configurations visually and in source view. Review values, understand the structure and download changed files as ZIP.

See workflow and examples →05

FiveM Agent Mode

Structure larger FiveM tasks with VelonLabs Agent Mode. Connect your brief, plan, file changes and result review in one development workflow.

See workflow and examples →06

Project knowledge & notes for your FiveM workflow

Keep framework context, project instructions and notes in one place. Organise FiveM knowledge for recurring development tasks with VelonLabs.

See workflow and examples →07

GitHub integration for FiveM

Connect GitHub to VelonLabs.dev. Work on FiveM resources in Agent Mode, review file changes and deliberately sync them back to your repository.

See workflow and examples →08

FiveM teamwork

Build FiveM resources together. Invite members to VelonLabs.dev, share workspaces and repositories, and assign Viewer or Editor roles.

See workflow and examples →09

Connect your FiveM server

Connect your Linux or Windows FiveM server to VelonLabs.dev. Edit a workspace copy and sync reviewed files with backups and deployment rollback.

See workflow and examples →10

Create FiveM assets with AI and browser editors

Start with an AI chat prompt, then edit vehicles, clothes, characters, props and textures in the relevant VelonLabs editor.

See workflow and examples →11

FiveM Blueprints

Scripts from the VelonLabs Store come with a personal blueprint. In AI chat or Agent Mode it becomes a new script built to your project rules.

See workflow and examples →12

FiveM Workspace

In the VelonLabs Workspace you connect AI chats, agent tasks, notes, editor projects and blueprints on one board, edit files and work as a team.

See workflow and examples →13

VelonLabs Control

Bring scripts from AI chat and exports from the editors to your FiveM server over SSH, start resources and test in game without copying files by hand.

See workflow and examples →

Your project. Your next step.

Describe your idea or upload an existing resource. Continue working on the source code and test the result on your server.

Open AI chat →