diff --git a/Neos.Workspace.Ui/Resources/Private/Fusion/Components/HtmxConfig.fusion b/Neos.Workspace.Ui/Resources/Private/Fusion/Components/HtmxConfig.fusion
new file mode 100644
index 00000000000..117f866e6ec
--- /dev/null
+++ b/Neos.Workspace.Ui/Resources/Private/Fusion/Components/HtmxConfig.fusion
@@ -0,0 +1,29 @@
+prototype(Neos.Workspace.Ui:Component.HTMXConfig) < prototype(Neos.Fusion:Component) {
+  htmxConfig = Neos.Fusion:DataStructure {
+    // 204 - No Content by default does nothing, but is not an error
+        noContent {
+      code = 204
+      swap = false
+    }
+    // 200 & 300 responses are non-errors and are swapped
+        nonErrors {
+      code = '[23]..'
+      swap = true
+    }
+    // 422 responses are swapped
+        invalidRequest {
+      code = 422
+      swap = true
+    }
+    // 400 & 500 responses are not swapped and are errors
+        errors {
+      code = '[45]..'
+      swap = false
+      error = true
+    }
+  }
+
+  renderer = afx`
+    <meta name="htmx-config" content={Json.stringify(Array.values(props.htmxConfig))}/>
+  `
+}
diff --git a/Neos.Workspace.Ui/Resources/Private/Fusion/Views/Index.fusion b/Neos.Workspace.Ui/Resources/Private/Fusion/Views/Index.fusion
index bce76b03c6e..794c1b9aaa9 100644
--- a/Neos.Workspace.Ui/Resources/Private/Fusion/Views/Index.fusion
+++ b/Neos.Workspace.Ui/Resources/Private/Fusion/Views/Index.fusion
@@ -11,15 +11,8 @@ Neos.Workspace.Ui.WorkspaceController.index = Neos.Fusion:Component {
     action = 'new'
   }
 
-  htmxConfig = '[
-    {"code": "204", "swap": false},
-    {"code": "[23]..", "swap": true},
-    {"code": "422", "swap": true},
-    {"code": "[45]..", "swap": false, "error":true}
-  ]'
-
   renderer = afx`
-    <meta name="htmx-config" content={props.htmxConfig}/>
+    <Neos.Workspace.Ui:Component.HTMXConfig/>
     <Neos.Workspace.Ui:Component.FlashMessages flashMessages={props.flashMessages}/>
     <main class="neos-content neos-container-fluid">
       <div class="neos-row-fluid">