Нашли ошибку?

JSON Formatter

Форматируем, проверяем и чиним JSON прямо в браузере: текст никуда не отправляется. Ошибки объясняются по-русски, типичные поломки исправляются кнопкой, дубли ключей и опасные числа находятся сами.

Текст никуда не отправляется: разбор, починка и дерево считаются прямо в браузере. Поэтому сюда можно вставлять ответы настоящих API с токенами.

JSON — это ответы API, выгрузки баз и настройки: в них токены, адреса и персональные данные. Часть онлайн-форматтеров отправляет вставленный текст на свой сервер, и проверить это по странице нельзя. У нас разбор, починка и дерево считаются в браузере: можно выключить сеть после открытия страницы, инструмент продолжит работать.

Мы показываем строку и знак, кусок текста со стрелкой в место поломки и объяснение по-русски. А главное — кнопку «Починить»: JSON ломается одними и теми же способами, и почти все они исправляются машинально. Одинарные кавычки, ключи без кавычек, хвостовые запятые, комментарии, «умные» кавычки после Word и мессенджеров, словарь из Python с True и None, NaN и undefined. После починки инструмент перечисляет, что именно поправил, — молча ваш текст никто не переписывает.

Два подвоха, о которых молчат валидаторы

Первый — дубли ключей. Запись {"a": 1, "a": 2} формально валидна, но разборщик молча берёт последнее значение, и половина данных исчезает без единого предупреждения. Мы находим дубли и показываем их с путями.

Второй — большие числа. JavaScript хранит целые точно только до 9007199254740991, всё длиннее округляется: идентификатор 9007199254740993 после разбора превращается в другой. Такие id приходят из баз и мессенджеров постоянно, и ломаются они именно в момент «просто отформатировал». Мы предупреждаем о каждом таком числе и советуем передавать их строками.

Дерево с путями

Большой JSON удобнее смотреть деревом: ветки сворачиваются, у каждой видно число элементов. Щелчок по ключу копирует путь вида $.order.items[0].sku — его можно сразу вставить в код или в jq. Щелчок по значению копирует само значение. Дерево строится лениво, поэтому большие файлы его не вешают.

Другие инструменты

Просмотр исходного кода страницы

Исходный HTML страницы глазами робота Яндекса или Google

Визуальный HTML-редактор

Пишете как в текстовом редакторе — получаете готовый HTML

Код цвета HTML

Код цвета в HEX, RGB, HSL и HSB, с проверкой контраста

Эффект стекла в CSS

Стекло с проверкой читаемости надписи и запасным вариантом

Конвертер CSS в SCSS и обратно

CSS в SCSS со вложенностью и обратно, со сверкой результата

Конструктор сеток CSS Grid

Сетка под три экрана с готовым HTML и проверкой порядка блоков