← Назад к Apps

JSON Formatter & Beautifier

Удобный онлайн JSON Formatter. Вставь JSON в одну строку или с ошибками — инструмент красиво отформатирует его с отступами, подсветкой синтаксиса и проверкой ошибок. Можно сжать обратно (minify) и скопировать результат. Очень полезный скрипт.

▶ Запустить

👁 43

let root = container;

const jsonContainer = document.createElement('div');
jsonContainer.style.maxWidth = '780px';
jsonContainer.style.margin = '0 auto';

const textarea = document.createElement('textarea');
textarea.placeholder = 'Вставьте JSON сюда...';
textarea.style.width = '100%';
textarea.style.height = '280px';
textarea.style.padding = '14px';
textarea.style.background = '#111';
textarea.style.color = '#00ff9c';
textarea.style.border = '1px solid #00ff9c';
textarea.style.fontFamily = 'monospace';
textarea.style.fontSize = '15px';

const btnContainer = document.createElement('div');
btnContainer.style.margin = '12px 0';

const formatBtn = document.createElement('button');
formatBtn.textContent = 'Форматировать';
formatBtn.style.padding = '12px 20px';
formatBtn.style.marginRight = '8px';
formatBtn.style.background = '#111';
formatBtn.style.color = '#00ff9c';
formatBtn.style.border = '1px solid #00ff9c';
formatBtn.style.cursor = 'pointer';

const minifyBtn = document.createElement('button');
minifyBtn.textContent = 'Сжать';
minifyBtn.style.padding = '12px 20px';
minifyBtn.style.marginRight = '8px';
minifyBtn.style.background = '#111';
minifyBtn.style.color = '#00ff9c';
minifyBtn.style.border = '1px solid #00ff9c';
minifyBtn.style.cursor = 'pointer';

const copyBtn = document.createElement('button');
copyBtn.textContent = 'Скопировать';
copyBtn.style.padding = '12px 20px';
copyBtn.style.background = '#00ff9c';
copyBtn.style.color = '#000';
copyBtn.style.border = 'none';
copyBtn.style.cursor = 'pointer';
copyBtn.style.fontWeight = 'bold';

const output = document.createElement('pre');
output.style.background = '#000';
output.style.padding = '16px';
output.style.minHeight = '200px';
output.style.border = '1px solid #00ff9c';
output.style.whiteSpace = 'pre';
output.style.overflow = 'auto';
output.style.fontSize = '14px';

jsonContainer.append(textarea, btnContainer, output);
btnContainer.append(formatBtn, minifyBtn, copyBtn);
root.appendChild(jsonContainer);

function formatJSON(minify) {
    let input = textarea.value.trim();
    if (!input) {
        output.textContent = '// Вставьте JSON';
        output.style.color = '#888';
        return;
    }

    try {
        const parsed = JSON.parse(input);
        let result = minify ? JSON.stringify(parsed) : JSON.stringify(parsed, null, 4);
        output.textContent = result;
        output.style.color = '#00ff9c';
    } catch (e) {
        output.textContent = 'Ошибка: ' + e.message;
        output.style.color = '#ff4d4d';
    }
}

formatBtn.onclick = () => formatJSON(false);
minifyBtn.onclick = () => formatJSON(true);

copyBtn.onclick = () => {
    if (output.textContent.startsWith('//') || output.textContent.startsWith('Ошибка')) {
        alert("Нет данных для копирования");
        return;
    }
    navigator.clipboard.writeText(output.textContent).then(() => {
        const original = copyBtn.textContent;
        copyBtn.textContent = 'Скопировано!';
        setTimeout(() => copyBtn.textContent = original, 2000);
    });
};