Fydler UtilityBelt - YAML ↔ JSON Converter

YAML ↔ JSON Converter

Data & Formatting Tool

YAML Input

JSON Output

About YAML & JSON

YAML (YAML Ain't Markup Language) is a human-readable data serialization format often used for configuration files. JSON (JavaScript Object Notation) is a lightweight data interchange format. Both represent structured data and can be converted between each other.

Copied to clipboard!

lucide.createIcons(); let currentMode = 'yaml2json'; function setMode(mode) { currentMode = mode; document.querySelectorAll('.yj-mode-btn').forEach(b => b.classList.remove('btn-primary')); document.querySelectorAll('.yj-mode-btn').forEach(b => b.classList.add('btn-outline')); const btn = mode === 'yaml2json' ? document.getElementById('yj-y2j') : document.getElementById('yj-j2y'); btn.classList.remove('btn-outline'); btn.classList.add('btn-primary'); document.getElementById('yj-input-label').textContent = mode === 'yaml2json' ? 'YAML Input' : 'JSON Input'; document.getElementById('yj-output-label').textContent = mode === 'yaml2json' ? 'JSON Output' : 'YAML Output'; convert(); } function convert() { const input = document.getElementById('yj-input').value; const output = document.getElementById('yj-output'); const error = document.getElementById('yj-error'); if (!input.trim()) { output.value = ''; error.textContent = ''; return; } try { if (currentMode === 'yaml2json') { const obj = jsyaml.load(input); output.value = JSON.stringify(obj, null, 2); } else { const obj = JSON.parse(input); output.value = jsyaml.dump(obj, { indent: 2, lineWidth: -1 }); } error.textContent = ''; } catch(e) { error.textContent = e.message; output.value = ''; } } document.getElementById('yj-input').addEventListener('input', convert); document.getElementById('yj-copy-btn').addEventListener('click', () => { const v = document.getElementById('yj-output').value; if (v) { navigator.clipboard.writeText(v); showToast('Copied!'); } }); 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); }