diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 0bcc30a5..da4da2f9 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -579,10 +579,10 @@
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
     import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
+    import { formatJsonVars, getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { AppDebug } from '../../../service/appConfig.js';
     import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
 
     const ChangeAvatarImageDialog = defineAsyncComponent(() => import('./ChangeAvatarImageDialog.vue'));
@@ -609,7 +609,7 @@
     const changeAvatarImageDialogVisible = ref(false);
     const previousImageUrl = ref('');
 
-    const treeData = ref([]);
+    const treeData = ref({});
     const timeSpent = ref(0);
     const memo = ref('');
     const setAvatarTagsDialog = ref({
@@ -703,7 +703,7 @@
     function handleDialogOpen() {
         setAvatarTagsDialog.value.visible = false;
         memo.value = '';
-        treeData.value = [];
+        treeData.value = {};
         getAvatarTimeSpent();
         getAvatarMemo();
     }
@@ -992,10 +992,7 @@
     }
 
     function refreshAvatarDialogTreeData() {
-        treeData.value = {
-            ...avatarDialog.value.ref,
-            _hexDisplayName: textToHex(avatarDialog.value.ref?.displayName)
-        };
+        treeData.value = formatJsonVars(avatarDialog.value.ref);
     }
 
     function showSetAvatarTagsDialog(avatarId) {
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 12dd5ffd..2a7e523b 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -1189,9 +1189,9 @@
         useLocationStore,
         useUserStore
     } from '../../../stores';
+    import { formatJsonVars, getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
     import { Badge } from '../../ui/badge';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { groupRequest } from '../../../api';
 
     import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
@@ -1825,8 +1825,7 @@
     function refreshGroupDialogTreeData() {
         const D = groupDialog.value;
         const treeData = {
-            _hexDisplayName: textToHex(D.ref.displayName),
-            group: D.ref,
+            group: formatJsonVars(D.ref),
             posts: D.posts,
             instances: D.instances,
             members: D.members,
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 34650fe8..22808423 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -809,9 +809,9 @@
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
     import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
+    import { formatJsonVars, getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database.js';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
 
     const NewInstanceDialog = defineAsyncComponent(() => import('../NewInstanceDialog.vue'));
     const PreviousInstancesWorldDialog = defineAsyncComponent(
@@ -835,7 +835,7 @@
     const { showFullscreenImageDialog } = useGalleryStore();
     const { t } = useI18n();
 
-    const treeData = ref([]);
+    const treeData = ref({});
     const worldAllowedDomainsDialog = ref({
         visible: false,
         worldId: '',
@@ -963,7 +963,7 @@
     }
 
     function handleDialogOpen() {
-        treeData.value = [];
+        treeData.value = {};
     }
 
     function showChangeWorldImageDialog() {
@@ -1305,10 +1305,7 @@
         nextTick(() => (D.openFlg = false));
     }
     function refreshWorldDialogTreeData() {
-        treeData.value = {
-            ...worldDialog.value.ref,
-            _hexDisplayName: textToHex(worldDialog.value.ref?.displayName)
-        };
+        treeData.value = formatJsonVars(worldDialog.value.ref);
     }
     function copyWorldId() {
         navigator.clipboard
diff --git a/src/shared/utils/base/ui.js b/src/shared/utils/base/ui.js
index 7bbdeff1..53229489 100644
--- a/src/shared/utils/base/ui.js
+++ b/src/shared/utils/base/ui.js
@@ -4,6 +4,7 @@ import { toast } from 'vue-sonner';
 import { THEME_CONFIG } from '../../constants';
 import { i18n } from '../../../plugin/i18n';
 import { router } from '../../../plugin/router';
+import { textToHex } from './string';
 import { useAppearanceSettingsStore } from '../../../stores';
 
 import configRepository from '../../../service/config.js';
@@ -175,8 +176,11 @@ function HSVtoRGB(h, s, v) {
     let g = 0;
     let b = 0;
     if (arguments.length === 1) {
+        // @ts-ignore
         s = h.s;
+        // @ts-ignore
         v = h.v;
+        // @ts-ignore
         h = h.h;
     }
     const i = Math.floor(h * 6);
@@ -223,12 +227,47 @@ function HSVtoRGB(h, s, v) {
     return `#${decColor.toString(16).substr(1)}`;
 }
 
+function formatJsonVars(ref) {
+    // remove all object keys that start with $
+    const newRef = { ...ref };
+    for (const key in newRef) {
+        if (key.startsWith('$')) {
+            delete newRef[key];
+        }
+    }
+    // sort keys alphabetically
+    const sortedKeys = Object.keys(newRef).sort();
+    const sortedRef = {};
+    sortedKeys.forEach((key) => {
+        sortedRef[key] = newRef[key];
+    });
+    if ('displayName' in sortedRef) {
+        // add _hexDisplayName to top
+        return {
+            // @ts-ignore
+            _hexDisplayName: textToHex(sortedRef.displayName),
+            ...sortedRef
+        };
+    }
+    if ('name' in sortedRef) {
+        // add _hexName to top
+        return {
+            // @ts-ignore
+            _hexName: textToHex(sortedRef.name),
+            ...sortedRef
+        };
+    }
+    return sortedRef;
+}
+
 function getNextDialogIndex() {
     let z = 2000;
     document.querySelectorAll('.el-overlay,.el-modal-dialog').forEach((v) => {
+        // @ts-ignore
         if (v.style.display === 'none') {
             return;
         }
+        // @ts-ignore
         const _z = Number(v.style.zIndex) || 0;
         if (_z > z) {
             z = _z;
@@ -300,6 +339,7 @@ export {
     refreshCustomScript,
     HueToHex,
     HSVtoRGB,
+    formatJsonVars,
     getNextDialogIndex,
     changeHtmlLangAttribute,
     setLoginContainerStyle,
diff --git a/src/stores/group.js b/src/stores/group.js
index 48c67994..cae28494 100644
--- a/src/stores/group.js
+++ b/src/stores/group.js
@@ -38,7 +38,7 @@ export const useGroupStore = defineStore('Group', () => {
         visible: false,
         loading: false,
         isGetGroupDialogGroupLoading: false,
-        treeData: [],
+        treeData: {},
         id: '',
         inGroup: false,
         ownerDisplayName: '',
@@ -131,7 +131,7 @@ export const useGroupStore = defineStore('Group', () => {
         D.id = groupId;
         D.inGroup = false;
         D.ownerDisplayName = '';
-        D.treeData = [];
+        D.treeData = {};
         D.announcement = {};
         D.posts = [];
         D.postsFiltered = [];
diff --git a/src/stores/user.js b/src/stores/user.js
index bac078ed..d1df43c8 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -18,8 +18,7 @@ import {
     isRealInstance,
     parseLocation,
     removeEmojis,
-    replaceBioSymbols,
-    textToHex
+    replaceBioSymbols
 } from '../shared/utils';
 import {
     avatarRequest,
@@ -30,6 +29,7 @@ import {
 import { processBulk, request } from '../service/request';
 import { AppDebug } from '../service/appConfig';
 import { database } from '../service/database';
+import { formatJsonVars } from '../shared/utils/base/ui';
 import { useAppearanceSettingsStore } from './settings/appearance';
 import { useAuthStore } from './auth';
 import { useAvatarStore } from './avatar';
@@ -229,7 +229,7 @@ export const useUserStore = defineStore('User', () => {
         },
         avatarSorting: 'update',
         avatarReleaseStatus: 'all',
-        treeData: [],
+        treeData: {},
         memo: '',
         $avatarInfo: {
             ownerId: '',
@@ -768,7 +768,7 @@ export const useUserStore = defineStore('User', () => {
         }
         const D = userDialog.value;
         D.id = userId;
-        D.treeData = [];
+        D.treeData = {};
         D.memo = '';
         D.note = '';
         getUserMemo(userId).then((memo) => {
@@ -1224,18 +1224,13 @@ export const useUserStore = defineStore('User', () => {
     function refreshUserDialogTreeData() {
         const D = userDialog.value;
         if (D.id === currentUser.value.id) {
-            const treeData = {
+            D.treeData = formatJsonVars({
                 ...currentUser.value,
-                ...D.ref,
-                _hexDisplayName: textToHex(D.ref?.displayName)
-            };
-            D.treeData = treeData;
+                ...D.ref
+            });
             return;
         }
-        D.treeData = {
-            ...D.ref,
-            _hexDisplayName: textToHex(D.ref?.displayName)
-        };
+        D.treeData = formatJsonVars(D.ref);
     }
 
     async function lookupUser(ref) {
diff --git a/src/stores/world.js b/src/stores/world.js
index 23826212..e2c05807 100644
--- a/src/stores/world.js
+++ b/src/stores/world.js
@@ -36,7 +36,7 @@ export const useWorldStore = defineStore('World', () => {
         avatarScalingDisabled: false,
         focusViewDisabled: false,
         rooms: [],
-        treeData: [],
+        treeData: {},
         bundleSizes: [],
         lastUpdated: '',
         inCache: false,
@@ -78,7 +78,7 @@ export const useWorldStore = defineStore('World', () => {
         L.shortName = shortName;
         D.id = L.worldId;
         D.$location = L;
-        D.treeData = [];
+        D.treeData = {};
         D.bundleSizes = [];
         D.lastUpdated = '';
         D.visible = true;