Fydler UtilityBelt - JSON Formatter & Beautifier

JSON Formatter & Beautifier

Data & Formatting Tool

Input JSON

Output

How it works

This tool parses your JSON input and formats it with consistent indentation (2 spaces) to make it readable. The "Minify" option removes all unnecessary whitespace. All processing happens locally in your browser for maximum privacy.

Copied to clipboard!

lucide.createIcons(); const input = document.getElementById('json-input'); const output = document.getElementById('json-output'); const formatBtn = document.getElementById('format-btn'); const minifyBtn = document.getElementById('minify-btn'); const clearBtn = document.getElementById('clear-btn'); const copyBtn = document.getElementById('copy-btn'); const errorContainer = document.getElementById('error-container'); const errorMessage = document.getElementById('error-message'); formatBtn.addEventListener('click', () => processJSON(2)); minifyBtn.addEventListener('click', () => processJSON(0)); clearBtn.addEventListener('click', () => { input.value = ''; output.value = ''; errorContainer.classList.add('hidden'); }); copyBtn.addEventListener('click', () => { if (output.value) { navigator.clipboard.writeText(output.value); showToast('Copied to clipboard!'); } }); function processJSON(spaces) { errorContainer.classList.add('hidden'); const val = input.value.trim(); if (!val) return; try { const parsed = JSON.parse(val); output.value = JSON.stringify(parsed, null, spaces); } catch (e) { errorContainer.classList.remove('hidden'); errorMessage.textContent = 'Invalid JSON: ' + e.message; output.value = ''; } } function showToast(msg) { const toast = document.getElementById('toast'); const toastMsg = document.getElementById('toast-message'); toastMsg.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); }