├── fxmanifest.lua
├── client.lua
├── README.md
└── html
├── index.html
├── css
└── style.css
└── js
└── script.js
/fxmanifest.lua:
--------------------------------------------------------------------------------
1 | fx_version 'cerulean'
2 | games {"rdr3", "gta5"}
3 | rdr3_warning 'I acknowledge that this is a prerelease build of RedM, and I am aware my resources *will* become incompatible once RedM ships.'
4 |
5 | lua54 'yes'
6 |
7 | author 'Blaze Scripts'
8 | description 'Interactive Lua table viewer for debugging with advanced search and JSON parsing'
9 | version '1.0.0'
10 |
11 | client_scripts {
12 | 'client.lua',
13 | }
14 |
15 | ui_page 'html/index.html'
16 |
17 | files {
18 | 'html/index.html',
19 | 'html/css/style.css',
20 | 'html/js/script.js',
21 | }
--------------------------------------------------------------------------------
/client.lua:
--------------------------------------------------------------------------------
1 | local isTableViewerOpen = false
2 | local currentTableData = nil
3 | local resourceVersion = GetResourceMetadata(GetCurrentResourceName(), 'version', 0) or '1.0.0'
4 |
5 | ---@param table any The table to be viewed
6 | ---@param title string Optional title for the table view
7 | ---@return boolean Success status
8 | local function viewTable(table, title)
9 | if type(table) ~= "table" then
10 | print("bs-tableviewer: Input is not a table")
11 | return false
12 | end
13 |
14 | local success, result = pcall(function()
15 | return json.encode(table)
16 | end)
17 |
18 | if not success then
19 | print("bs-tableviewer: Failed to encode table to JSON")
20 | return false
21 | end
22 |
23 | currentTableData = result
24 | isTableViewerOpen = true
25 |
26 | SendNUIMessage({
27 | action = 'openTableViewer',
28 | data = result,
29 | title = title,
30 | version = resourceVersion
31 | })
32 |
33 | SetNuiFocus(true, true)
34 | return true
35 | end
36 |
37 | RegisterNUICallback('closeTableViewer', function(_, cb)
38 | isTableViewerOpen = false
39 | SetNuiFocus(false, false)
40 | currentTableData = nil
41 | cb('ok')
42 | end)
43 |
44 | exports('debugTable', viewTable)
45 |
46 | RegisterCommand('testviewer', function()
47 | local testTable = {
48 | name = "Test Table",
49 | nested = {
50 | value = 123,
51 | array = {1, 2, 3, 4, 5},
52 | deep = {
53 | deeper = {
54 | deepest = "Hello World"
55 | }
56 | }
57 | },
58 | array = {"a", "b", "c"},
59 | boolean = true,
60 | number = 42
61 | }
62 |
63 | viewTable(testTable, "Test Table Viewer")
64 | end, false)
65 |
66 | RegisterNetEvent('debugTable')
67 | AddEventHandler('debugTable', function(tableData, title)
68 | viewTable(tableData, title)
69 | end)
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Interactive Lua Table Debugger for FiveM/RedM
2 |
3 | A powerful Lua table visualization tool for FiveM / RedM development. With just a short event you can debug your table - easy and plug-and-play. This Dev Tool provides a clean, interactive interface for viewing complex nested Lua tables, making debugging and development significantly easier.
4 |
5 | ## ✨ Features
6 |
7 | - 🔌 **Standalone**: Plug-and-play for FiveM and RedM development with no dependencies
8 | - 🧩 **Lightweight Design**: Lightweight and easy to use, fits your individual development workflow
9 | - 🍑 **Simple Integration**: Easy to use from any client or server script
10 | - 🔄 **Dual View Mode**: Toggle between structured tree view and raw JSON view
11 | - 🧠 **Smart JSON Parsing**: Automatically detects and parses nested JSON strings
12 | - 🔎 **Advanced Search**: Search in both tree and JSON views with scrollbar markers for easy navigation
13 | - 💯 **Interactive Table Exploration**: Expand/collapse nested tables with ease
14 | - 📋 **Copy Options**: Copy full JSON, specific paths, or individual values via context menu
15 | - ⌨️ **Keyboard Shortcuts**: Quickly navigate and control the viewer
16 |
17 | ## 📝 Preview
18 |
19 | 
20 | 
21 | 
22 |
23 |
24 | ## 🔧 Installation
25 |
26 | 1. Place the `bs-tableviewer` folder in your server's resources directory
27 | 2. Add `ensure bs-tableviewer` to your server.cfg
28 | 3. Restart your server or start the resource manually
29 |
30 | ## 📦 Exports / API
31 |
32 | ### From Client Scripts
33 |
34 | ```lua
35 | -- Using event
36 | TriggerEvent('debugTable', myTable)
37 |
38 | -- Using export (recommended)
39 | exports['bs-tableviewer']:debugTable(myTable)
40 |
41 | -- With custom title
42 | exports['bs-tableviewer']:debugTable(myTable, "My Custom Title") -- optional title
43 | ```
44 |
45 | ### From Server Scripts
46 |
47 | ```lua
48 | -- Send table to specific player
49 | TriggerClientEvent('debugTable', source, myTable)
50 |
51 | -- Example with player data serverside
52 | local Player = exports.qbx_core:GetPlayer(source)
53 | TriggerClientEvent('debugTable', source, Player.PlayerData, "Player Data") -- optional title
54 | ```
55 |
56 | ### Test Commands
57 |
58 | - `/testviewer` - Shows a test table for demonstration purposes
59 |
60 | ## ⌨️ Keyboard Shortcuts
61 |
62 | | Shortcut | Action |
63 | |----------|--------|
64 | | `Esc` | Close the viewer |
65 | | `Ctrl+F` | Focus search box |
66 | | `Ctrl+J` | Toggle between tree and JSON views |
67 |
68 | ## 🔥 Advanced Features
69 |
70 | ### JSON String Parsing
71 |
72 | The table viewer automatically detects and parses JSON strings within your data, making it easier to navigate complex nested structures. Parsed JSON strings are marked with a "parsed" badge in the tree view.
73 |
74 | ### Search with Scrollbar Markers
75 |
76 | When searching in JSON view, markers appear on the scrollbar showing the positions of all matches, allowing you to quickly navigate between search results by clicking on the markers.
77 |
78 | ### Context Menu
79 |
80 | Right-click on any item to access additional options:
81 | - **Copy Path**: Copies the Lua-compatible path to the item
82 | - **Copy Value**: Copies the value of the item
83 |
84 | ## 🧰 Dependencies
85 |
86 | This resource is completely standalone with no external dependencies, making it extremely lightweight and easy to integrate into any server.
87 |
88 | ## 🤝 Support
89 | For support, join our Discord server: https://discord.gg/xUcj2R4ZX4
90 | > At Blaze Scripts, we’re here to make your life easier - so if you ever run into a hiccup with one of our resources, just reach out and we’ll jump in to help. We strive to support all major frameworks, but on the rare occasion you’re using something outside our usual expertise, we might not be able to provide direct assistance. Either way, we’ll always point you toward resources or guidance to keep your project moving forward.
91 |
92 | ## 🔗 Links
93 |
94 | - 🧾 GitHub: [Blaze Scripts](https://github.com/Blaze-Scripts/)
95 | - 💬 Discord: [Join our Discord](https://discord.gg/xUcj2R4ZX4)
96 | - 👀 More Free Scripts: [Blaze Scripts](https://github.com/Blaze-Scripts/)
97 |
98 | ## License
99 |
100 | This resource is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Blaze Scripts Table Viewer
7 | ${match} `;
139 | });
140 | } catch (error) {
141 | console.error('Error highlighting JSON search:', error);
142 | return this.formattedJson;
143 | }
144 | }
145 | },
146 | methods: {
147 | parseData(data, parentPath = '', originalData = null) {
148 | const result = {
149 | key: parentPath === '' ? 'root' : parentPath.split('.').pop(),
150 | type: 'table',
151 | path: parentPath === '' ? 'root' : parentPath,
152 | children: [],
153 | originalData: originalData
154 | };
155 |
156 | try {
157 | if (Array.isArray(data)) {
158 | for (let i = 0; i < data.length; i++) {
159 | const luaIndex = i + 1;
160 | const childPath = parentPath === '' ? `root[${luaIndex}]` : `${parentPath}[${luaIndex}]`;
161 | const value = data[i];
162 |
163 | if (typeof value === 'string' && value.length > 2) {
164 | try {
165 | if ((value.trim().startsWith('{') && value.trim().endsWith('}')) ||
166 | (value.trim().startsWith('[') && value.trim().endsWith(']'))) {
167 | const parsedJson = JSON.parse(value);
168 |
169 | if (typeof parsedJson === 'object' && parsedJson !== null) {
170 | const nestedResult = this.parseData(parsedJson, childPath, value);
171 | nestedResult.wasJsonString = true;
172 | nestedResult.originalString = value;
173 | result.children.push(nestedResult);
174 | continue;
175 | }
176 | }
177 | } catch (e) {
178 | console.log('Failed to parse potential JSON string:', e);
179 | }
180 | }
181 |
182 | if (typeof value === 'object' && value !== null) {
183 | result.children.push(this.parseData(value, childPath));
184 | } else {
185 | result.children.push({
186 | key: i,
187 | type: value === null ? 'nil' : typeof value,
188 | value: value === null ? 'nil' : value,
189 | path: childPath
190 | });
191 | }
192 | }
193 | } else {
194 | for (const key in data) {
195 | if (!data.hasOwnProperty(key)) continue;
196 |
197 | const childPath = parentPath === '' ? `root.${key}` : `${parentPath}.${key}`;
198 | const value = data[key];
199 |
200 | if (typeof value === 'string' && value.length > 2) {
201 | try {
202 | if ((value.trim().startsWith('{') && value.trim().endsWith('}')) ||
203 | (value.trim().startsWith('[') && value.trim().endsWith(']'))) {
204 | const parsedJson = JSON.parse(value);
205 |
206 | if (typeof parsedJson === 'object' && parsedJson !== null) {
207 | const nestedResult = this.parseData(parsedJson, childPath, value);
208 | nestedResult.key = key;
209 | nestedResult.wasJsonString = true;
210 | nestedResult.originalString = value;
211 | result.children.push(nestedResult);
212 | continue;
213 | }
214 | }
215 | } catch (e) {
216 | console.log('Failed to parse potential JSON string:', e);
217 | }
218 | }
219 |
220 | if (typeof value === 'object' && value !== null) {
221 | result.children.push(this.parseData(value, childPath));
222 | } else {
223 | result.children.push({
224 | key: key,
225 | type: value === null ? 'nil' : typeof value,
226 | value: value === null ? 'nil' : value,
227 | path: childPath
228 | });
229 | }
230 | }
231 | }
232 | } catch (error) {
233 | console.error('Error parsing data:', error);
234 | }
235 |
236 | return result;
237 | },
238 |
239 | openTableViewer(data, title) {
240 | try {
241 | this.showJsonView = false;
242 | this.formattedJson = '';
243 |
244 | if (typeof data === 'string') {
245 | try {
246 | this.rawData = JSON.parse(data);
247 | } catch (jsonError) {
248 | console.error('Failed to parse JSON:', jsonError);
249 | this.rawData = { error: 'Invalid JSON data' };
250 | }
251 | } else {
252 | this.rawData = data || {};
253 | }
254 |
255 | try {
256 | this.formattedJson = JSON.stringify(this.rawData, null, 2);
257 | } catch (jsonError) {
258 | console.error('Error formatting JSON:', jsonError);
259 | this.formattedJson = 'Error formatting JSON';
260 | }
261 |
262 | const parsedResult = this.parseData(this.rawData);
263 | if (parsedResult) {
264 | this.parsedData = parsedResult;
265 | }
266 |
267 | this.title = title || 'Blaze Scripts: Table Viewer';
268 | this.visible = true;
269 | this.expandedState = { 'root': true };
270 | } catch (error) {
271 | console.error('Error opening table viewer:', error);
272 | this.parsedData = {
273 | key: 'root',
274 | type: 'table',
275 | path: 'root',
276 | children: [{
277 | key: 'error',
278 | type: 'string',
279 | value: 'Failed to parse data: ' + error.message,
280 | path: 'root.error'
281 | }]
282 | };
283 | }
284 | },
285 |
286 | reconstructWithOriginalStrings(node) {
287 | if (!node) return null;
288 |
289 | if (node.wasJsonString && node.originalString) {
290 | return node.originalString;
291 | }
292 |
293 | if (node.type === 'table' && node.children && node.children.length > 0) {
294 | const isArray = node.children.every(child => !isNaN(parseInt(child.key)));
295 |
296 | let result = isArray ? [] : {};
297 |
298 | for (const child of node.children) {
299 | const value = this.reconstructWithOriginalStrings(child);
300 | if (isArray) {
301 | result.push(value);
302 | } else {
303 | result[child.key] = value;
304 | }
305 | }
306 |
307 | return result;
308 | }
309 |
310 | return node.value;
311 | },
312 |
313 | processJsonStringsForView(data) {
314 | if (typeof data !== 'object' || data === null) return data;
315 |
316 | const result = Array.isArray(data) ? [] : {};
317 |
318 | for (const key in data) {
319 | if (!data.hasOwnProperty(key)) continue;
320 |
321 | const value = data[key];
322 |
323 | if (typeof value === 'string' && value.length > 2) {
324 | try {
325 | if ((value.trim().startsWith('{') && value.trim().endsWith('}')) ||
326 | (value.trim().startsWith('[') && value.trim().endsWith(']'))) {
327 | const parsedJson = JSON.parse(value);
328 | result[key] = parsedJson;
329 | continue;
330 | }
331 | } catch (e) {
332 | console.log('Failed to parse potential JSON string:', e);
333 | }
334 | }
335 |
336 | if (typeof value === 'object' && value !== null) {
337 | result[key] = this.processJsonStringsForView(value);
338 | } else {
339 | result[key] = value;
340 | }
341 | }
342 |
343 | return result;
344 | },
345 |
346 | toggleView() {
347 | this.showJsonView = !this.showJsonView;
348 |
349 | if (this.showJsonView) {
350 | try {
351 | const processedData = this.processJsonStringsForView(this.rawData);
352 |
353 | this.formattedJson = JSON.stringify(processedData, null, 2);
354 | } catch (error) {
355 | console.error('Error formatting JSON:', error);
356 | this.formattedJson = 'Error formatting JSON';
357 | }
358 | }
359 | },
360 |
361 | close() {
362 | this.visible = false;
363 | this.showJsonView = false;
364 | this.rawData = null;
365 | this.parsedData = null;
366 | this.searchQuery = '';
367 | this.expandedState = {};
368 |
369 | fetch('https://bs-tableviewer/closeTableViewer', {
370 | method: 'POST',
371 | headers: {
372 | 'Content-Type': 'application/json; charset=UTF-8',
373 | },
374 | body: JSON.stringify({})
375 | });
376 | },
377 |
378 | expandAll() {
379 | const expandAll = (node, state) => {
380 | if (node.type === 'table' && node.children) {
381 | state[node.path] = true;
382 |
383 | for (const child of node.children) {
384 | expandAll(child, state);
385 | }
386 | }
387 | };
388 |
389 | const newState = {};
390 | expandAll(this.parsedData, newState);
391 | this.expandedState = newState;
392 | },
393 |
394 | collapseAll() {
395 | this.expandedState = { 'root': true };
396 | },
397 |
398 | showContextMenu(x, y, path, value) {
399 | this.contextMenuStyle = {
400 | top: `${y}px`,
401 | left: `${x}px`
402 | };
403 |
404 | this.contextMenuPath = path;
405 | this.contextMenuValue = value;
406 | this.contextMenuVisible = true;
407 |
408 | setTimeout(() => {
409 | if (!this._boundHideContextMenu) {
410 | this._boundHideContextMenu = this.hideContextMenu.bind(this);
411 | }
412 | document.addEventListener('click', this._boundHideContextMenu);
413 | }, 100);
414 | },
415 |
416 | hideContextMenu() {
417 | this.contextMenuVisible = false;
418 | if (this._boundHideContextMenu) {
419 | document.removeEventListener('click', this._boundHideContextMenu);
420 | }
421 | },
422 |
423 | copyPath() {
424 | if (!this.contextMenuPath) return;
425 |
426 | try {
427 | const tempInput = document.createElement('input');
428 | tempInput.value = this.contextMenuPath;
429 | document.body.appendChild(tempInput);
430 |
431 | tempInput.select();
432 | tempInput.setSelectionRange(0, 99999);
433 |
434 | document.execCommand('copy');
435 |
436 | document.body.removeChild(tempInput);
437 |
438 | this.showNotification(`Path copied: ${this.contextMenuPath}`);
439 | } catch (err) {
440 | console.error('Failed to copy path:', err);
441 | }
442 |
443 | this.hideContextMenu();
444 | },
445 |
446 | copyValue() {
447 | if (this.contextMenuValue === undefined) return;
448 |
449 | try {
450 | const valueStr = String(this.contextMenuValue);
451 | const tempInput = document.createElement('input');
452 | tempInput.value = valueStr;
453 | document.body.appendChild(tempInput);
454 | tempInput.select();
455 | tempInput.setSelectionRange(0, 99999);
456 | document.execCommand('copy');
457 | document.body.removeChild(tempInput);
458 | this.showNotification(`Value copied: ${valueStr}`);
459 | } catch (err) {
460 | console.error('Failed to copy value:', err);
461 | }
462 | this.hideContextMenu();
463 | },
464 |
465 | escapeRegExp(string) {
466 | return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
467 | },
468 |
469 | calculateSearchMarkers(matches) {
470 | if (!this.$refs.jsonContent || matches.length === 0) {
471 | this.searchMarkers = [];
472 | return;
473 | }
474 |
475 | const contentElement = this.$refs.jsonContent;
476 | const totalHeight = contentElement.scrollHeight;
477 |
478 | this.searchMarkers = matches.map((match, index) => {
479 | const range = document.createRange();
480 | const matchElements = contentElement.querySelectorAll('.search-highlight');
481 |
482 | if (index < matchElements.length) {
483 | const matchElement = matchElements[index];
484 | range.selectNodeContents(matchElement);
485 | const rect = range.getBoundingClientRect();
486 | const position = (rect.top - contentElement.getBoundingClientRect().top + contentElement.scrollTop) / totalHeight * 100;
487 |
488 | return {
489 | index: index,
490 | position: position,
491 | element: matchElement
492 | };
493 | }
494 |
495 | return null;
496 | }).filter(marker => marker !== null);
497 | },
498 |
499 | scrollToMatch(index) {
500 | if (!this.$refs.jsonContent) return;
501 |
502 | const matchElements = this.$refs.jsonContent.querySelectorAll('.search-highlight');
503 | if (index < matchElements.length) {
504 | const matchElement = matchElements[index];
505 | matchElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
506 |
507 | const originalBackground = matchElement.style.backgroundColor;
508 | matchElement.style.backgroundColor = 'rgba(234, 179, 8, 0.75)';
509 | setTimeout(() => {
510 | matchElement.style.backgroundColor = originalBackground;
511 | }, 1000);
512 | }
513 | },
514 |
515 | showNotification(message) {
516 | const notification = document.createElement('div');
517 | notification.textContent = message;
518 | notification.style.position = 'fixed';
519 | notification.style.bottom = '20px';
520 | notification.style.left = '50%';
521 | notification.style.transform = 'translateX(-50%)';
522 | notification.style.backgroundColor = 'rgba(16, 185, 129, 0.9)';
523 | notification.style.color = 'white';
524 | notification.style.padding = '10px 20px';
525 | notification.style.borderRadius = '4px';
526 | notification.style.zIndex = '1000';
527 |
528 | document.body.appendChild(notification);
529 |
530 | setTimeout(() => {
531 | document.body.removeChild(notification);
532 | }, 2000);
533 | },
534 |
535 | copyToClipboard() {
536 | try {
537 | const jsonString = JSON.stringify(this.rawData, null, 2);
538 |
539 | const tempTextarea = document.createElement('textarea');
540 | tempTextarea.value = jsonString;
541 | tempTextarea.style.position = 'fixed';
542 | tempTextarea.style.left = '-9999px';
543 | document.body.appendChild(tempTextarea);
544 |
545 | tempTextarea.select();
546 | tempTextarea.setSelectionRange(0, 99999999);
547 |
548 | document.execCommand('copy');
549 |
550 | document.body.removeChild(tempTextarea);
551 |
552 | this.showNotification('JSON copied to clipboard!');
553 | } catch (error) {
554 | console.error('Error copying to clipboard:', error);
555 | }
556 | },
557 |
558 | handleMessage(event) {
559 | const data = event.data;
560 |
561 | if (data.action === 'openTableViewer') {
562 | if (data.version) {
563 | this.version = 'v' + data.version;
564 | }
565 | this.openTableViewer(data.data, data.title);
566 | }
567 | },
568 |
569 | handleKeyDown(event) {
570 |
571 | if (!this.visible) return;
572 |
573 | if (event.key === 'Escape') {
574 | this.close();
575 | event.preventDefault();
576 | return;
577 | }
578 |
579 | if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
580 |
581 | if (this.$refs.searchInput) {
582 | this.$refs.searchInput.focus();
583 | event.preventDefault();
584 | }
585 | return;
586 | }
587 |
588 | if ((event.ctrlKey || event.metaKey) && event.key === 'j') {
589 | this.toggleView();
590 | event.preventDefault();
591 | return;
592 | }
593 | }
594 | },
595 | mounted() {
596 | window.addEventListener('message', this.handleMessage);
597 | document.addEventListener('keydown', this.handleKeyDown);
598 | },
599 |
600 | beforeUnmount() {
601 | window.removeEventListener('message', this.handleMessage);
602 | document.removeEventListener('keydown', this.handleKeyDown);
603 | }
604 | });
605 |
606 | app.component('tree-item', TreeItem);
607 | app.mount('#app');
--------------------------------------------------------------------------------