xml.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON to XML & XML to JSON Converter — attributes preserved | JSON Studio</title>
<meta name="description" content="Convert JSON to XML and XML to JSON in your browser. Attributes become @-prefixed keys, text content becomes #text, and repeated elements become arrays. Uses the browser's own parser. Free, no upload.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://jsonstudio.msdevbuild.com/xml.html">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#0078d4" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#12151c" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="JSON Studio">
<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">

<meta property="og:type" content="website">
<meta property="og:title" content="JSON to XML & XML to JSON Converter — attributes preserved">
<meta property="og:description" content="Convert JSON to XML and XML to JSON in your browser. Attributes become @-prefixed keys, text content becomes #text, and repeated elements become arrays. Uses the browser's own parser. Free, no upload.">
<meta property="og:url" content="https://jsonstudio.msdevbuild.com/xml.html">
<meta property="og:image" content="https://jsonstudio.msdevbuild.com/assets/img/og-cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="JSON Studio — every JSON tool, in your browser">
<meta property="og:site_name" content="JSON Studio by MSDEVBUILD">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://jsonstudio.msdevbuild.com/assets/img/og-cover.png">
<meta name="twitter:title" content="JSON to XML & XML to JSON Converter — attributes preserved">
<meta name="twitter:description" content="Convert JSON to XML and XML to JSON in your browser. Attributes become @-prefixed keys, text content becomes #text, and repeated elements become arrays. Uses the browser's own parser. Free, no upload.">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/convert.css">
<link rel="stylesheet" href="assets/css/present.css">
<link rel="stylesheet" href="assets/css/workbench.css">
<link rel="stylesheet" href="assets/css/tool-focus.css">
<link rel="stylesheet" href="assets/css/editor.css">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "JSON to XML & XML to JSON converter — JSON Studio",
  "url": "https://jsonstudio.msdevbuild.com/xml.html",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any (runs in browser)",
  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
  "creator": { "@type": "Person", "name": "Suthahar Jegatheesan", "url": "https://www.msdevbuild.com/" },
  "description": "Convert JSON to XML or XML to JSON in your browser, with attributes preserved. Free, client-side, nothing uploaded."
}
</script>
<script>(function(){try{var t=localStorage.getItem('json-studio-theme');if(!t&&window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "JSON Studio", "item": "https://jsonstudio.msdevbuild.com/" },
        { "@type": "ListItem", "position": 2, "name": "Tools", "item": "https://jsonstudio.msdevbuild.com/tools.html" },
        { "@type": "ListItem", "position": 3, "name": "JSON ⇄ XML", "item": "https://jsonstudio.msdevbuild.com/xml.html" }
      ]
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        { "@type": "Question", "name": "How are XML attributes represented in JSON?", "acceptedAnswer": { "@type": "Answer", "text": "As keys prefixed with @ — so <item sku=\"K\"> becomes {\"@sku\": \"K\"}. Element text alongside attributes becomes \"#text\". Converting back turns them into real attributes again." } },
        { "@type": "Question", "name": "What happens to repeated elements?", "acceptedAnswer": { "@type": "Answer", "text": "Repeated sibling elements with the same name become a JSON array, and an array in JSON becomes repeated elements on the way back." } },
        { "@type": "Question", "name": "Does my JSON need a single root?", "acceptedAnswer": { "@type": "Answer", "text": "XML does. If your JSON has one top-level key it is used as the root element; otherwise the document is wrapped in the root element you name." } }
      ]
    },
    {
      "@type": "HowTo",
      "name": "How to use the JSON ⇄ XML",
      "step": [
        { "@type": "HowToStep", "position": 1, "text": "Paste JSON or XML — the direction is detected from the first character." },
        { "@type": "HowToStep", "position": 2, "text": "Set the root element name (used when your JSON has more than one top-level key) and the indentation." },
        { "@type": "HowToStep", "position": 3, "text": "Copy or download the converted document." }
      ]
    }
  ]
}
</script>
</head>
<body>

<div id="site-header"></div>
<span id="top"></span>

<main class="convert-shell">
  <div class="convert-head">
    <div class="container tool-topbar">
      <h1>JSON ⇄ XML</h1>
      <p class="tt-sub">Convert either direction with attributes and text content preserved.</p>
      <a class="tt-about" href="#about">About &amp; FAQ ↓</a>
    </div>
    <div class="container">
      <div class="opt-bar">
        <div class="opt">
          <label>Direction</label>
          <div class="dir-pill" id="dir-pill">
            <button type="button" data-dir="auto" class="on">Auto</button>
            <button type="button" data-dir="j2x">JSON → XML</button>
            <button type="button" data-dir="x2j">XML → JSON</button>
          </div>
        </div>
        <div class="opt-sep"></div>
        <div class="opt">
          <label for="opt-rootname">Root element</label>
          <input type="text" id="opt-rootname" value="root" style="min-width:110px;">
        </div>
        <div class="opt">
          <label for="opt-indent">Indent</label>
          <select id="opt-indent">
            <option value="2" selected>2 spaces</option>
            <option value="4">4 spaces</option>
            <option value="0">Minified</option>
          </select>
        </div>
        <div class="opt">
          <input type="checkbox" id="opt-decl" checked>
          <label for="opt-decl" style="cursor:pointer;">XML declaration</label>
        </div>
      </div>
    </div>
  </div>
  <div class="convert-grid">
    <section class="pane">
      <div class="pane-head">
        <div class="pane-title"><span id="in-label">Input</span></div>
        <button id="btn-sample-json">Sample JSON</button>
        <button id="btn-sample-xml">Sample XML</button>
        <button id="btn-upload">Upload</button>
        <button id="btn-clear">Clear</button>
        <input type="file" id="file-input" accept=".json,.xml,.txt" style="display:none;">
      </div>
      <div class="pane-body">
        <textarea id="input" class="code-area" spellcheck="false" placeholder="Paste JSON or XML — or drop a file."></textarea>
      </div>
      <div class="pane-status" id="in-status">Waiting for input.</div>
    </section>

    <section class="pane">
      <div class="pane-head">
        <div class="pane-title"><span id="out-label">Output</span></div>
        <button class="primary" id="btn-run">Convert</button>
        <button id="btn-swap">Use as input ⇄</button>
        <button id="btn-copy">Copy</button>
        <button id="btn-download">Download</button>
      </div>
      <div class="pane-body">
        <textarea id="output" class="code-area" spellcheck="false" readonly placeholder="Converted output appears here."></textarea>
        <p class="note">XML parsing uses the browser&rsquo;s own DOMParser — no external library, and no entity expansion beyond what the browser allows.</p>
      </div>
      <div class="pane-status" id="out-status"></div>
    </section>
  </div>
</main>










<section class="tool-home" id="about">
  <div class="container">
    <div class="th-more">Reference</div>
    <header class="th-head">
      <div class="kicker">JSON ⇄ XML</div>
      <h2>About the JSON ⇄ XML converter</h2>
      <p>SOAP services, RSS feeds and older enterprise systems still speak XML. Converting between the two formats is lossy unless attributes are handled properly, so this maps XML attributes to @-prefixed keys and text content to #text, which means the round trip keeps its meaning. XML parsing uses the browser's own DOMParser rather than a hand-rolled parser.</p>
      <div class="cta-row">
        <a class="btn-primary" href="#top">Use the tool ↑</a>
        <a class="btn-secondary btn-present" href="presentation.html"><svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M12 17v3M9.5 20h5"/><path d="m10.6 8.8 4 2.7-4 2.7z" fill="currentColor" stroke="none"/></svg> Present it</a>
      </div>
    </header>

    <div class="th-features">
      <div class="th-feature">
        <div class="fi">01</div>
        <h3>Attributes preserved</h3>
        <p>XML attributes become @-prefixed keys and text becomes #text, so the round trip keeps meaning.</p>
      </div>
      <div class="th-feature">
        <div class="fi">02</div>
        <h3>Repeats become arrays</h3>
        <p>Repeated sibling elements collapse into a JSON array, and expand back into elements.</p>
      </div>
      <div class="th-feature">
        <div class="fi">03</div>
        <h3>The browser's own parser</h3>
        <p>DOMParser does the reading — no third-party XML library, no hand-rolled parser.</p>
      </div>
      <div class="th-feature">
        <div class="fi">04</div>
        <h3>Formatting control</h3>
        <p>Root element name, indentation, and whether to emit the XML declaration.</p>
      </div>
    </div>

    <div class="seo-grid">
      <div class="seo-main">
        <h3 id="how">How to use it</h3>
        <ol class="seo-steps">
          <li>Paste JSON or XML — the direction is detected from the first character.</li>
          <li>Set the root element name (used when your JSON has more than one top-level key) and the indentation.</li>
          <li>Copy or download the converted document.</li>
        </ol>

        <h3 id="faq">Questions</h3>
        <div class="faq">
          <details>
            <summary>How are XML attributes represented in JSON?</summary>
            <div class="faq-body"><p>As keys prefixed with @ — so &lt;item sku="K"&gt; becomes {"@sku": "K"}. Element text alongside attributes becomes "#text". Converting back turns them into real attributes again.</p></div>
          </details>
          <details>
            <summary>What happens to repeated elements?</summary>
            <div class="faq-body"><p>Repeated sibling elements with the same name become a JSON array, and an array in JSON becomes repeated elements on the way back.</p></div>
          </details>
          <details>
            <summary>Does my JSON need a single root?</summary>
            <div class="faq-body"><p>XML does. If your JSON has one top-level key it is used as the root element; otherwise the document is wrapped in the root element you name.</p></div>
          </details>
        </div>
      </div>

      <aside class="seo-side">
        <div class="seo-card" id="share">
          <h3>Share this tool</h3>
          <p>Send it to a colleague — the link only, never anything you have pasted in.</p>
          <div data-share data-share-title="JSON ⇄ XML — JSON Studio"></div>
        </div>
        <div class="seo-card">
          <h3 class="with-ico"><svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M12 17v3M9.5 20h5"/><path d="m10.6 8.8 4 2.7-4 2.7z" fill="currentColor" stroke="none"/></svg> Present this tool</h3>
          <p>Demoing to a client or a class? Press <kbd>Shift</kbd><kbd>P</kbd> for full-screen presentation mode — chrome hidden, type scaled up, laser pointer included.</p>
          <a class="seo-link" href="presentation.html">How presentation mode works →</a>
        </div>
        <div class="seo-card">
          <h3>Related tools</h3>
          <ul class="seo-related">
            <li><a href="yaml-json.html"><span class="ri">Y↔J</span>YAML ⇄ JSON</a></li>
            <li><a href="csv.html"><span class="ri">J↔C</span>JSON ⇄ CSV</a></li>
            <li><a href="format.html"><span class="ri">⌗</span>Formatter & validator</a></li>
          </ul>
          <a class="seo-link" href="tools.html">All 14 tools →</a>
        </div>
        <div class="seo-card quiet">
          <h3>Private by construction</h3>
          <p>No backend exists. Everything on this page runs in your browser, so nothing you paste is uploaded, logged or retained.</p>
          <a class="seo-link" href="privacy.html">Read the privacy policy →</a>
        </div>
      </aside>
    </div>
  </div>
</section>

<div id="site-footer"></div>

<script src="assets/js/site.js"></script>
<script src="assets/js/payload-link.js"></script>
<script src="assets/js/tool-kit.js"></script>
<script src="assets/js/xml.js"></script>
<script src="assets/js/present.js"></script>
<script src="assets/js/workbench.js"></script>
<script src="assets/js/history.js"></script>
<script src="assets/js/gutter.js"></script>
<script src="assets/js/editor.js"></script>
<script src="assets/js/share.js"></script>
</body>
</html>