diff --git a/src/csui/src/PlayerUIWindow.vue b/src/csui/src/PlayerUIWindow.vue
index a3a1e25..5ebe2ae 100644
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/src/csui/src/PlayerUIWindow.vue
@@ -169,10 +169,9 @@ export default {
         {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
         // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
-        // {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
         {id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
         {id: 'about', label: 'About', icon: 'information-outline'},
-        // {id: 'resetBackup', label: 'Reset and backup', icon: 'file-restore-outline'},
+        {id: 'debugging', label: 'Debugging', icon: 'bug-outline' },
       ],
       selectedTab: 'extensionSettings',
       BrowserDetect: BrowserDetect,
diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
index 1acc845..5f0f22a 100644
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -120,10 +120,10 @@
 
       </div>
       <div>
-        <JsonVanillaEditor
+        <JsonEditor
           v-model="settingsJson"
         >
-        </JsonVanillaEditor>
+        </JsonEditor>
       </div>
     </div>
   </div>
@@ -135,7 +135,7 @@ import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSett
 import Popup from '@csui/src/components/Popup';
 import ConfirmButton from '@csui/src/components/ConfirmButton';
 import UploadJsonFileButton from '@csui/src/components/UploadJsonFileButton';
-import JsonVanillaEditor from '@csui/src/components/JsonVanillaEditor';
+import JsonEditor from '@csui/src/components/JsonEditor';
 
 
 
@@ -164,7 +164,7 @@ export default {
     Popup,
     ConfirmButton,
     UploadJsonFileButton,
-    JsonVanillaEditor
+    JsonEditor
   },
   computed: {
     globalSettings() {
diff --git a/src/csui/src/PlayerUiPanels/DebugPanel.vue b/src/csui/src/PlayerUiPanels/DebugPanel.vue
index d7dbad4..2128601 100644
--- a/src/csui/src/PlayerUiPanels/DebugPanel.vue
+++ b/src/csui/src/PlayerUiPanels/DebugPanel.vue
@@ -6,20 +6,12 @@
 
       <div>Logger configuration:</div>
 
-      <template v-if="loggerPanel.pasteConfMode">
-
-      </template>
-      <template v-else>
-        <JsonObject
-          label="logger-settings"
-          :value="currentSettings"
-          :ignoreKeys="{'allowLogging': false}"
-          @change="updateSettingsUi"
-        ></JsonObject>
-      </template>
+      <JsonEditor
+        v-model="lastSettings"
+      ></JsonEditor>
 
       <div class="flex flex-row flex-end">
-        <div class="button" @click="restoreLoggerSettings()">
+        <div class="button" @click="getLoggerSettings()">
           Revert
         </div>
         <div class="button button-primary" @click="saveLoggerSettings()">
@@ -35,12 +27,12 @@
 </template>
 
 <script>
-import JsonObject from '../components/JsonEditor/JsonObject.vue'
 import Logger, { baseLoggingOptions } from '../../../ext/lib/Logger';
+import JsonEditor from '@csui/src/components/JsonEditor';
 
 export default {
   components: {
-    JsonObject
+    JsonEditor
   },
   data() {
     return {
@@ -92,30 +84,13 @@ export default {
   methods: {
     loadDefaultConfig() {
       this.lastSettings = baseLoggingOptions;
-      this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
-      this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
     },
     async getLoggerSettings() {
       this.lastSettings = await Logger.getConfig() || baseLoggingOptions;
-      this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
-      this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
-    },
-    updateSettingsUi(val) {
-      try {
-        this.parsedSettings = JSON.stringify(val, null, 2);
-        this.lastSettings = val;
-        this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
-      } catch (e) {
-
-      }
     },
     saveLoggerSettings() {
       Logger.saveConfig({...this.lastSettings});
     },
-    restoreLoggerSettings() {
-      this.getLoggerSettings();
-      this.confHasError = false;
-    },
     async startLogging(){
       this.logStringified = undefined;
       await Logger.saveConfig({...this.lastSettings, allowLogging: true});
diff --git a/src/csui/src/components/JsonEditor.vue b/src/csui/src/components/JsonEditor.vue
new file mode 100644
index 0000000..ab75e74
--- /dev/null
+++ b/src/csui/src/components/JsonEditor.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="flex flex-row w-full">
+    <button
+      v-if="editorMode === 'tree'"
+      @click="() => setEditorMode('text')"
+    >
+      Edit as text
+    </button>
+    <button
+      v-else
+      @click="() => setEditorMode('tree')"
+    >
+      Show as tree
+    </button>
+  </div>
+  <div ref="refContainer" class="w-full h-full"></div>
+</template>
+
+<script>
+import { createJSONEditor, Mode } from "vanilla-jsoneditor";
+
+export default {
+  props: {
+    modelValue: Object // v-model binding
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      refContainer: null,
+      editor: null,
+      editorMode: Mode.tree,
+    };
+  },
+  watch: {
+    modelValue: {
+      deep: true,
+      handler(newValue) {
+        if (this.editor) {
+          this.editor.updateProps({ content: { json: newValue || {} } });
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.$refs.refContainer) {
+      this.editor = createJSONEditor({
+        target: this.$refs.refContainer,
+        props: {
+          mode: Mode.tree,
+          content: { json: this.modelValue || {} },
+          onChange: (updatedContent) => {
+            this.$emit("update:modelValue", updatedContent.json);
+          },
+          onRenderContextMenu: false,
+          navigationBar: false,
+          statusBar: false,
+          mainMenuBar: false
+        }
+      });
+    }
+  },
+  methods: {
+    setEditorMode(mode) {
+      this.editorMode = mode
+      this.editor.updateProps({ mode });
+    }
+  },
+  beforeUnmount() {
+    if (this.editor) {
+      this.editor.destroy();
+      this.editor = null;
+    }
+  }
+};
+</script>
+<style lang="scss">
+:root {
+  --jse-panel-background: #111;
+  --jse-background-color: #000;
+  --jse-text-color: #ccc;
+  --jse-key-color: #8c8bef;
+  --jse-selection-background-color: rgba(255, 171, 102, 0.177);
+  --jse-context-menu-pointer-background: rgba(255, 171, 102, 0.177);
+  --jse-delimiter-color: #fa6;
+  --jse-value-color-boolean: rgb(132, 132, 137);
+}
+
+.jse-boolean-toggle[role="checkbox"] {
+  &[aria-checked="true"] {
+    color: rgb(218, 244, 238);
+  }
+
+  &[aria-checked="false"] {
+    border: 0px transparent;
+    outline: 0px transparent;
+    color: rgb(241, 107, 25);
+    background-color: rgb(241, 107, 25);
+
+    position: relative;
+
+    &:after {
+      position: absolute;
+
+      content: '×';
+
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      color: black;
+
+      text-align: center;
+      font-weight: bold;
+
+    }
+  }
+}
+
+</style>
diff --git a/src/csui/src/components/JsonEditor/JsonArray.vue b/src/csui/src/components/JsonEditor/JsonArray.vue
deleted file mode 100644
index 4835132..0000000
--- a/src/csui/src/components/JsonEditor/JsonArray.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="flex flex-col json-level-indent">
-    <div class="flex flex-row" @click="expanded_internal = !expanded_internal">
-      <div v-if="value_internal.key" class="item-key">
-        "{{value_internal.key}}" <b>:</b>
-        <span v-if="!expanded_internal"><b> [</b> ... <b>]</b>,</span>
-        <template v-else><b>[</b></template>
-      </div>
-    </div>
-    <div v-for="(row, key) of value_internal.value"
-         :key="key"
-    >
-      <JsonArray v-if="Array.isArray(row)"
-                  :value="row"
-                  :ignoreKeys="ignoreKeys"
-                  @change="changeItem(rowKey, $event)"
-      >
-      </JsonArray>
-      <JsonObject v-else-if="typeof row === 'object' && row !== null"
-                  :value="row"
-                  :label="rowKey"
-                  :ignoreKeys="ignoreKeys"
-                  @change="changeItem(rowKey, $event)"
-      >
-      </JsonObject>
-      <JsonElement v-else
-                  :value="row"
-                  :label="rowKey"
-                  @change="changeItem(rowKey, $event)"
-      >
-      </JsonElement>
-    </div>
-    <div v-if="expanded_internal"><b>],</b></div>
-  </div>
-</template>
-
-<script>
-import JsonObject from './JsonObject';
-import JsonElement from './JsonElement';
-
-export default {
-  name: 'JsonArray',
-  props: [
-    'value',
-    'expanded',
-    'ignoreKeys', // this prop is passthrough for JsonArray
-  ],
-  components: {
-    JsonObject,
-    JsonElement,
-  },
-  data() {
-    return {
-      value_internal: undefined,
-      expanded_internal: true,
-    }
-  },
-  created() {
-    this.value_internal = this.value;
-  },
-  watch: {
-    value: function(val) {
-      this.value_internal = val;
-    },
-    expanded: function(val) {
-      if (val !== undefined && val !== null) {
-        this.expanded_internal = !!val;
-      }
-    }
-  },
-  methods: {
-    changeItem(key, value) {
-      this.value_internal[key] = value;
-      this.$emit('change', this.value_internal);
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped src="./json.scss">
-</style>
-<style lang="scss" scoped src="../../../res/css/flex.scss">
-</style>
diff --git a/src/csui/src/components/JsonEditor/JsonElement.vue b/src/csui/src/components/JsonEditor/JsonElement.vue
deleted file mode 100644
index dfd38ec..0000000
--- a/src/csui/src/components/JsonEditor/JsonElement.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div class="flex flex-row json-level-indent">
-    <div>
-      <b>
-        <span v-if="label" class="item-key" 
-                           :class="{'item-key-boolean-false': typeof value_internal === 'boolean' && !value_internal}"
-        >
-          "{{label}}"
-        </span>
-        :&nbsp;
-      </b>
-    </div>
-    <div v-if="typeof value_internal === 'boolean'"
-         :class="{'json-value-boolean-true': value_internal, 'json-value-boolean-false': !value_internal}"
-         @click="toggleBoolean"
-    >
-      <template v-if="value_internal">true</template>
-      <template v-else>false</template>
-    </div>
-    <div v-else
-        class="flex flex-row inline-edit"
-        :class="{
-          'json-value-number': typeof value_internal === 'number',
-          'json-value-string': typeof value_internal === 'string'
-        }"
-    >
-      <template v-if="typeof value_internal === 'string'">
-        "<div ref="element-edit-area"
-              contenteditable="true"
-              @keydown.enter="changeValue"
-        >
-          {{value_internal}}
-        </div>"
-      </template>
-      <template v-else>
-        <div ref="element-edit-area"
-              contenteditable="true"
-              @keydown.enter="changeValue"
-        >
-          {{value_internal}}
-        </div>
-      </template>,
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'json-element',
-  props: [
-    'value',
-    'label',
-  ],
-  data() {
-    return {
-      value_internal: undefined,
-      editing: false,
-    }
-  },
-  created() {
-    this.value_internal = this.value;
-  },
-  watch: {
-    value: function(val) {
-      this.value_internal = val;
-    }
-  },
-  methods: {
-    toggleBoolean() {
-      this.value_internal = !this.value_internal;
-      this.$emit('change', this.value_internal);
-    },
-    changeValue() {
-      this.$refs['element-edit-area'].blur();
-      const newValue = this.$refs['element-edit-area'].textContent.replace(/\n/g, '');
-      if (isNaN(newValue)) {
-        this.value_internal = newValue;
-        this.$emit('change', newValue);
-      } else {
-        this.value_internal = +newValue;
-        this.$emit('change', +newValue);
-      }
-      this.editing = false;
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped src="./json.scss">
-</style>
diff --git a/src/csui/src/components/JsonEditor/JsonObject.vue b/src/csui/src/components/JsonEditor/JsonObject.vue
deleted file mode 100644
index a34771e..0000000
--- a/src/csui/src/components/JsonEditor/JsonObject.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div class="flex flex-col json-level-indent">
-    <div class="flex flex-row" @click="expanded_internal = !expanded_internal">
-      <div class="item-key-line">
-        <template v-if="label">
-          <b>
-            <span class="item-key">"{{label}}"</span>
-          :
-          </b>
-        </template>
-        <span v-if="!expanded_internal"><b> {</b> ... <b>}</b>,</span>
-        <template v-else><b>{</b></template>
-      </div>
-    </div>
-    <template v-if="expanded_internal">
-      <div v-for="(row, rowKey) of value_internal"
-          :key="rowKey"
-      >
-        <template v-if="(ignoreKeys || {})[rowKey] !== true">
-          <JsonArray v-if="Array.isArray(row)"
-                    :value="row"
-                    :ignoreKeys="(ignoreKeys || {})[rowKey]"
-                    @change="changeItem(rowKey, $event)"
-          >
-          </JsonArray>
-          <JsonObject v-else-if="typeof row === 'object' && row !== null"
-                      :value="row"
-                      :label="rowKey"
-                      :ignoreKeys="(ignoreKeys || {})[rowKey]"
-                      @change="changeItem(rowKey, $event)"
-          >
-          </JsonObject>
-          <JsonElement v-else
-                      :value="row"
-                      :label="rowKey"
-                      @change="changeItem(rowKey, $event)"
-          >
-          </JsonElement>
-        </template>
-      </div>
-      <div><b>},</b></div>
-    </template>
-  </div>
-</template>
-
-<script>
-import JsonArray from './JsonArray';
-import JsonElement from './JsonElement';
-
-export default {
-  name: 'JsonObject',
-  props: [
-    'value',
-    'label',
-    'expanded',
-    'ignoreKeys',
-  ],
-  components: {
-    JsonArray,
-    JsonElement,
-  },
-  data() {
-    return {
-      value_internal: undefined,
-      expanded_internal: true,
-    }
-  },
-  created() {
-    this.value_internal = this.value;
-  },
-  watch: {
-    value: function(val) {
-      this.value_internal = val;
-    },
-    expanded: function(val) {
-      if (val !== undefined && val !== null) {
-        this.expanded_internal = !!val;
-      }
-    }
-  },
-  methods: {
-    changeItem(key, value) {
-      this.value_internal[key] = value;
-      this.$emit('change', this.value_internal);
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped src="./json.scss">
-</style>
diff --git a/src/csui/src/components/JsonEditor/json.scss b/src/csui/src/components/JsonEditor/json.scss
deleted file mode 100644
index 216e47b..0000000
--- a/src/csui/src/components/JsonEditor/json.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.json-level-indent {
-  padding-left: 2em !important;
-  font-family: 'Overpass Mono', monospace;
-}
-.item-key {
-  color: rgb(255, 196, 148);
-}
-.item-key-boolean-false {
-  color: rgb(207, 149, 101)
-}
-
-.json-value-boolean-true {
-  color: rgb(150, 240, 198);
-}
-.json-value-boolean-false {
-  color: rgb(241, 21, 21);
-}
-.json-value-number {
-  color: rgb(121, 121, 238);
-}
-.json-value-string {
-  color:  rgb(226, 175, 7);
-}
diff --git a/src/csui/src/components/JsonVanillaEditor.vue b/src/csui/src/components/JsonVanillaEditor.vue
deleted file mode 100644
index fa38551..0000000
--- a/src/csui/src/components/JsonVanillaEditor.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div ref="refContainer" class="w-full h-full"></div>
-</template>
-
-<script>
-import { createJSONEditor } from "vanilla-jsoneditor";
-
-export default {
-  props: {
-    modelValue: Object // v-model binding
-  },
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      refContainer: null,
-      editor: null
-    };
-  },
-  watch: {
-    modelValue: {
-      deep: true,
-      handler(newValue) {
-        if (this.editor) {
-          this.editor.updateProps({ content: { json: newValue || {} } });
-        }
-      }
-    }
-  },
-  mounted() {
-    console.log('mounted:', this.refContainer, this.$refs.refContainer)
-    if (this.$refs.refContainer) {
-      this.editor = createJSONEditor({
-        target: this.$refs.refContainer,
-        props: {
-          content: { json: this.modelValue || {} },
-          onChange: (updatedContent) => {
-            this.$emit("update:modelValue", updatedContent.json);
-          }
-        }
-      });
-    }
-  },
-  beforeUnmount() {
-    if (this.editor) {
-      this.editor.destroy();
-      this.editor = null;
-    }
-  }
-};
-</script>
-<style>
-:root {
-  --jse-panel-background: #111;
-  --jse-background-color: #000;
-  --jse-text-color: #ccc;
-  --jse-key-color: #8c8bef;
-  --jse-selection-background-color: rgba(255, 171, 102, 0.177);
-  --jse-context-menu-pointer-background: rgba(255, 171, 102, 0.177);
-  --jse-delimiter-color: #fa6;
-
-}
-
-
-</style>