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

 

JSON to Text Converter

Converted Text

body { font-family: Arial, sans-serif; background-color: #f0f4f8; color: #333; margin: 0; padding: 20px; } .container { max-width: 600px; margin: auto; padding: 20px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { color: #4a90e2; } textarea { width: 100%; height: 200px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; font-size: 14px; resize: none; } button { background-color: #4caf50; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-top: 10px; } button:hover { background-color: #45a049; } h2 { color: #4a90e2; margin-top: 20px; } pre { background-color: #f9f9f9; padding: 10px; border: 1px solid #ddd; border-radius: 4px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } document.getElementById('convertBtn').addEventListener('click', function() { const jsonInput = document.getElementById('jsonInput').value; const textOutput = document.getElementById('textOutput'); try { const jsonObject = JSON.parse(jsonInput); const convertedText = jsonToText(jsonObject); textOutput.textContent = convertedText; } catch (error) { textOutput.textContent = 'Invalid JSON: ' + error.message; } }); function jsonToText(jsonObject) { let result = ''; function recursiveText(obj, indent = '') { for (const key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object' && obj[key] !== null) { result += `${indent}${key}:\n`; recursiveText(obj[key], indent + ' '); } else { result += `${indent}${key}: ${obj[key]}\n`; } } } } recursiveText(jsonObject); return result.trim(); }