diff --git a/package-lock.json b/package-lock.json
index 0f7e0ef..9ecbb8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.24"
@@ -1376,6 +1375,109 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@codemirror/autocomplete": {
+      "version": "6.18.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz",
+      "integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@codemirror/commands": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.0.tgz",
+      "integrity": "sha512-q8VPEFaEP4ikSlt6ZxjB3zW72+7osfAYW9i8Zu943uqbKuz6utc1+F170hyLUCUltXORjQXRyYQNfkckzA/bPQ==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "@codemirror/lang-json": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
+      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "@codemirror/language": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.0.tgz",
+      "integrity": "sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "@codemirror/lint": {
+      "version": "6.8.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.5.tgz",
+      "integrity": "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/search": {
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.10.tgz",
+      "integrity": "sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/state": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
+      "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
+      "requires": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "@codemirror/view": {
+      "version": "6.36.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.36.5.tgz",
+      "integrity": "sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==",
+      "requires": {
+        "@codemirror/state": "^6.5.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg=="
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1455,6 +1557,57 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@jsep-plugin/assignment": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@jsep-plugin/assignment/-/assignment-1.3.0.tgz",
+      "integrity": "sha512-VVgV+CXrhbMI3aSusQyclHkenWSAm95WaiKrMxRFam3JSUiIaQjoMIw2sEs/OX4XifnqeQUN4DYbJjlA8EfktQ=="
+    },
+    "@jsep-plugin/regex": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@jsep-plugin/regex/-/regex-1.0.4.tgz",
+      "integrity": "sha512-q7qL4Mgjs1vByCaTnDFcBnV9HS7GVPJX5vyVoCgZHNSC9rjwIlmbXG5sUuorR5ndfHAIlJ8pVStxvjXHbNvtUg=="
+    },
+    "@jsonquerylang/jsonquery": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@jsonquerylang/jsonquery/-/jsonquery-4.1.1.tgz",
+      "integrity": "sha512-Rfyvq70Zrb561BqSuXLsl0rG0/1tz913EQDL/4zpkp+laFGUxXIVPSaJWcdREJwADXLZDkQyaWplzEaPQvh+7A=="
+    },
+    "@lezer/common": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+      "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA=="
+    },
+    "@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "requires": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
+    },
     "@mdi/font": {
       "version": "6.9.96",
       "resolved": "https://registry.npmjs.org/@mdi/font/-/font-6.9.96.tgz",
@@ -1582,12 +1735,27 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "dev": true
     },
+    "@replit/codemirror-indentation-markers": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.3.tgz",
+      "integrity": "sha512-hL5Sfvw3C1vgg7GolLe/uxX5T3tmgOA3ZzqlMv47zjU1ON51pzNWiVbS22oh6crYhtVhv8b3gdXwoYp++2ilHw=="
+    },
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
       "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
       "dev": true
     },
+    "@sphinxxxx/color-conversion": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz",
+      "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
+    },
+    "@sveltejs/acorn-typescript": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
+      "integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ=="
+    },
     "@types/accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.7.tgz",
@@ -1671,6 +1839,11 @@
         "es6-promise": "*"
       }
     },
+    "@types/estree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
+    },
     "@types/express": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
@@ -3032,6 +3205,11 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -3375,6 +3553,11 @@
       "integrity": "sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==",
       "dev": true
     },
+    "axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -4760,6 +4943,11 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "cmd-shim": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-3.0.3.tgz",
@@ -4785,6 +4973,11 @@
       "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
       "dev": true
     },
+    "codemirror-wrapped-line-indent": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/codemirror-wrapped-line-indent/-/codemirror-wrapped-line-indent-1.0.8.tgz",
+      "integrity": "sha512-5UwuHCz4oAZuvot1DbfFxSxJacTESdNGa/KpJD7HfpVpDAJdgB1vV9OG4b4pkJqPWuOfIpFLTQEKS85kTpV+XA=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -5366,6 +5559,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "cross-env": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
@@ -6015,6 +6213,11 @@
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
       "dev": true
     },
+    "diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q=="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -6366,12 +6569,25 @@
         "estraverse": "^4.1.1"
       }
     },
+    "esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="
+    },
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true
     },
+    "esrap": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.5.tgz",
+      "integrity": "sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==",
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
     "esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -6731,8 +6947,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -6754,6 +6969,11 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
+    "fast-uri": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
+      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw=="
+    },
     "fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -8115,6 +8335,11 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
+    "immutable-json-patch": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/immutable-json-patch/-/immutable-json-patch-6.0.1.tgz",
+      "integrity": "sha512-BHL/cXMjwFZlTOffiWNdY8ZTvNyYLrutCnWxrcKPHr5FqpAb6vsO6WWSPnVSys3+DruFN6lhHJJPHi8uELQL5g=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8618,6 +8843,14 @@
       "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
       "dev": true
     },
+    "is-reference": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "requires": {
+        "@types/estree": "^1.0.6"
+      }
+    },
     "is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -8770,6 +9003,11 @@
       "integrity": "sha512-fnjC0up+0SjEJtgmmG+teeel68kutkvzfctO/KxE3qJlbunkJYAshgH3boU++gSBHP8z5/r0ts0qRIrHf0RTQQ==",
       "dev": true
     },
+    "jmespath": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
+      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw=="
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -8865,6 +9103,11 @@
         }
       }
     },
+    "jsep": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsep/-/jsep-1.4.0.tgz",
+      "integrity": "sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw=="
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -8904,6 +9147,11 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
+    "json-source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/json-source-map/-/json-source-map-0.6.1.tgz",
+      "integrity": "sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg=="
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -8926,6 +9174,21 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "jsonpath-plus": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-10.3.0.tgz",
+      "integrity": "sha512-8TNmfeTCk2Le33A3vRRwtuworG/L5RrgMvdjhKZxvyShO+mBu2fP50OWUjRLNtvw344DdDarFh9buFAZs5ujeA==",
+      "requires": {
+        "@jsep-plugin/assignment": "^1.3.0",
+        "@jsep-plugin/regex": "^1.0.4",
+        "jsep": "^1.4.0"
+      }
+    },
+    "jsonrepair": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/jsonrepair/-/jsonrepair-3.12.0.tgz",
+      "integrity": "sha512-SWfjz8SuQ0wZjwsxtSJ3Zy8vvLg6aO/kxcp9TWNPGwJKgTZVfhNEQBMk/vPOpYCDFWRxD6QWuI6IHR1t615f0w=="
+    },
     "jsprim": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
@@ -9030,6 +9293,11 @@
         "json5": "^1.0.1"
       }
     },
+    "locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -9044,6 +9312,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -9263,6 +9536,11 @@
         "fs-monkey": "^1.0.4"
       }
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
@@ -9563,6 +9841,11 @@
         "to-regex": "^3.0.1"
       }
     },
+    "natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
+    },
     "ndjson": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/ndjson/-/ndjson-1.5.0.tgz",
@@ -13332,6 +13615,11 @@
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
     },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
+    },
     "require-main-filename": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
@@ -14398,6 +14686,11 @@
         "escape-string-regexp": "^1.0.2"
       }
     },
+    "style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+    },
     "subscriptions-transport-ws": {
       "version": "0.9.19",
       "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.19.tgz",
@@ -14424,6 +14717,47 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "svelte": {
+      "version": "5.25.3",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.25.3.tgz",
+      "integrity": "sha512-J9rcZ/xVJonAoESqVGHHZhrNdVbrCfkdB41BP6eiwHMoFShD9it3yZXApVYMHdGfCshBsZCKsajwJeBbS/M1zg==",
+      "requires": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@sveltejs/acorn-typescript": "^1.0.5",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "esm-env": "^1.2.1",
+        "esrap": "^1.4.3",
+        "is-reference": "^3.0.3",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+          "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+        },
+        "acorn": {
+          "version": "8.14.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+          "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg=="
+        },
+        "magic-string": {
+          "version": "0.30.17",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+          "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+          "requires": {
+            "@jridgewell/sourcemap-codec": "^1.5.0"
+          }
+        }
+      }
+    },
     "svgo": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
@@ -15475,6 +15809,65 @@
         "builtins": "^1.0.3"
       }
     },
+    "vanilla-jsoneditor": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-3.3.0.tgz",
+      "integrity": "sha512-HvCh0qaeQwB4HUW+G7SAKpMPy7jugnt697W9b4zJ4SkbKkjvX3Z1HEBuImtllT47IshR3HcPg8rHHA0Uq/e8Eg==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.18.1",
+        "@codemirror/commands": "^6.7.1",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/language": "^6.10.3",
+        "@codemirror/lint": "^6.8.2",
+        "@codemirror/search": "^6.5.6",
+        "@codemirror/state": "^6.4.1",
+        "@codemirror/view": "^6.34.1",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@jsonquerylang/jsonquery": "^3.1.1 || ^4.0.0",
+        "@lezer/highlight": "^1.2.1",
+        "@replit/codemirror-indentation-markers": "^6.5.3",
+        "ajv": "^8.17.1",
+        "codemirror-wrapped-line-indent": "^1.0.8",
+        "diff-sequences": "^29.6.3",
+        "immutable-json-patch": "^6.0.1",
+        "jmespath": "^0.16.0",
+        "json-source-map": "^0.6.1",
+        "jsonpath-plus": "^10.3.0",
+        "jsonrepair": "^3.0.0",
+        "lodash-es": "^4.17.21",
+        "memoize-one": "^6.0.0",
+        "natural-compare-lite": "^1.4.0",
+        "svelte": "^5.0.0",
+        "vanilla-picker": "^2.12.3"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.17.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+          "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.3",
+            "fast-uri": "^3.0.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        }
+      }
+    },
+    "vanilla-picker": {
+      "version": "2.12.3",
+      "resolved": "https://registry.npmjs.org/vanilla-picker/-/vanilla-picker-2.12.3.tgz",
+      "integrity": "sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==",
+      "requires": {
+        "@sphinxxxx/color-conversion": "^2.2.2"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -15951,6 +16344,11 @@
       "resolved": "https://registry.npmjs.org/vuex-webextensions/-/vuex-webextensions-1.3.3.tgz",
       "integrity": "sha512-Qz+KmF4CYLfomAIuEjY4A9DYqzwXZo18TkvTyO84DkW/s274iI2IyuOSFZoLcVHMS5BjUhRbyFclqqAwz58zgw=="
     },
+    "w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "watch": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/watch/-/watch-1.0.2.tgz",
@@ -16588,6 +16986,11 @@
         "zen-observable": "^0.8.0"
       }
     },
+    "zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
+    },
     "zip-stream": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-2.1.3.tgz",
diff --git a/package.json b/package.json
index 6bf5557..cd836f4 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "lodash": "^4.17.21",
     "mdi-vue": "^3.0.11",
     "typescript": "^4.4.4",
+    "vanilla-jsoneditor": "^3.3.0",
     "vue": "^3.2.21",
     "vue-style-loader": "^4.1.3",
     "vuex": "^4.0.2",
diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts
index 33472a6..a2fa3e5 100644
--- a/src/common/interfaces/SettingsInterface.ts
+++ b/src/common/interfaces/SettingsInterface.ts
@@ -231,6 +231,7 @@ interface SettingsInterface {
   pan?: any,
   version?: string,
   preventReload?: boolean,
+  lastModified?: Date,
 
   // -----------------------------------------
   //           ::: MITIGATIONS :::
diff --git a/src/csui/GlobalFrame.vue b/src/csui/GlobalFrame.vue
index 72de3da..a7193f2 100644
--- a/src/csui/GlobalFrame.vue
+++ b/src/csui/GlobalFrame.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="uw-clickthrough relative w-100 h-100">
+  <div class="uw-clickthrough relative w-full h-full">
     <template v-for="rectangle of drawnRectangles" :key="rectangle.id ?? rectangle">
 
       <!-- Player element overlays -->
diff --git a/src/csui/csui-global.js b/src/csui/csui-global.js
index e639126..9ea86eb 100644
--- a/src/csui/csui-global.js
+++ b/src/csui/csui-global.js
@@ -3,6 +3,8 @@ import GlobalFrame from './GlobalFrame';
 import mdiVue from 'mdi-vue/v3';
 import * as mdijs from '@mdi/js';
 
+import './src/res-common/common.scss';
+
 // NOTE — this is in-player interface for ultrawidify
 // it is injected into the page in UI.init()
 
diff --git a/src/csui/csui.js b/src/csui/csui.js
index 9d55824..098db7c 100644
--- a/src/csui/csui.js
+++ b/src/csui/csui.js
@@ -3,6 +3,8 @@ import PlayerOverlay from './PlayerOverlay';
 import mdiVue from 'mdi-vue/v3';
 import * as mdijs from '@mdi/js';
 
+import './src/res-common/common.scss';
+
 // NOTE — this is in-player interface for ultrawidify
 // it is injected into the page in UI.init()
 
diff --git a/src/csui/res/css/common.scss b/src/csui/res/css/common.scss
index 8e79f19..c003194 100644
--- a/src/csui/res/css/common.scss
+++ b/src/csui/res/css/common.scss
@@ -32,7 +32,7 @@ body {
 }
 
 /* STANDARD WIDTHS AND HEIGHTS */
-.w100 {
+.w100, .w-full {
   width: 100%;
 }
 
@@ -248,6 +248,7 @@ small {
   background-color: #410 !important;
 }
 
+button,
 .button {
   /*display: inline-block;*/
   // padding-top: 8px;
@@ -261,6 +262,27 @@ small {
   text-align: center;
   cursor: pointer;
   user-select: none;;
+
+  background-color: rgba(11,11,11,0.75);
+
+
+  padding: 0.5rem 2rem;
+  background-color: rgba(11, 11, 11, 0.5);
+  border: 1px solid transparent;
+  user-select: none !important;
+
+  &.primary {
+    background-color: #fa6;
+    color: #000;
+  }
+  &.danger {
+    background-color: #ff2211 !important;
+    color:#000;
+  }
+  &.disabled {
+    filter: saturate(0%);
+    pointer-events: none;
+  }
 }
 
 
diff --git a/src/csui/res/css/flex.scss b/src/csui/res/css/flex.scss
index b876bf0..7bea1f4 100644
--- a/src/csui/res/css/flex.scss
+++ b/src/csui/res/css/flex.scss
@@ -14,16 +14,16 @@
   flex: 1 1 auto;
 }
 
-.flex-grow {
+.flex-grow, .grow {
   flex-grow: 1;
 }
-.flex-nogrow {
+.flex-nogrow, .grow-0 {
   flex-grow: 0;
 }
-.flex-shrink {
+.flex-shrink, .shrink {
   flex-shrink: 1;
 }
-.flex-noshrink {
+.flex-noshrink, .shrink-0 {
   flex-shrink: 0;
 }
 
diff --git a/src/csui/src/PlayerUIWindow.vue b/src/csui/src/PlayerUIWindow.vue
index d44df6f..a3a1e25 100644
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/src/csui/src/PlayerUIWindow.vue
@@ -95,6 +95,7 @@
             :settings="settings"
             :siteSettings="siteSettings"
             :site="site"
+            :enableSettingsEditor="true"
           ></BaseExtensionSettings>
           <AutodetectionSettingsPanel
             v-if="selectedTab === 'autodetectionSettings'"
diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
index 0a836f3..729d61c 100644
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -1,75 +1,130 @@
 <template>
-  <div class="flex flex-col w-100">
+  <div class="flex flex-row w-full h-full">
+    <div class="flex flex-col">
 
-    <!-- TAB ROW -->
-    <div class="flex flex-row">
-      <div
-        class="tab"
-        :class="{'active': tab === 'siteSettings'}"
-        @click="setTab('siteSettings')"
-      >
-        Settings for current site<br/>
-        <small>{{ site }}</small>
+      <!-- TAB ROW -->
+      <div class="flex flex-row">
+        <div
+          class="tab"
+          :class="{'active': tab === 'siteSettings'}"
+          @click="setTab('siteSettings')"
+        >
+          Settings for current site<br/>
+          <small>{{ site }}</small>
+        </div>
+        <div
+          class="tab"
+          :class="{'active': tab === 'extensionSettings'}"
+          @click="setTab(tab = 'extensionSettings')"
+        >
+          Default settings for extension
+        </div>
+        <div
+          class="tab"
+          :class="{'active': tab === 'otherSites'}"
+          @click="setTab(tab = 'otherSites')"
+        >
+          Settings for other sites
+        </div>
       </div>
-      <div
-        class="tab"
-        :class="{'active': tab === 'extensionSettings'}"
-        @click="setTab(tab = 'extensionSettings')"
-      >
-        Default settings for extension
-      </div>
-      <div
-        class="tab"
-        :class="{'active': tab === 'otherSites'}"
-        @click="setTab(tab = 'otherSites')"
-      >
-        Settings for other sites
+
+      <template v-if="tab === 'siteSettings' && siteSettings">
+        <SiteExtensionSettings
+          v-if="settings"
+          :settings="settings"
+          :siteSettings="siteSettings"
+          :isDefaultConfiguration="false"
+        ></SiteExtensionSettings>
+      </template>
+
+      <template v-if="tab === 'extensionSettings' && globalSettings">
+        <SiteExtensionSettings
+          v-if="settings"
+          :settings="settings"
+          :siteSettings="globalSettings"
+          :isDefaultConfiguration="true"
+        ></SiteExtensionSettings>
+      </template>
+
+      <template v-if="tab === 'otherSites'">
+        <OtherSiteSettings
+          v-if="settings"
+          :settings="settings"
+        >
+        </OtherSiteSettings>
+      </template>
+
+      <!-- Reset options -->
+      <div class="flex flex-col" style="margin-top: 2rem">
+        <h2>Reset and backup</h2>
+        <p><small>Settings import must be done from in-player UI.</small></p>
+        <div class="flex flex-row w-full">
+          <UploadJsonFileButton
+            class="flex-grow"
+            @importedJson="handleImportedSettings"
+            @error="handleSettingsImportError"
+          >
+            Import settings
+          </UploadJsonFileButton>
+          <Popup
+            v-if="importSettingDialogConfig.visible"
+            title="Overwrite existing settings?"
+            message="Importing settings from a file will overwrite existing settings. Continue?"
+            confirmButtonText="Import settings"
+            cancelButtonText="Cancel"
+            @onConfirm="importSettingDialogConfig.confirm"
+            @onCancel="importSettingDialogConfig.reject"
+          >
+          </Popup>
+          <button class="flex-grow" @click="exportSettings()">Export settings</button>
+        </div>
+        <div>
+
+        </div>
+        <ConfirmButton
+          dialogType="danger"
+          @onConfirmed="resetSettings"
+        >
+          Reset settings
+        </ConfirmButton>
+
+        <div v-if="enableSettingsEditor" class="field">
+          <div class="label">Show developer options</div>
+          <input v-model="showSettingsEditor" type="checkbox">
+        </div>
       </div>
     </div>
+    <div v-if="enableSettingsEditor && showSettingsEditor" class="h-full grow">
+      <h2>Settings editor</h2>
+      <div class="flex flex-row w-full">
+        <div class="flex flex-row">
+          <div>Enable save button:</div>
+          <input v-model="allowSettingsEditing" type="checkbox">
+        </div>
+        <div class="grow">
+        </div>
+        <div>
+          <div v-if="editorSaveFinished">Settings saved ...</div>
+          <button v-else
+            class="danger"
+            :class="{'disabled': !allowSettingsEditing}"
+            :disabled="!allowSettingsEditing"
+            @click="saveSettingsChanges"
+          >
+            Save
+          </button>
+        </div>
+        <button @click="resetSettingsEditor">
+          Cancel
+        </button>
 
-    <template v-if="tab === 'siteSettings' && siteSettings">
-      <!-- <div class="button">
-        Reset settings for site
-      </div> -->
-      <SiteExtensionSettings
-        v-if="settings"
-        :settings="settings"
-        :siteSettings="siteSettings"
-        :isDefaultConfiguration="false"
-      ></SiteExtensionSettings>
-    </template>
-
-    <template v-if="tab === 'extensionSettings' && globalSettings">
-      <SiteExtensionSettings
-        v-if="settings"
-        :settings="settings"
-        :siteSettings="globalSettings"
-        :isDefaultConfiguration="true"
-      ></SiteExtensionSettings>
-    </template>
-
-    <template v-if="tab === 'otherSites'">
-      <OtherSiteSettings
-        v-if="settings"
-        :settings="settings"
-      >
-      </OtherSiteSettings>
-    </template>
-
-
-
-    <!-- Reset options -->
-    <div class="flex flex-col" style="margin-top: 2rem">
-      <h2>Reset and backup</h2>
-      <p>
-        Pressing the button will reset settings to default without asking.
-      </p>
-      <ConfirmButton
-        class="danger"
-        @onConfirmed="resetSettings"
-      >
-        Reset settings
-      </ConfirmButton>
+      </div>
+      <div>
+        <JsonVanillaEditor
+          v-model="settingsJson"
+        >
+        </JsonVanillaEditor>
+      </div>
     </div>
   </div>
 </template>
@@ -77,12 +132,22 @@
 <script>
 import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue';
 import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSettings.vue';
+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';
+
+
 
 export default {
   data() {
     return {
-      tab: 'siteSettings'
+      tab: 'siteSettings',
+      importSettingDialogConfig: {visible: false},
+      showSettingsEditor: false,
+      allowSettingsEditing: false,
+      editorSaveFinished: false,
+      settingsJson: {},
     }
   },
   mixins: [
@@ -91,11 +156,15 @@ export default {
   props: [
     'settings',
     'site',
+    'enableSettingsEditor'
   ],
   components: {
     SiteExtensionSettings,
     OtherSiteSettings,
-    ConfirmButton
+    Popup,
+    ConfirmButton,
+    UploadJsonFileButton,
+    JsonVanillaEditor
   },
   computed: {
     globalSettings() {
@@ -107,15 +176,81 @@ export default {
       }
       return null;
     },
-    resetSettings() {
-      this.settings.active = JSON.parse(JSON.stringify(this.settings.default));
-      this.settings.saveWithoutReload();
-    }
+  },
+  mounted() {
+    this.resetSettingsEditor();
   },
   methods: {
     setTab(tab) {
       this.tab = tab;
+    },
+
+    //#region settings management
+    /**
+     * Exports extension settings into a json file.
+     */
+    exportSettings() {
+      const settingBlob = new Blob(
+        [ JSON.stringify(this.settings.active, null, 2) ],
+        { type: "application/json"}
+      );
+      const url = window.URL.createObjectURL(settingBlob);
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "ultrawidify-settings.json";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    },
+
+    handleImportedSettings(newSettings) {
+      console.log('new settings received:', newSettings)
+      this.importSettingDialogConfig = {
+        visible: true,
+        confirm: () => {
+          this.settings.active = newSettings;
+          this.settings.saveWithoutReload();
+          this.importSettingDialogConfig = {visible: false};
+        },
+        reject: () => {
+          this.importSettingDialogConfig = {visible: false};
+        }
+      }
+    },
+
+    handleSettingsImportError(error) {
+      console.error('Error importing settings:', error);
+    },
+
+    /**
+     * Resets settings to default
+     */
+    resetSettings() {
+      this.settings.active = JSON.parse(JSON.stringify(this.settings.default));
+      this.settings.saveWithoutReload();
+    },
+
+    saveSettingsChanges() {
+      console.log(' saving settings changes ...', this.allowSettingsEditing)
+
+      if (this.allowSettingsEditing) {
+        this.settings.active = this.settingsJson;
+        this.settings.saveWithoutReload();
+        this.resetSettingsEditor();
+        this.editorSaveFinished = true;
+        console.log('save finished ...')
+        setTimeout(() => {
+          this.editorSaveFinished = false;
+        }, 3000);
+      }
+    },
+
+    resetSettingsEditor() {
+      this.settingsJson = JSON.parse(JSON.stringify(this.settings?.active ?? {}));
     }
+    //#endregion
   }
 
 }
diff --git a/src/csui/src/components/ConfirmButton.vue b/src/csui/src/components/ConfirmButton.vue
index e1ed677..61a23e0 100644
--- a/src/csui/src/components/ConfirmButton.vue
+++ b/src/csui/src/components/ConfirmButton.vue
@@ -28,11 +28,20 @@
         >
           {{ confirmText || 'Confirm' }}
         </button>
-        <button @click="popupVisible = false">{{ cancelText  || 'Cancel' }}</button>
+        <button class="button" @click="popupVisible = false">{{ cancelText  || 'Cancel' }}</button>
       </div>
     </div>
   </div>
-  <button @click="popupVisible = true">
+  <button
+    :class="[
+      {
+        'danger': dialogType === 'danger',
+        'warning': dialogType === 'warning',
+      },
+      btnClass
+    ]"
+    @click="popupVisible = true"
+  >
     <slot></slot>
   </button>
 </template>
@@ -46,6 +55,7 @@ export default {
     }
   },
   props: [
+    'btnClass',
     'dialogTitle',
     'dialogText',
     'confirmText',
@@ -54,6 +64,7 @@ export default {
   ],
   methods: {
     confirmAction() {
+      this.popupVisible = false;
       this.$emit('onConfirmed');
     }
   }
@@ -67,14 +78,28 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: saturate(50%) backdrop-blur(1rem);
+
+  width: 100%;
+  height: 100%;
+
+  // background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: saturate(50%) brightness(50%) blur(1rem);
   z-index: 99999;
 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
   .header {
     font-size: 1.33rem;
+
     color: #fff;
-    background-color: #000;
+
+    &.danger {
+      color: rgb(251, 107, 63);
+      font-weight: bold;
+    }
   }
   .body {
     min-height: 5rem;
diff --git a/src/csui/src/components/JsonVanillaEditor.vue b/src/csui/src/components/JsonVanillaEditor.vue
new file mode 100644
index 0000000..fa38551
--- /dev/null
+++ b/src/csui/src/components/JsonVanillaEditor.vue
@@ -0,0 +1,64 @@
+<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>
diff --git a/src/csui/src/components/Popup.vue b/src/csui/src/components/Popup.vue
new file mode 100644
index 0000000..db18444
--- /dev/null
+++ b/src/csui/src/components/Popup.vue
@@ -0,0 +1,105 @@
+<template>
+  <div
+    v-if="message"
+    class="popup-overlay"
+    :class="{'dim': dimOverlay}"
+  >
+    <div class="popup-content" >
+      <div v-if="title" class="header" :class="type">
+        {{title}}
+      </div>
+      <p>
+        {{ message }}
+      </p>
+      <div class="flex flex-row justify-end">
+        <button
+          class="primary"
+          v-if="confirmButtonText"
+          :class="type"
+          @click="$emit('onConfirm')"
+        >
+          {{ confirmButtonText }}
+        </button>
+        <button
+          :class="type"
+          @click="$emit('onCancel')"
+        >
+          {{ cancelButtonText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    // onConfirm: {
+    //   type: Function,
+    //   required: false
+    // },
+    // onCancel: {
+    //   type: Function,
+    //   default: () => this.$emit('close')
+    // },
+    title: {
+      type: String,
+      required: false
+    },
+    message: {
+      type: String,
+      required: false, // technically prolly should be true, but we don't have to guard against skill issue
+    },
+    dimOverlay: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'info'
+    },
+    confirmButtonText: {
+      type: String,
+      required: false,
+    },
+    cancelButtonText: {
+      type: String,
+      default: 'Cancel'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  width: 100%;
+  height: 100%;
+
+  // background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: saturate(50%) brightness(50%) blur(1rem);
+  z-index: 99999;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .header {
+    font-size: 1.33rem;
+
+    color: #fff;
+
+    &.danger {
+      color: rgb(251, 107, 63);
+      font-weight: bold;
+    }
+  }
+  .body {
+    min-height: 5rem;
+  }
+}
+</style>
diff --git a/src/csui/src/components/UploadJsonFileButton.vue b/src/csui/src/components/UploadJsonFileButton.vue
new file mode 100644
index 0000000..e8ce4d7
--- /dev/null
+++ b/src/csui/src/components/UploadJsonFileButton.vue
@@ -0,0 +1,77 @@
+<template>
+  <button
+    class="button drop-zone"
+    :class="[{'drag-over': isDragOver}, className]"
+    @click="onClick"
+    @dragover="isDragOver = true"
+    @dragleave="isDragOver = false"
+    @drop="onDrop"
+  >
+    <slot></slot>
+    <input type="file" ref="fileInput" @change="onFileChange" accept=".json" />
+  </button>
+
+</template>
+<script>
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isDragOver: false
+    };
+  },
+  methods: {
+    onClick() {
+      this.$refs.fileInput.click();
+    },
+    onDrop(event) {
+      event.preventDefault();
+      this.isDragOver = false;
+
+      if (event.dataTransfer.files.length > 0) {
+        this.handleFile(event.dataTransfer.files[0]);
+      }
+    },
+    onFileChange(event) {
+      if (event.target.files.length > 0) {
+        this.handleFile(event.target.files[0]);
+      }
+    },
+    handleFile(file) {
+      if (file.type !== "application/json") {
+        this.$emit('error', 'NOT_JSON_FILE');
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = async (event) => {
+        try {
+          const importedData = JSON.parse(event.target.result);
+          this.$emit('importedJson', importedData);
+        } catch (error) {
+          this.$emit('error', 'INVALID_JSON');
+        }
+      };
+      reader.readAsText(file);
+    },
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+input {
+  display: none;
+}
+.drop-zone {
+  &.drag-over {
+    background-color: #fa6;
+    color: black;
+  }
+}
+</style>
diff --git a/src/csui/src/popup/panels/SiteDetailsPanel.vue b/src/csui/src/popup/panels/SiteDetailsPanel.vue
index 82674ce..4b846aa 100644
--- a/src/csui/src/popup/panels/SiteDetailsPanel.vue
+++ b/src/csui/src/popup/panels/SiteDetailsPanel.vue
@@ -117,9 +117,9 @@
     </div>
     <div class="flex flex-col">
         <textarea
-               v-model="playerCss"
-               @change="updatePlayerCss"
-               @blur="updatePlayerCss"
+          v-model="playerCss"
+          @change="updatePlayerCss"
+          @blur="updatePlayerCss"
         >
         </textarea>
     </div>
diff --git a/src/csui/src/res-common/common.scss b/src/csui/src/res-common/common.scss
index 26bd323..8b9583e 100644
--- a/src/csui/src/res-common/common.scss
+++ b/src/csui/src/res-common/common.scss
@@ -58,10 +58,19 @@ button, .button {
     border-color: rgba($primary, .5);
   }
 
+
+  &.primary {
+    background-color: #fa6;
+    color: #000;
+  }
+
   &.danger {
     background-color: #ff2211 !important;
     color:#000;
   }
+  &.disabled {
+    filter: saturate(0%);
+  }
 }
 .b3 {
   margin: 0.25rem;
diff --git a/src/ext/lib/Settings.ts b/src/ext/lib/Settings.ts
index 981e52a..498d9fa 100644
--- a/src/ext/lib/Settings.ts
+++ b/src/ext/lib/Settings.ts
@@ -356,12 +356,14 @@ class Settings {
       console.log("[Settings::save] Saving active settings:", this.active);
     }
     this.active.preventReload = undefined;
+    this.active.lastModified = new Date();
     await this.set(this.active, options);
   }
 
 
   async saveWithoutReload() {
     this.active.preventReload = true;
+    this.active.lastModified = new Date();
     await this.set(this.active);
   }