Data Conversion
XML → JSON Converter
Paste any XML and instantly get beautifully formatted JSON with attribute and text node support.
XML Input
\n
\n
\n
Learn PHP<\/title>\n <author>John Doe<\/author>\n <price currency=\"USD\">29.99<\/price>\n <tags>\n <tag>programming<\/tag>\n <tag>web<\/tag>\n <\/tags>\n <\/book>\n <book id=\"2\">\n <title>Design Patterns<\/title>\n <author>Jane Smith<\/author>\n <price currency=\"USD\">39.99<\/price>\n <\/book>\n<\/catalog>"" class="px-3 py-1.5 bg-slate-800 hover:bg-sky-600 rounded-lg text-xs font-bold transition-colors">Load Sample</button> <button type="button" onclick="document.getElementById('xmlArea').value=''" class="px-3 py-1.5 bg-slate-800 hover:bg-red-700 rounded-lg text-xs font-bold transition-colors">Clear</button> </div> </div> <textarea id="xmlArea" name="xml" rows="18" placeholder="Paste XML here..." class="relative z-10 flex-grow editor bg-slate-900/80 border border-slate-700/50 rounded-xl p-4 text-slate-200 text-sm focus:outline-none focus:border-sky-500 shadow-inner resize-none"></textarea> <button type="submit" class="relative z-10 mt-4 w-full py-3.5 bg-gradient-to-r from-sky-600 to-cyan-600 hover:from-sky-500 hover:to-cyan-500 text-white font-bold rounded-xl shadow-[0_0_15px_rgba(14,165,233,0.4)] transition-all active:scale-[0.98]"> Convert to JSON → </button> </div> <!-- JSON Output --> <div class="glass rounded-3xl p-6 shadow-2xl flex flex-col"> <div class="flex justify-between items-center mb-3"> <h2 class="text-sm font-bold text-slate-400 uppercase tracking-widest">JSON Output</h2> <div class="flex space-x-2"> </div> </div> <div class="flex-grow bg-slate-900/80 border border-slate-700/50 rounded-xl p-4 overflow-auto max-h-[500px]"> <div class="flex flex-col items-center justify-center h-full text-slate-600 text-center py-16"> <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> <p>JSON will appear here</p> </div> </div> </div> </div> </form> <!-- Conversion notes --> <div class="mt-6 glass rounded-3xl p-6 shadow-xl"> <h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-4">Conversion Rules</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-slate-400"> <div class="bg-slate-900/50 rounded-xl p-4"><span class="text-sky-400 font-bold">XML Attributes</span><br>Mapped to keys prefixed with <code class="text-slate-300">@</code></div> <div class="bg-slate-900/50 rounded-xl p-4"><span class="text-sky-400 font-bold">Repeated Elements</span><br>Automatically converted to JSON arrays</div> <div class="bg-slate-900/50 rounded-xl p-4"><span class="text-sky-400 font-bold">Text + Children</span><br>Text content stored as <code class="text-slate-300">#text</code> key</div> </div> </div> </div> <script> function copyJSON() { const el = document.getElementById('jsonOut'); if (el) navigator.clipboard.writeText(el.textContent).then(() => { const btn = event.target; btn.textContent = '✅ Copied'; setTimeout(() => btn.textContent = 'Copy JSON', 2000); }); } // Simple JSON syntax highlighting document.addEventListener('DOMContentLoaded', () => { const el = document.getElementById('jsonOut'); if (!el) return; el.innerHTML = el.textContent.replace(/("(\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, m => { if (/^"/.test(m)) return m.endsWith(':') ? `<span class="tok-key">${m}</span>` : `<span class="tok-str">${m}</span>`; if (/true|false/.test(m)) return `<span class="tok-bool">${m}</span>`; return `<span class="tok-num">${m}</span>`; }); }); </script> </body> </html>