diff --git a/ui/src/components/records/fields/JsonField.svelte b/ui/src/components/records/fields/JsonField.svelte
index af7df06c..7e9a3043 100644
--- a/ui/src/components/records/fields/JsonField.svelte
+++ b/ui/src/components/records/fields/JsonField.svelte
@@ -6,10 +6,11 @@
     export let field = new SchemaField();
     export let value = undefined;
 
-    let serialized = undefined;
+    let serialized = JSON.stringify(typeof value === "undefined" ? null : value, null, 2);
 
     $: if (value !== serialized?.trim()) {
-        serialized = JSON.stringify(value, null, 2);
+        serialized = JSON.stringify(typeof value === "undefined" ? null : value, null, 2);
+        value = serialized;
     }
 </script>