ENGINE v2.0 LIVE

Visual UI Design.
Native Lua Export.

The ultimate NUI Builder for the FiveM scene. Bridge the gap between Figma aesthetics and React/Vanilla JS production code. Real-time DOM engine, zero boilerplate.

START BUILDING
npm run dev
HUD_Master.ui
2/Team
Sim: ON
DOM Tree
SpeedoContainer
RPM_Ring
Speed_Text
Background_Blur
@mrburrito
Right: 20px
{SPEED}
142
km/h
Style
Logic
Data
Layout & Grid
W224
H224
Snap Grid20px
SVG Masking PRO
Segments12
Gap Size4px
Pseudo-Class
::before {
content: "{PLAYER_NAME}";
position: absolute;
}

THE_BUILDING_BLOCKS

True DOM Manipulation.

FiveNUI doesn't use generic canvas drawing. Every element on your artboard is a live HTML node respecting the standard box model, instantly translatable to production code.

Smart Anchoring

Drag elements freely. The engine intelligently calculates right and bottom anchors automatically, ensuring perfect positioning on all resolutions.

Advanced Pseudo

Full control over ::before and ::after. The engine manages the content attribute and absolute positioning so you can style them visually.

Lists & Loops

Assign an Array (e.g. [{"item": "Water"}]) to any Div. The engine automatically loops and renders the element for every item. Perfect for Inventories.

Progress Masking

Slice progress bars into segments with custom gaps. The engine generates complex maskUnits="userSpaceOnUse" SVGs on the fly.

LIVE_SIMULATION

Don't just design.
Simulate logic.

FiveNUI's unique selling point. Define dynamic if/else conditions, triggers, and state changes directly in the workspace. Test your UI live before writing a single line of Lua.

  • Dynamic Conditions
    e.g. If {HP} < 30 ➔ Set Background to Red
  • Interaction Triggers
    Click, Hover, Keydown, Interval, or NUI Messages
  • Variable Chaining (Min/Max)
    Link multiple progress bars to a single {SPEED} variable with Min/Max ranges for complex HUD segments.
SIM: ACTIVE
ON_KEYDOWN
Key: "W"
MATH_ADD
{SPEED} + 5
VAL: 142
UI_UPDATE

REALTIME_CO_OP

Build as a Team.

Powered by Supabase WebSockets. Invite users via their @username. Open the same project and build simultaneously with zero lag and absolute precision.

60 FPS Live-Sync

Drag or resize an element, and coordinates broadcast as WebSockets payloads instantly. Renders on your colleague's screen before hitting the database.

LOCK-STYLE

Exclusive Element-Locking

Click an element to lock it. Teammates see a yellow border and your @username badge, preventing editing conflicts in real-time.

Identity & RLS Security

Claim your unique handle. Supabase Row Level Security (RLS) ensures assets and projects are strictly isolated to defined Team JSON arrays.

CODE_GENERATION

Production-Ready.

Stop writing boilerplate. Both exporters generate clean, formatted code alongside an automatic fxmanifest.lua and client.lua with dummy events.

Vanilla JS
FREE TIER
  • Generates indented HTML structure
  • Bundles native CSS with @imports & @keyframes
  • script.js with Native NUI Message Receivers
  • Auto-compiles the Live Logic Engine to JS
window.addEventListener('message', (e) => {
  if (e.data.action === 'showUI') {
    evaluateConditions(e.data);
  }
});
React + Vite
PREMIUM
  • Translates DOM tree directly to JSX
  • Scaffolds complete Vite & Tailwind Config
  • Maps Editor Variables to useState
  • Binds NUI messages to useEffect hooks
  • HTML/Tailwind Code Importer Support
export default functionApp() {
  const [hp, setHp] = useState(100);
  useNuiEvent('updateData', (data) => {
    setHp(data.hp);
  });
}

ACCESS

Choose your tier.

Managed securely via Whop. Discord OAuth included.

COMMUNITY
$0 / forever
Max 2 Projects
Max 3 UI files / Project
Vanilla HTML/JS Export
LocalStorage Fallback
START FREE
PRO ENGINEER
TBA / month
Unlimited Projects & Files
React + Vite Export Pipeline
Supabase Cloud Asset Uploads
HTML/Tailwind Importer