diff --git a/packages/sdk-components-react/src/xml-node.stories.tsx b/packages/sdk-components-react/src/xml-node.stories.tsx
new file mode 100644
index 000000000000..75bc0e256acc
--- /dev/null
+++ b/packages/sdk-components-react/src/xml-node.stories.tsx
@@ -0,0 +1,38 @@
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import { XmlNode } from "./xml-node";
+
+const Component = () => {
+  return (
+    <ReactSdkContext.Provider
+      value={{
+        renderer: "canvas",
+        assetBaseUrl: "/",
+        imageLoader: ({ src }) => src,
+        resources: {},
+      }}
+    >
+      <XmlNode tag="root">
+        <XmlNode tag="hello" rel="hihi" hreflang="joajoajoaja aokaoja aojaoj">
+          Hi All Hi All Hi All Hi AllHi AllHi All Hi AllHi AllHi All
+        </XmlNode>
+        <XmlNode tag="hello" rel="hihi"></XmlNode>
+      </XmlNode>
+    </ReactSdkContext.Provider>
+  );
+};
+
+export default {
+  title: "Components/XmlNode",
+};
+
+const Story = {
+  render() {
+    return (
+      <>
+        <Component />
+      </>
+    );
+  },
+};
+
+export { Story as XmlNode };
diff --git a/packages/sdk-components-react/src/xml-node.tsx b/packages/sdk-components-react/src/xml-node.tsx
index 8619c0ecf097..8e9e781d614f 100644
--- a/packages/sdk-components-react/src/xml-node.tsx
+++ b/packages/sdk-components-react/src/xml-node.tsx
@@ -57,29 +57,44 @@ export const XmlNode = forwardRef<ElementRef<"div">, Props>(
       childrenArray.length > 0 &&
       childrenArray.every((child) => typeof child === "string");
 
-    const attributes = attributeEntries.map(
-      ([key, value]) => `${key}=${JSON.stringify(value)}`
-    );
+    const renderAttributes = (attrs: [string, string][]) => {
+      return attrs.map(([name, value], index) => {
+        return (
+          <span key={index}>
+            {" "}
+            <span style={{ color: "#FF0000" }}>{name}</span>
+            <span style={{ color: "#000000" }}>=</span>
+            <span style={{ color: "#0000FF" }}>"{value}"</span>
+          </span>
+        );
+      });
+    };
 
     return (
       <div {...props}>
-        <span style={{ color: "rgb(16, 23, 233)" }}>
-          &lt;{[elementName, ...attributes].join(" ")}&gt;
+        <span>
+          <span style={{ color: "#800000" }}>&lt;{elementName}</span>
+          {attributeEntries.length > 0 && renderAttributes(attributeEntries)}
+          {childrenArray.length === 0 ? (
+            <span style={{ color: "#800000" }}>/&gt;</span>
+          ) : (
+            <span style={{ color: "#800000" }}>&gt;</span>
+          )}
         </span>
         {childrenArray.length > 0 && (
-          <div
-            ref={ref}
-            style={{
-              display: isTextChild ? "inline" : "block",
-              marginLeft: isTextChild ? 0 : "1rem",
-            }}
-          >
-            {children}
-          </div>
+          <>
+            <div
+              ref={ref}
+              style={{
+                display: isTextChild ? "inline" : "block",
+                marginLeft: isTextChild ? 0 : "1rem",
+              }}
+            >
+              {children}
+            </div>
+            <span style={{ color: "#800000" }}>&lt;/{elementName}&gt;</span>
+          </>
         )}
-        <span style={{ color: "rgb(16, 23, 233)" }}>
-          &lt;/{elementName}&gt;
-        </span>
       </div>
     );
   }