Documentation

Code Visualizer

Map a FiveM resource into a draggable node graph of its events and exports.

Code Visualizer turns a FiveM resource into a node graph you can actually read. Upload a folder, ZIP, or loose Lua/JS/TS/manifest files and it parses every script in your browser to surface commands, events, triggers, exports, callbacks, threads, dependencies, and config — then draws them as draggable, zoomable blocks. It links each trigger to its registered handler by name and ties manifest directives to the files they load, so you can see how an unfamiliar resource is wired before touching a line.

All parsing, graph layout, ZIP unpacking, and editing happen in your browser. The only time anything leaves your machine is when you click Save workspace, which writes the source files and map layout to My Projects. Nothing about the tool spends tokens or credits.

Accepted files

.lua.js.ts.json.cfg.xml.meta.txt.zip

Workflow

1Load your code one of four ways: Upload files, Upload resource folder, Open a saved workspace, or Load demo script.
2The tool reads everything in-browser, unpacks any ZIP, runs the analyzer, and reports 'Mapped N nodes from M files' with header counts for Files, Commands, Events, Functions, and Exports.
3Read the graph in Visual map mode — click a node for its kind, label, line, and path; drag to reposition; pan the canvas; Ctrl+scroll or pinch to zoom.
4Filter with Search nodes (by kind, label, detail, path, or args) and toggle Hide unconnected to drop blocks with no edges.
5Click a node's pencil icon (or the Code editor tab) to open that file in the Monaco editor at the exact line, with FiveM Lua highlighting and live error markers.
6Click Save to map to re-parse your edits, or Export script to download the active file.
7Click Save workspace to persist the sources and layout to My Projects — you are prompted before leaving with unsaved edits.

What it detects

Manifest directives from fxmanifest.lua / __resource.lua, linked to the files they load
Commands registered with RegisterCommand (in Lua, the handler function must be on the same line)
Events and net events, plus the triggers that fire them — linked by exact name match
Exports and callbacks, including QBCore / ESX / ox_lib callback patterns
Threads (CreateThread / Citizen.CreateThread / setTick) and manifest dependencies
Config and data files (.json, .cfg, .xml, .meta), plus top-level JS/TS functions and arrow-function constants

Trigger-to-event links only resolve on string-literal names. The demo resource fires events through Config.* variables on purpose, so those won't link — swap a dynamic name for a literal if you want a node to connect.

Code Visualizer requires the Code Visualizer entitlement, included with the Server Developer plan and above. Analysis is regex- and line-based, not a full parser, so unusual formatting or multi-line declarations can be missed.

Code Visualizer is for reading and mapping a resource you already have. To scan that resource for performance, security, and manifest risks, use Code Smith, and when you are packaging a resource for release, PackBench handles the build.

Open Code Visualizer and start building

Frequently asked questions

How many tokens does it cost?

None. Parsing, graph layout, ZIP unpacking, the Monaco editor, syntax checking, and script export all run locally in your browser with no token or credit cost. The only server call the UI makes is saving a workspace to My Projects, which is also free.

What can I upload, and does it read a whole resource at once?

Upload loose files, a full resource folder, or a ZIP. It parses .lua, .js, .ts, .json, .cfg, .xml, .meta, and .txt; ZIPs are unpacked and filtered the same way. Anything else — images, models, audio — is skipped, so the graph only covers scriptable files.

Why aren't some of my events linking to their handlers?

Linking is an exact, case-insensitive match on the literal event name. Events triggered through a variable or config constant (like TriggerServerEvent(Config.SaveEvent)) cannot be resolved, so they will not connect. Also, a manifest named anything other than fxmanifest.lua or __resource.lua is parsed as ordinary Lua, not as a manifest.

Are the dashed 'next' arrows real call relationships?

No. When a file's visible nodes have no real links among them, the graph fabricates sequential 'next' edges chaining the first ~10 nodes in line order as layout filler. Treat the solid trigger-to-event and manifest-to-file links as the real wiring — the filler only appears when there are no real edges to draw.

Can I edit code here, and will my project change?

You can edit any file in the built-in Monaco (VS Code) editor with FiveM Lua highlighting and live error checking, then click Save to map to re-parse it or Export script to download it. Nothing touches your real resource files — edits stay in the tool until you export or click Save workspace, which writes the sources and layout to My Projects.

How is this different from Code Smith?

Code Visualizer maps a resource so you can see how it is wired — the events, commands, exports, and how they connect. Code Smith scans a resource for performance, security, and manifest risks and reports issues to fix. Use Code Visualizer to understand the structure, and Code Smith to harden it.

Discussion