> For the complete documentation index, see [llms.txt](https://feron-scripts.gitbook.io/welcome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://feron-scripts.gitbook.io/welcome/scripts/loading-screen-creator.md).

# Feron Loading Screen Creator

Drag-and-drop loading screen editor for FiveM. Design your loading screen **in-game** with a visual editor, start from a ready-made template, and every connecting player sees it instantly — no rebuild, no file editing.

* **Resource name:** `feron_loadingScreenCreator`
* **Framework:** Standalone — works with any framework (QBCore, Qbox, ESX, custom)
* **Database:** None — designs are stored in `data.json` inside the resource

## Features

* **In-game visual editor** (`/screen-creator`) — drag, resize, layers, duplicate, undo / redo, zoom, grid and live preview
* **13 ready-made screen templates** — Halloween, Modern, Modern Light, Modern Dark, Modern Dashboard, Cinematic Noir, Minimal Clean, Minimal Cinematic, Cyberpunk Neon, Cyberpunk HUD, RP City, Roleplay Classic, Clean Roleplay (filter by Dark · Neon · Roleplay · Seasonal · Minimal)
* **38 components** in categories:
  * **Basics** — progress bar, circular progress, text, image, social links, data list, custom HTML
  * **Essentials** — action button, flex container, live widget, media carousel, rich text block
  * **Interactive** — nav bar, tabbed panel, minimal tabbed panel, toggle toolbar, modal overlay, keyboard shortcuts
  * **Music players** — box, compact, glass, horizontal bar, minimal, neon, YouTube
  * **Info cards** — server rules, staff showcase, changelog
  * **Widgets** — countdown timer, Discord server card, loading bar, server stats
  * **Announcements** — classic list, neon list
  * **Decorative & effects** — background slideshow, parallax image, decorative element, visual effect
* **Real loading progress** — progress bars follow FiveM's actual load progress
* **Interactive screens** — tabs / nav bars show and hide other components with visibility rules
* **Multiple screens** — create, save and switch the active loading screen from the editor
* **Shared Content Manager** — manage announcements, news, events, staff, players and music playlists once, use them in any component
* **Music** — audio file URLs or YouTube links, with track name, artist and album art
* **Two layouts** — 1920×1080 desktop and a 1280×720 compact breakpoint (auto-scaled, adjustable)
* **Per-component styling** — custom fonts (`fontUrl`), animations, style overrides and custom CSS
* **Local media** — drop images / videos into `images/` and pick them in the editor
* **Clickable social links** and action buttons on the loading screen
* **Fast under load** — design data is delivered with FiveM's connection handover, no HTTP requests from the loading screen (tested up to 2,000 simulated connections)
* ACE-permission protected editor

## Installation

### 1. Drop the resource

Copy `feron_loadingScreenCreator/` into your `resources/` folder.

{% hint style="warning" %}
**Only one loading screen can be active.** Remove or stop any other resource that declares a `loadscreen` in its `fxmanifest.lua`.
{% endhint %}

### 2. `server.cfg`

```cfg
ensure feron_loadingScreenCreator

# Who can open the editor (required — without this line nobody can)
add_ace group.admin loadingcreator.manage allow
```

To restrict it further, grant it only to the groups you want:

```cfg
add_ace group.owner loadingcreator.manage allow
```

The `/screen-creator` command itself is also restricted, so the group needs `command` access too. Default `server.cfg` / txAdmin setups already give `group.admin` `command allow`.

### 3. Restart & design

1. Restart the server and join
2. Type `/screen-creator` — the editor opens
3. Pick a template or start from scratch, edit, and **Save**
4. Set the screen as **active** — new connections see it right away
5. Run `/screen-creator` again (or use the close button) to leave the editor

## Updating

When updating, replace the files that changed (usually `server/`, `client/`, `ui-dist/` and `fxmanifest.lua`) and restart.

{% hint style="danger" %}
**Never overwrite `data.json`** — it holds all your screens and shared content. Back it up before every update.
{% endhint %}

## Commands

| Command                               | Who                     | Description                                                                        |
| ------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------- |
| `/screen-creator`                     | `loadingcreator.manage` | Opens / closes the editor                                                          |
| `loadingcreator_reset`                | Console                 | Resets the `default` screen to the built-in default                                |
| `loadingcreator_stresstest [players]` | Console                 | Simulates N concurrent connections (default 30) and prints payload size and timing |

## Exports

### Server

```lua
exports['feron_loadingScreenCreator']:getScreen(screenId)        -- screen table ('default' if nil)
exports['feron_loadingScreenCreator']:getAllScreens()            -- all screens
exports['feron_loadingScreenCreator']:saveScreen(screen)         -- store a screen table in memory (needs screen.id)
exports['feron_loadingScreenCreator']:getSharedContent(type)     -- 'announcement' | 'news' | 'event' | 'staff' | 'player' | 'music', nil = all
```

### Client

```lua
exports['feron_loadingScreenCreator']:getCurrentDesign()
exports['feron_loadingScreenCreator']:updateProgress(componentId, progress)  -- 0-100
exports['feron_loadingScreenCreator']:updateText(componentId, text)
```

## How the loading screen closes

The resource uses `loadscreen_manual_shutdown`. The loading screen is closed on `onClientMapStart`, with `playerSpawned` as a fallback for multicharacter scripts that don't fire map start. If your loading screen stays open, make sure your spawn / multicharacter script triggers one of these.

## Troubleshooting

* **Editor doesn't open** — check the `add_ace ... loadingcreator.manage allow` line; unauthorized attempts are printed in the server console as `[LoadingCreator] Unauthorized ...`
* **Old screen still showing** — make sure the new screen is set as active in the editor
* **Slow connections with a huge design** — run `loadingcreator_stresstest 100` and keep images as URLs / small files; keep the component count reasonable
* **Debug logging** — `setr feron_loadingScreenCreator-debugMode 1` in `server.cfg` (client-side debug prints)

***

For file layout, data format and settings, see [Config](/welcome/scripts/loading-screen-creator/config.md).