Pretty rendering of JSON messages

matrixgw_frontend/src/routes/WSDebugRoute.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { JsonView, darkStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
 import { WsApi, type WsMessage } from "../api/WsApi";
 import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
 import { time } from "../utils/DateUtils";
@@ -48,7 +50,19 @@ export function WSDebugRoute(): React.ReactElement {
   return (
     <MatrixGWRouteContainer label={"WebSocket Debug"}>
       State: {state}
-      {JSON.stringify(messages)}
+      {messages.map((msg, id) => (
+        <div style={{ margin: "10px", backgroundColor: "black" }}>
+          <JsonView
+            key={id}
+            data={msg}
+            shouldExpandNode={(level) => level < 2}
+            style={{
+              ...darkStyles,
+              container: "",
+            }}
+          />
+        </div>
+      ))}
     </MatrixGWRouteContainer>
   );
 }