Use code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchaseUse code 'LAUNCH10' — 10% OFF on your first purchase

Custom App Development Guide

5M Phone features a sandboxed, modular application framework that allows developers to create and deploy completely custom third-party applications without modifying core phone files or compromising FiveM Asset Escrow.

Custom apps run inside an isolated iframe container within the phone screen, enjoying hardware-accelerated 60+ FPS performance, native dark/light theme switching, and seamless two-way communication between FiveM Lua scripts and modern web frontends (React, Vue, Svelte, or vanilla HTML/JS).

🚀 Official Starter Template

We provide an official, production-ready developer template built with React 18, TypeScript, Vite, and Tailwind CSS. It includes built-in phone bridge bindings, local browser testing, and sample scripts:

📦 5M_CustomApp — Developer Template

Clone or download the official template repository directly from GitHub to build custom apps in minutes.

⬇️ Download Template (.ZIP) ⭐ GitHub Repository (itzsurajig/5M_CustomApp)

[!TIP] Quick Access Links:

Why Build Custom Apps on 5M Phone?

  1. Escrow-Safe & 100% Open: Custom apps live in their own standalone FiveM resource (e.g. 5M_CustomApp). You never need to touch the protected core of 5M_Phone.
  2. App Store or Pre-Installed: Configure your app to either be pre-installed on the home screen (defaultApp = true) or listed in the 5M Phone App Store (defaultApp = false) where players can view screenshots, ratings, and tap "Get".
  3. Local Browser Development: Iterate rapidly in Google Chrome at http://localhost:5173/ using Vite with mock player data — no need to restart FiveM during UI design.
  4. Real-Time Two-Way Bridge:
    • Push live game state (GPS coords, player health, vehicle status, job data) from Lua to React via exports['5M_Phone']:SendAppMessage.
    • Trigger NUI callbacks from React to Lua via appFetch.
    • Smooth gesture navigation: Return to the home screen or lock the phone seamlessly.
  5. Dynamic Theming: Automatically inherits the player's system dark mode or light mode setting with real-time updates.

4-Step Quick Start

Shell
# 1. Clone or download the template into your FiveM resources folder
git clone https://github.com/itzsurajig/5M_CustomApp.git

# 2. Install dependencies & build production UI
cd 5M_CustomApp/ui
npm install
npm run build
  1. Add startup order to your server.cfg:
Config
ensure 5M_Phone
ensure 5M_CustomApp
  1. Join your server and open 5M Phone — your custom app will appear on the home screen or in the App Store!

Custom App Topics

  • Template & Download — Project structure, files, and requirements.
  • App Registration & Lifecycle — RegisterApp export, metadata, and auto-reconnect.
  • UI Development & Web Preview — React, Tailwind, Vite HMR, and browser testing.
  • Bridge & NUI Communication — Two-way event messaging, callbacks, and close requests.
  • App Store & Screenshots — Publishing downloadable apps with screenshots and icon branding.