diff --git a/web/default/src/components/json-editor.tsx b/web/default/src/components/json-editor.tsx
index c3323267b0d..b8297db2a44 100644
--- a/web/default/src/components/json-editor.tsx
+++ b/web/default/src/components/json-editor.tsx
@@ -43,6 +43,23 @@ type EditorRow = {
   value: string
 }
 
+function parseJsonRows(json: string): EditorRow[] | null {
+  try {
+    if (!json.trim()) {
+      return []
+    }
+
+    const parsed = JSON.parse(json)
+    return Object.entries(parsed).map(([key, val], index) => ({
+      id: `${Date.now()}-${index}`,
+      key,
+      value: typeof val === 'object' ? JSON.stringify(val) : String(val),
+    }))
+  } catch (_error) {
+    return null
+  }
+}
+
 export function JsonEditor({
   value,
   onChange,
@@ -63,26 +80,13 @@ export function JsonEditor({
   const resolvedKeyLabel = keyLabel ?? t('Key')
   const resolvedValueLabel = valueLabel ?? t('Value')
   const [mode, setMode] = useState<'visual' | 'json'>('visual')
-  const [rows, setRows] = useState<EditorRow[]>([])
+  const [rows, setRows] = useState<EditorRow[]>(() => parseJsonRows(value) ?? [])
   const [jsonValue, setJsonValue] = useState(value)
 
   const parseJsonToRows = (json: string) => {
-    try {
-      if (!json.trim()) {
-        setRows([])
-        return
-      }
-      const parsed = JSON.parse(json)
-      const newRows: EditorRow[] = Object.entries(parsed).map(
-        ([key, val], index) => ({
-          id: `${Date.now()}-${index}`,
-          key,
-          value: typeof val === 'object' ? JSON.stringify(val) : String(val),
-        })
-      )
-      setRows(newRows)
-    } catch (_error) {
-      // Invalid JSON, keep current rows
+    const parsedRows = parseJsonRows(json)
+    if (parsedRows) {
+      setRows(parsedRows)
     }
   }