feat: Add XML to JSON converter

__tests__/xml-to-json.test.ts

@@ -0,0 +1,143 @@
+/**
+ * @jest-environment jsdom
+ */
+import { xmlToJson } from "../lib/xmlToJson";
+
+describe("XML to JSON Converter", () => {
+  describe("Basic conversion", () => {
+    it("should convert simple XML to JSON", () => {
+      const xml = "<root><name>test</name></root>";
+      const result = xmlToJson(xml);
+      expect(result).toEqual({ root: { name: "test" } });
+    });
+
+    it("should handle nested elements", () => {
+      const xml = "<root><parent><child>value</child></parent></root>";
+      const result = xmlToJson(xml);
+      expect(result).toEqual({
+        root: { parent: { child: "value" } },
+      });
+    });
+
+    it("should handle empty elements", () => {
+      const xml = "<root><empty></empty></root>";
+      const result = xmlToJson(xml);
+      expect(result).toEqual({ root: { empty: null } });
+    });
+  });
+
+  describe("Attribute handling", () => {
+    it("should convert XML attributes to @attributes object", () => {
+      const xml = '<root id="123"><name>test</name></root>';
+      const result = xmlToJson(xml);
+      expect(result).toEqual({
+        root: { "@attributes": { id: "123" }, name: "test" },
+      });
+    });
+
+    it("should handle multiple attributes", () => {
+      const xml = '<root id="123" class="main" data-test="true"></root>';
+      const result = xmlToJson(xml);
+      expect(result).toEqual({
+        root: {
+          "@attributes": { id: "123", class: "main", "data-test": "true" },
+        },
+      });
+    });
+
+    it("should handle element with only attributes", () => {
+      const xml = '<root id="123"></root>';
+      const result = xmlToJson(xml);
+      expect(result).toEqual({
+        root: { "@attributes": { id: "123" } },
+      });
+    });
+  });
+
+  describe("Array handling", () => {
+    it("should convert multiple same-named elements to array", () => {
+      const xml = "<root><item>1</item><item>2</item><item>3</item></root>";
+      const result = xmlToJson(xml);
+      expect(result).toEqual({ root: { item: ["1", "2", "3"] } });
+    });
+
+    it("should handle mixed elements with arrays", () => {
+      const xml = "<root><name>test</name><item>1</item><item>2</item></root>";
+      const result = xmlToJson(xml);
+      expect(result).toEqual({
+        root: { name: "test", item: ["1", "2"] },
+      });
+    });
+  });
+
+  describe("Text content handling", () => {
+    it("should handle text content with attributes", () => {
+      const xml = '<root id="1">text content</root>';
+      const result = xmlToJson(xml);
+      expect(result).toEqual({
+        root: { "@attributes": { id: "1" }, "#text": "text content" },
+      });
+    });
+
+    it("should trim whitespace from text content", () => {
+      const xml = "<root><name>  test  </name></root>";
+      const result = xmlToJson(xml);
+      expect(result).toEqual({ root: { name: "test" } });
+    });
+  });
+
+  describe("Error handling", () => {
+    it("should throw error for invalid XML", () => {
+      const xml = "<root><unclosed>";
+      expect(() => xmlToJson(xml)).toThrow("Invalid XML");
+    });
+
+    it("should throw error for malformed XML", () => {
+      const xml = "not xml at all";
+      expect(() => xmlToJson(xml)).toThrow("Invalid XML");
+    });
+  });
+
+  describe("Complex XML structures", () => {
+    it("should handle deeply nested structures", () => {
+      const xml =
+        "<root><level1><level2><level3>deep</level3></level2></level1></root>";
+      const result = xmlToJson(xml);
+      expect(result).toEqual({
+        root: { level1: { level2: { level3: "deep" } } },
+      });
+    });
+
+    it("should handle real-world XML example", () => {
+      const xml = `
+                <users>
+                    <user id="1">
+                        <name>John</name>
+                        <email>john@example.com</email>
+                    </user>
+                    <user id="2">
+                        <name>Jane</name>
+                        <email>jane@example.com</email>
+                    </user>
+                </users>
+            `;
+      const result = xmlToJson(xml);
+      expect(result).toEqual({
+        users: {
+          user: [
+            {
+              "@attributes": { id: "1" },
+              name: "John",
+              email: "john@example.com",
+            },
+            {
+              "@attributes": { id: "2" },
+              name: "Jane",
+              email: "jane@example.com",
+            },
+          ],
+        },
+      });
+    });
+  });
+});

components/seo/XmlToJsonSEO.tsx

@@ -0,0 +1,180 @@
+import Link from "next/link";
+
+export default function XmlToJsonSEO() {
+  return (
+    <div className="content-wrapper">
+      <section>
+        <p>
+          Our free, open-source, and ad-free XML to JSON converter makes it easy
+          to transform your data formats. Convert configuration files, API
+          responses, or legacy XML data into modern JSON with just a few clicks.
+          Built with 💜 for developers by developers.
+        </p>
+        <p className="text-sm text-muted-foreground mt-2">
+          Looking for YAML conversion instead? Check out{" "}
+          <a
+            href="https://jsontoyamlconverter.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            jsontoyamlconverter.com
+          </a>{" "}
+          for JSON ↔ YAML conversions.
+        </p>
+      </section>
+
+      <section>
+        <h2>Why Convert XML to JSON?</h2>
+        <p>
+          XML (eXtensible Markup Language) has been a standard for data exchange
+          for decades, but JSON (JavaScript Object Notation) has become the
+          preferred format for modern web development. Converting{" "}
+          <b>XML to JSON</b> is essential when you need:
+        </p>
+        <ul>
+          <li>
+            <b>Modern API Integration:</b> <br /> Most modern REST APIs use
+            JSON, making conversion essential for integrating legacy XML data.
+          </li>
+          <li>
+            <b>Reduced Data Size:</b> <br /> JSON is more compact than XML,
+            reducing bandwidth and improving performance.
+          </li>
+          <li>
+            <b>JavaScript Compatibility:</b> <br /> JSON is native to
+            JavaScript, making it easier to work with in web applications.
+          </li>
+          <li>
+            <b>Better Readability:</b> <br /> JSON's simpler syntax makes data
+            easier to read and understand compared to verbose XML.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>How to Use Our XML to JSON Converter</h2>
+        <p>Converting XML data to JSON has never been easier:</p>
+        <ul>
+          <li>
+            <b>Step 1:</b> <br /> Paste your XML code into the input box.
+          </li>
+          <li>
+            <b>Step 2:</b> <br /> Instantly receive your JSON output. No
+            registration or ads.
+          </li>
+          <li>
+            <b>Step 3:</b> <br /> Copy your JSON data and integrate it into your
+            project.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Key Features of Our XML to JSON Tool</h2>
+        <ul>
+          <li>
+            <b>Client-side processing</b> <br /> Your data never leaves your
+            browser - complete privacy guaranteed.
+          </li>
+          <li>
+            <b>Attribute handling</b> <br /> XML attributes are preserved as
+            @attributes in the JSON output.
+          </li>
+          <li>
+            <b>Array detection</b> <br /> Multiple elements with the same name
+            are automatically converted to arrays.
+          </li>
+          <li>
+            <b>CDATA support</b> <br /> CDATA sections are properly extracted as
+            text content.
+          </li>
+          <li>
+            <b>Error detection</b> <br /> Invalid XML is detected and reported
+            immediately.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>XML vs JSON: When to Use Each</h2>
+        <p>Both XML and JSON have their strengths. Here's when to use each:</p>
+        <ul>
+          <li>
+            <b>XML:</b> <br />
+            Better for documents with mixed content, complex schemas, XSLT
+            transformations, and SOAP web services.
+          </li>
+          <li>
+            <b>JSON:</b> <br /> Preferred for REST APIs, configuration files,
+            web applications, and when file size matters.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>FAQs</h2>
+        <ul>
+          <li>
+            <b>What is XML?</b> <br /> XML (eXtensible Markup Language) is a
+            markup language that defines rules for encoding documents in a
+            format that is both human-readable and machine-readable.
+          </li>
+          <li>
+            <b>What is JSON?</b> <br /> JSON (JavaScript Object Notation) is a
+            lightweight data format used to transmit data between servers and
+            web applications.
+          </li>
+          <li>
+            <b>How are XML attributes handled?</b> <br /> XML attributes are
+            converted to an @attributes object in the JSON output, preserving
+            all attribute data.
+          </li>
+          <li>
+            <b>Can I convert JSON back to XML?</b> <br /> While more complex due
+            to attribute handling, you can manually restructure JSON back to XML
+            format.
+          </li>
+          <li>
+            <b>Is my data secure?</b> <br /> Yes! All processing happens in your
+            browser. Your XML data is never sent to any server.
+          </li>
+          <li>
+            <b>Need YAML conversion?</b> <br /> For JSON to YAML conversion,
+            visit{" "}
+            <a
+              href="https://jsontoyamlconverter.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              jsontoyamlconverter.com
+            </a>
+            .
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Related Tools</h2>
+        <p>Check out our other data conversion utilities:</p>
+        <ul>
+          <li>
+            <Link href="/utilities/json-formatter">JSON Formatter</Link> -
+            Format and beautify JSON data
+          </li>
+          <li>
+            <Link href="/utilities/yaml-to-json">YAML to JSON</Link> - Convert
+            YAML to JSON format
+          </li>
+          <li>
+            <Link href="/utilities/json-to-yaml">JSON to YAML</Link> - Convert
+            JSON to YAML format
+          </li>
+          <li>
+            <Link href="/utilities/csv-to-json">CSV to JSON</Link> - Convert CSV
+            to JSON format
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}