diff --git a/package-lock.json b/package-lock.json
index 707dd9754..17e6fe874 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14582,6 +14582,11 @@
       "integrity": "sha512-i43a3nPJufH3M+LQn71Li1f6PoA4Vx+8pV6fGnoFczwA6v8OT5o7B0LBf7LKViG9BVJNvFxGube4t/KQBN7rzg==",
       "dev": true
     },
+    "svelte-json-tree-auto": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/svelte-json-tree-auto/-/svelte-json-tree-auto-0.1.0.tgz",
+      "integrity": "sha512-XDUBTV/BNStd/9WJDndzxQ9KqhoNoZBxkOo1H1d29qKW+YxG6eRrt2Yp0Cv/6KLKDtFLhJ9huJpqpOSe4yMG0Q=="
+    },
     "svgo": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
diff --git a/package.json b/package.json
index 0490b45e6..26d8c6f44 100644
--- a/package.json
+++ b/package.json
@@ -165,6 +165,7 @@
     "socket.io": "^2.1.1",
     "socket.io-client": "^2.3.0",
     "svelte": "^3.24.0",
+    "svelte-json-tree-auto": "^0.1.0",
     "ts-toolbelt": "^6.3.6",
     "uuid": "3.2.1"
   },
diff --git a/src/client/debug/main/Main.svelte b/src/client/debug/main/Main.svelte
index 760194b44..129c28300 100644
--- a/src/client/debug/main/Main.svelte
+++ b/src/client/debug/main/Main.svelte
@@ -1,6 +1,7 @@
 <script>
   export let client;
 
+  const JSONTree = require('svelte-json-tree-auto');
   import Move from './Move.svelte';
   import Controls from './Controls.svelte';
   import PlayerInfo from './PlayerInfo.svelte';
@@ -31,9 +32,9 @@
 </script>
 
 <style>
-  .json {
-    font-family: monospace;
-    color: #888;
+  .tree {
+    --json-tree-font-family: monospace;
+    --json-tree-font-size: 14px;
   }
 
   label {
@@ -105,14 +106,12 @@
   </div>
 </section>
 
-<section>
+<section class="tree">
   <label>G</label>
-  <pre class="json">{JSON.stringify(G, null, 2)}</pre>
+  <JSONTree value={G} />
 </section>
 
-<section>
+<section class="tree">
   <label>ctx</label>
-  <pre class="json">
-    {JSON.stringify(SanitizeCtx(ctx), null, 2)}
-  </pre>
+  <JSONTree value={SanitizeCtx(ctx)} />
 </section>