diff --git a/packages/elements/src/schema-display.tsx b/packages/elements/src/schema-display.tsx
index d3d4c691..990e0c99 100644
--- a/packages/elements/src/schema-display.tsx
+++ b/packages/elements/src/schema-display.tsx
@@ -97,19 +97,22 @@ export const SchemaDisplayPath = ({
 }: SchemaDisplayPathProps) => {
   const { path } = useContext(SchemaDisplayContext);
 
-  // Highlight path parameters
-  const highlightedPath = path.replaceAll(
-    /\{([^}]+)\}/g,
-    '<span class="text-blue-600 dark:text-blue-400">{$1}</span>'
-  );
+  // Highlight path parameters as React nodes (escapes by construction)
+  const parts = path.split(/(\{[^}]+\})/g);
 
   return (
-    <span
-      className={cn("font-mono text-sm", className)}
-      // oxlint-disable-next-line eslint-plugin-react(no-danger)
-      dangerouslySetInnerHTML={{ __html: children ?? highlightedPath }}
-      {...props}
-    />
+    <span className={cn("font-mono text-sm", className)} {...props}>
+      {children ??
+        parts.map((part, i) =>
+          /^\{[^}]+\}$/.test(part) ? (
+            <span className="text-blue-600 dark:text-blue-400" key={i}>
+              {part}
+            </span>
+          ) : (
+            part
+          )
+        )}
+    </span>
   );
 };