XML to JSONBy dibyajyoti.mohanta9@gmail.com / March 17, 2026 XML to JSON Converter (Client-side) XML to JSON ConverterConvert XML documents to JSON format — locally in your browser. Paste XML Upload File Fetch URL Enter XML: ';globalMessage.classList.add('text-red-600','font-medium');globalMessage.classList.remove('text-green-600','text-gray-600')}else if(type==='success'){iconSpan.innerHTML='';globalMessage.classList.add('text-green-600','font-medium');globalMessage.classList.remove('text-red-600','text-gray-600')}else{iconSpan.innerHTML='';globalMessage.classList.remove('text-red-600','text-green-600','font-medium');globalMessage.classList.add('text-gray-600')} globalMessage.appendChild(iconSpan);globalMessage.appendChild(document.createTextNode(text));if(type!=='info'&&duration>0){setTimeout(()=>{globalMessage.innerHTML='';globalMessage.classList.remove('text-red-600','text-green-600','font-medium');globalMessage.classList.add('text-gray-600')},duration)}} function updatePreview(jsonObj){try{const spaces=indentSpaces.value==='0'?0:parseInt(indentSpaces.value);const jsonStr=JSON.stringify(jsonObj,null,spaces===0?undefined:spaces);jsonPreview.textContent=jsonStr.length>500?jsonStr.substring(0,500)+'...':jsonStr}catch(e){jsonPreview.textContent='Invalid object for preview'}} prettyPrintXmlBtn.addEventListener('click',()=>{let xml=xmlInput.value;if(!xml.trim())return;let formatted='';let indent=0;const lines=xml.split(/>\s*);for(let i=0;i')+'\n';if(line.match(/^<\w[^>]*[^\/]?>$/g)&&!line.match(/^<\w[^>]*\/>$/))indent++} xmlInput.value=formatted.trim()});function setActiveTab(active){[tabPaste,tabUpload,tabUrl].forEach(tab=>{tab.classList.remove('bg-violet-600','text-white');tab.classList.add('bg-white','text-gray-700','border')});document.querySelectorAll('.panel').forEach(p=>p.classList.add('hidden'));if(active==='paste'){tabPaste.classList.add('bg-violet-600','text-white');tabPaste.classList.remove('bg-white','text-gray-700');panelPaste.classList.remove('hidden')}else if(active==='upload'){tabUpload.classList.add('bg-violet-600','text-white');tabUpload.classList.remove('bg-white','text-gray-700');panelUpload.classList.remove('hidden')}else if(active==='url'){tabUrl.classList.add('bg-violet-600','text-white');tabUrl.classList.remove('bg-white','text-gray-700');panelUrl.classList.remove('hidden')}} tabPaste.addEventListener('click',()=>setActiveTab('paste'));tabUpload.addEventListener('click',()=>setActiveTab('upload'));tabUrl.addEventListener('click',()=>setActiveTab('url'));function updateUploadInfo(){const file=xmlFile.files[0];if(file){if(!file.name.toLowerCase().endsWith('.xml')&&!file.type.includes('xml')&&file.type!=='text/xml'&&file.type!=='application/xml'){showMessage('Please select an XML file.','error');xmlFile.value='';uploadFileInfo.classList.add('hidden');return} uploadFileName.textContent=file.name.length>30?file.name.substring(0,27)+'...':file.name;uploadFileInfo.classList.remove('hidden');const reader=new FileReader();reader.onload=(e)=>{currentXmlContent=e.target.result;currentFileName=file.name.replace(/\.xml$/i,'')+'.json';showMessage(`Loaded XML file`,'success')};reader.readAsText(file)}else{uploadFileInfo.classList.add('hidden');currentXmlContent=null}} xmlFile.addEventListener('change',updateUploadInfo);clearUpload.addEventListener('click',()=>{xmlFile.value='';uploadFileInfo.classList.add('hidden');currentXmlContent=null;showMessage('File cleared','info')});['dragenter','dragover','dragleave','drop'].forEach(ev=>{uploadDropZone.addEventListener(ev,(e)=>e.preventDefault())});['dragenter','dragover'].forEach(ev=>{uploadDropZone.addEventListener(ev,()=>{uploadDropZone.classList.add('border-violet-500','bg-violet-50')})});['dragleave','drop'].forEach(ev=>{uploadDropZone.addEventListener(ev,()=>{uploadDropZone.classList.remove('border-violet-500','bg-violet-50')})});uploadDropZone.addEventListener('drop',(e)=>{const dt=e.dataTransfer;const file=dt.files[0];if(file&&(file.name.toLowerCase().endsWith('.xml')||file.type.includes('xml'))){xmlFile.files=dt.files;updateUploadInfo()}else{showMessage('Please drop an XML file.','error')}});fetchUrlBtn.addEventListener('click',async()=>{const url=urlInput.value.trim();if(!url){showMessage('Please enter a URL','error');return} fetchUrlBtn.disabled=!0;showMessage('Fetching...','info');try{const response=await fetch(url);if(!response.ok)throw new Error(`HTTP ${response.status}`);const xmlText=await response.text();currentXmlContent=xmlText;currentFileName='remote_data.json';showMessage(`Loaded XML from URL`,'success')}catch(err){showMessage('Fetch error: '+err.message,'error');currentXmlContent=null}finally{fetchUrlBtn.disabled=!1}});function xmlToJson(xmlString,ignoreAttrsFlag,alwaysArrayFlag){const parser=new DOMParser();const xmlDoc=parser.parseFromString(xmlString,'application/xml');const parseError=xmlDoc.getElementsByTagName('parsererror');if(parseError.length){throw new Error('Invalid XML: '+parseError[0].textContent)} function convertElement(element){const obj={};const nodeName=element.nodeName;if(!ignoreAttrsFlag&&element.attributes&&element.attributes.length>0){obj['@attributes']={};for(let attr of element.attributes){obj['@attributes'][attr.nodeName]=attr.nodeValue}} const childNodes=element.childNodes;const childCount=childNodes.length;if(childCount===1&&childNodes[0].nodeType===Node.TEXT_NODE){const text=childNodes[0].nodeValue.trim();if(text)obj['#text']=text}else{const elementChildren=[];for(let child of childNodes){if(child.nodeType===Node.ELEMENT_NODE){elementChildren.push(child)}} if(elementChildren.length>0){for(let child of elementChildren){const childName=child.nodeName;const childObj=convertElement(child);if(alwaysArrayFlag){if(!obj[childName])obj[childName]=[];obj[childName].push(childObj)}else{if(obj.hasOwnProperty(childName)){if(!Array.isArray(obj[childName])){obj[childName]=[obj[childName]]} obj[childName].push(childObj)}else{obj[childName]=childObj}}}}} return obj} const root=xmlDoc.documentElement;const rootObj=convertElement(root);return{[root.nodeName]:rootObj}} convertBtn.addEventListener('click',()=>{let xmlText=null;let filename='data.json';if(currentXmlContent){xmlText=currentXmlContent;filename=currentFileName}else{xmlText=xmlInput.value.trim();if(!xmlText){showMessage('Please provide XML data (paste, file, or URL)','error');return} filename='converted.json'} const ignoreAttrsFlag=ignoreAttrs.checked;const alwaysArrayFlag=alwaysArray.checked;const spaces=indentSpaces.value==='0'?0:parseInt(indentSpaces.value);spinner.classList.remove('hidden');convertBtn.disabled=!0;showMessage('Converting...','info');setTimeout(()=>{try{const jsonObj=xmlToJson(xmlText,ignoreAttrsFlag,alwaysArrayFlag);const jsonOutput=JSON.stringify(jsonObj,null,spaces===0?undefined:spaces);updatePreview(jsonObj);const blob=new Blob([jsonOutput],{type:'application/json;charset=utf-8;'});const url=URL.createObjectURL(blob);const link=document.createElement('a');link.href=url;link.download=filename;document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(url);showMessage(`✅ Converted XML to JSON`,'success')}catch(err){showMessage('Conversion error: '+err.message,'error');jsonPreview.textContent='Error: '+err.message}finally{spinner.classList.add('hidden');convertBtn.disabled=!1}},50)});setActiveTab('paste');xmlInput.value='\n \n John Doe\n XML Guide\n \n \n Jane Smith\n Advanced XML\n \n'})() Previous JSON to XMLNext JSON to CSV Related Posts Merge PDF March 16, 2026 / Uncategorized / By dibyajyoti.mohanta9@gmail.com Split PDF March 16, 2026 / Uncategorized / By dibyajyoti.mohanta9@gmail.com Leave a Comment Cancel ReplyYour email address will not be published. Required fields are marked *Type here.. Name* Email* Website Save my name, email, and website in this browser for the next time I comment.