NUI Command Panel Builder

Generate a starter NUI panel resource with commands, buttons, HTML, CSS, Lua, and ZIP export.

Auto-save enabled. Your work is saved in this browser so you can come back and continue anytime.

Panel Settings

Add Button

Generated client.lua














`}
function css(){return `body{margin:0;font-family:Arial;background:transparent;color:white} .hidden{display:none!important} #app{height:100vh;display:grid;place-items:center}.panel{width:420px;background:#070b12;border:1px solid rgba(56,189,248,.35);border-radius:24px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.55)}button{width:100%;margin:8px 0;padding:13px;border:0;border-radius:12px;background:#38bdf8;color:#06111f;font-weight:800}.close{background:#1f2937;color:white}`}
function appjs(){return `window.addEventListener('message', e => { const app=document.getElementById('app'); if(e.data.action==='open') app.classList.remove('hidden'); if(e.data.action==='close') app.classList.add('hidden'); });\nfunction post(name){ fetch('https://'+GetParentResourceName()+'/'+name,{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'}); }`}
function manifest(){return `fx_version 'cerulean'\ngame 'gta5'\nlua54 'yes'\n\nui_page 'html/index.html'\n\nfiles {\n    'html/index.html',\n    'html/style.css',\n    'html/app.js'\n}\n\nclient_script 'client.lua'\n`}
function render(){renderButtons();document.getElementById('output').textContent=clientLua()}
function exportNuiZip(){const rn=val('resourceName','atlas_nui_panel').replace(/[^a-zA-Z0-9_-]/g,'_');downloadZip(rn+'.zip',{[rn+'/fxmanifest.lua']:manifest(),[rn+'/client.lua']:clientLua(),[rn+'/html/index.html']:html(),[rn+'/html/style.css']:css(),[rn+'/html/app.js']:appjs(),[rn+'/README.md']:'# '+rn+'\n\nOpen command: /'+val('openCommand','atlaspanel')+'\n'});}

window.AtlasToolOverride={
  getData:()=>({buttons,resourceName:val('resourceName','atlas_nui_panel'),openCommand:val('openCommand','atlaspanel'),panelTitle:val('panelTitle','FiveM Atlas Panel'),btnLabel:val('btnLabel',''),btnEvent:val('btnEvent','')}),
  setData:(data)=>{if(!data)return;buttons=Array.isArray(data.buttons)?data.buttons:buttons;['resourceName','openCommand','panelTitle','btnLabel','btnEvent'].forEach(id=>{const e=document.getElementById(id);if(e&&data[id]!==undefined)e.value=data[id];});render();}
};
render();