diff --git a/scripts/logviewer/index.html b/scripts/logviewer/index.html
index 3a127471..ef5f9f23 100644
--- a/scripts/logviewer/index.html
+++ b/scripts/logviewer/index.html
@@ -47,6 +47,7 @@
             aside .values li span {
               word-wrap: ;
               word-wrap: anywhere;
+              padding: 4px;
             }
 
             aside .values {
@@ -63,7 +64,7 @@
             aside .values span.value {
               width: 70%;
               display: block;
-              padding-left: 10px;
+              white-space: pre-wrap;
             }
 
             aside .values li {
diff --git a/scripts/logviewer/main.js b/scripts/logviewer/main.js
index 11880bf1..cf69b6fd 100644
--- a/scripts/logviewer/main.js
+++ b/scripts/logviewer/main.js
@@ -52,6 +52,14 @@ main.addEventListener("click", event => {
     }
 });
 
+function stringifyItemValue(value) {
+    if (typeof value === "object" && value !== null) {
+        return JSON.stringify(value, undefined, 2);
+    } else {
+        return value + "";
+    }
+}
+
 function showItemDetails(item, parent, itemNode) {
     const parentOffset = itemStart(parent) ? `${itemStart(item) - itemStart(parent)}ms` : "none";
     const expandButton = t.button("Expand recursively");
@@ -68,7 +76,7 @@ function showItemDetails(item, parent, itemNode) {
         t.ul({class: "values"}, Object.entries(itemValues(item)).map(([key, value]) => {
             return t.li([
                 t.span({className: "key"}, normalizeValueKey(key)),
-                t.span({className: "value"}, value+"")
+                t.span({className: "value"}, stringifyItemValue(value))
             ]);
         })),
         t.p(expandButton)