JSON в HTML, который не стыдно вставить в письмо или на сайт
Конфиги, webhook-полезная нагрузка и аналитические выгрузки обычно приходят в JSON. Разработчики читают вложенные объекты; остальные — нет. Эта страница превращает данные в HTML-таблицы или списки для браузера, вики или блока CMS: вставьте или импортируйте JSON, выберите макет, получите разметку с намерением — не отладочный дамп. Многие конвертеры переводят JSON в HTML лишь в узком смысле: одна широкая строка заголовков с точечными путями, рамки по умолчанию, без нормальной типографики. Технически верно, делиться неудобно. Если вы думали «клиенту это не отправлю» — вы знаете пробел. Здесь структура и оформление вместе: режим таблицы для массивов объектов, дерево и список определений для вложенности, широкая плоская таблица для однострочного макета старых сервисов. Полный документ может получить лёгкую тему — Clean, Minimal или Compact — чтобы отступы и шрифт были правильными в предпросмотре до копирования. Преобразование локально в браузере; JSON не загружается. Сырой HTML показывает теги, предпросмотр HTML открывает playground на главной, «Форматировать JSON» приводит в порядок минифицированный вывод из логов.
Конвертировать JSON в HTML с читаемыми таблицами — не стеной из ячеек
Запрос «таблица JSON в HTML» чаще всего значит «показать мой массив таблицей». Режим таблицы так и делает: общие ключи — столбцы, каждый элемент — строка, с `<thead>` и читаемыми ячейками. Один объект — двухколоночная таблица свойств; вложенные значения при необходимости — подтаблица. Нужна старая однострочная форма? Широкая плоская таблица выводит ключи вроде `items.0.name` в одну строку заголовков — как у многих топовых конвертеров: не красиво, но предсказуемо для следующих инструментов. Режим дерева раскладывает объекты и массивы в списки для отладки. Список определений подходит для глоссариев. Не нужно вручную писать `<tr>` или чинить шаблоны.
В почте расходятся встроенные и инлайн-стили — здесь многие спотыкаются. Аккуратный полный экспорт держит типографику и правила таблиц в блоке `<style>` в head. Gmail, Outlook и большинство ESP удаляют эти блоки: письмо уходит, отступы пропадают. Проектируйте со «Встроен.» в панели вывода; перед вставкой в рассылку или транзакционное письмо переключите «Инлайн». Тот же движок, что на странице CSS Inliner, переносит правила в атрибуты `style` и убирает ненужные `<style>`. Keyframes, `:hover` и часть псевдоэлементов не инлайнятся — они в «Примечания», чтобы знать, что не доживёт до входящих.
Открыть конвертерСтильные таблицы по умолчанию
Темы и отступы при экспорте полного документа — не голые border="1" у минимальных сервисов.
Встроен. → Инлайн в один клик
CSS в `<style>` при проектировании, затем переключатель для атрибутов `style` под почту.
Четыре режима макета
Таблица, широкая плоская, дерево и список определений — под форму JSON.
Таблица JSON в HTML и варианты экспорта
От массива API до разметки для вставки — с предпросмотром, темами и опциональным инлайн-CSS для почты.
Таблицы как отчёт, а не отладочная сетка
Массивы объектов получают заголовки столбцов и разделение строк; темы добавляют читаемый шрифт и рамки при полном экспорте. Результат в предпросмотре до копирования — без сюрприза после вставки.
- Читаемые таблицы и темы — не уродливая одна строка
- Встроен. → Инлайн для почты в панели вывода
- Таблица, плоская, дерево и определения
- Локально в браузере
Как на практике конвертировать JSON в HTML
Вставьте или импортируйте JSON
Поместите минифицированный ответ API в левую панель или импортируйте `.json`. «Форматировать JSON» исправит отступы в однострочных логах. Устраните ошибки разбора перед выбором макета.
Выберите макет и тему предпросмотра
Таблица для массивов объектов; дерево или список определений для вложенных документов; широкая плоская — только если нужны столбцы с точечными путями. При скачивании: фрагмент или полный документ и тема — предпросмотр как сохраняемый файл.
Проверьте предпросмотр, затем сырой HTML
Предпросмотр показывает рендер. Сырой HTML — точные теги для копирования. Для браузера или CMS встроенного CSS в полном документе обычно достаточно. Для почты — следующий шаг.
Для почты переключите «Инлайн», затем экспорт
«Инлайн» в шапке вывода переносит правила из `<style>` на элементы. Читайте примечания о пропущенных селекторах. Копируйте HTML, скачайте `.html` или предпросмотр HTML в playground — как у других инструментов.
FAQ: JSON в HTML
Конвертировать JSON в HTML сейчас
Читаемые таблицы, предпросмотр с темой и инлайн-CSS, если цель — почтовый ящик.
JSON в HTML
- Стильные таблицы — не голые рамки
- Встроен. или инлайн-CSS из панели вывода
- Локальное преобразование, копия или скачивание
- No signup; use the tool in the browser
Для почты проверьте после «Инлайн» тестовым письмом — клиенты всё ещё различаются.
Из JSON в HTML, который вы реально отправите
Таблицы с нормальной типографикой — плюс инлайн-стили в один клик для почты.