JSON to CSV Tool with colorful styling and all its features use any free library

 

JSON to CSV Converter

body { font-family: Arial, sans-serif; background-color: #f0f4f8; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 90%; max-width: 600px; } h1 { text-align: center; color: #4a90e2; } textarea { width: 100%; height: 150px; margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: none; font-size: 14px; } button { background-color: #4a90e2; color: white; border: none; border-radius: 4px; padding: 10px 15px; cursor: pointer; font-size: 16px; width: 100%; } button:hover { background-color: #357ab8; } button:disabled { background-color: #ddd; cursor: not-allowed; } @media (max-width: 600px) { button { padding: 8px 12px; } } document.getElementById('convertBtn').addEventListener('click', () => { const jsonInput = document.getElementById('jsonInput').value; const csvOutput = document.getElementById('csvOutput'); const downloadBtn = document.getElementById('downloadBtn'); try { const jsonData = JSON.parse(jsonInput); const csv = Papa.unparse(jsonData); csvOutput.value = csv; downloadBtn.style.display = 'block'; downloadBtn.onclick = () => downloadCSV(csv); } catch (error) { alert('Invalid JSON input. Please check your JSON format.'); csvOutput.value = ''; downloadBtn.style.display = 'none'; } }); function downloadCSV(csv) { const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.setAttribute('download', 'output.csv'); document.body.appendChild(link); link.click(); document.body.removeChild(link); }