JSON Editor online
Code

Export

My documents

Click a document to open it. They are stored only in this browser - nothing is uploaded. Clearing the browser's site data removes them, so download the ones you want to keep.

AI Assistant

Any AI can work with you - ChatGPT, Claude, Gemini, Copilot.

  1. Click Copy prompt.
  2. Paste it into your AI and say what it should change.
The AI should

The document travels in the link after the “#”, which no server sees. What you paste into your AI is handled by its provider.

Save to your server

The editor can send each saved version to your own server (a webhook), so your work is kept where you want it. Nothing is sent until you enter an address here.

What your server receives

A POST request with JSON (your server must allow CORS from https://json.giit.ch); content is the document as a string:

{ "editor": "json", "event": "save", "id": "…", "name": "Settings",
  "content": "{\n  \"debug\": false\n}\n",
  "updated": "2026-01-15T09:30:00.000Z" }
Embed the editor in your website 
<iframe src="https://json.giit.ch/?embed=1" style="width:100%;height:80vh;border:0"></iframe>
<script>
const frame = document.querySelector('iframe');
addEventListener('message', e => {
  if (e.origin !== 'https://json.giit.ch' || e.source !== frame.contentWindow) return;
  if (e.data.type === 'jsoneditor:ready')
    frame.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings',
      content: JSON.stringify(settings, null, 2) }, 'https://json.giit.ch');
  if (e.data.type === 'jsoneditor:save') saveOnYourServer(e.data.content);
});
</script>

Also possible: ?src=<URL of a .json file> opens a file, &webhook=<URL> saves this document there. The editor can also open in a window of its own (?embed=window), and your page can hand it its own AI prompt and a session key so the AI sends its result to your server (jsoneditor:ai, jsoneditor:key-request) - see "Use the editor on your own website" below the editor. Details are in llms.txt.

Help

How it works

  1. Write JSON on the left - or start with New and one of the templates. The tree in the middle shows the data as you type: objects and arrays fold, every value shows its type, {3} and [5] count the entries.
  2. Click a key or a value in the tree to change it right there. Enter or a click elsewhere writes the change into the code at exactly that place (one step for Undo), Escape cancels. The buttons above the tree add, duplicate, move and remove entries and change the type of a value.
  3. A click in the tree puts the code's cursor on that value; the cursor in the code marks its value in the tree. The path of the selected value ($.items[3].name) is below the tree.
  4. Problems (a missing comma, a duplicate key, what does not fit the schema) are listed above the code with line and column - click one to go there.
  5. Value on the right shows the selected key and value; Insert adds entries and pieces of code; Convert formats the document or converts it to YAML, CSV or XML; Schema checks it against a JSON Schema from your documents.
  6. My documents (the folder button at the top left) lists every document kept in this browser. Export saves it as JSON, minified JSON, YAML, CSV or text.

Keyboard shortcuts

↑ ↓ ← →
In the tree: go up and down, fold and unfold
Enter
In the tree: change the value (F2: the key)
Delete
In the tree: remove the entry
Alt + ↑ / ↓
In the tree: move the entry up / down
Ctrl + F
Search keys and values in the tree
Ctrl + Shift + F
Format the document
Tab / Shift + Tab
Indent / outdent in the code
Ctrl + Z / Y
Undo / redo
Ctrl + S / E
Save (download, or to your server) / export
Ctrl + O
My documents

Quotes and brackets close by themselves around a selection; Enter after { or [ indents the next line.

Редактируйте JSON онлайн - как код и как дерево

Редактор JSON показывает ваш код JSON и данные в виде дерева рядом. Сворачивайте объекты и массивы, смотрите тип и число записей каждого значения и меняйте ключи и значения прямо в дереве - изменение попадает в код ровно в это место, а остальной файл сохраняет своё форматирование. Ошибки перечислены со строкой и столбцом, а данные можно проверить по JSON Schema и преобразовать в YAML, CSV или XML.

Всё работает в вашем браузере. Документы никуда не загружаются, нет регистрации и нет рекламы.

Что умеет редактор

Код и дерево

Подсвеченный JSON слева, сворачиваемое дерево посередине. Щелчок в дереве переходит к коду, курсор кода отмечает своё значение в дереве, путь ($.items[3].name) виден всегда.

Правка в дереве

Меняйте ключи и значения, добавляйте, дублируйте, перемещайте и удаляйте записи, меняйте тип - каждое действие как небольшая правка кода, один шаг для «Отменить».

Ошибки, которые легко найти

Пропущенная запятая или кавычка, повторяющиеся ключи и значения, не соответствующие вашей JSON Schema, - каждая со строкой и столбцом. JSON с комментариями и JSON5 тоже читаются.

Поиск

Ищите по ключам и значениям; каждое совпадение отмечается в дереве, Enter переходит к следующему.

Преобразование

Форматируйте, сжимайте и сортируйте ключи или преобразуйте в YAML, CSV (массив объектов становится таблицей) и XML. Файлы YAML, CSV и XML открываются как JSON.

Много документов

Храните в браузере любое количество документов, у каждого своя история отмен, и скачивайте их все одним ZIP.

Как это работает

  1. Начните - выберите шаблон в меню «Новый», откройте файл .json или вставьте JSON.
  2. Редактируйте - в коде или в дереве; оба всегда показывают одни и те же данные.
  3. Проверьте и экспортируйте - исправьте перечисленные проблемы, выберите схему и скачайте JSON, YAML, CSV или текст.

Редактор на вашем сайте

Любая страница на https (и localhost) может встроить редактор через <iframe> и ?embed=1 - без регистрации и без ключа. Во встроенном виде редактор скрывает этот текст и показывает кнопку «Сохранить». Есть два способа передать документ в редактор и получить его обратно.

1. Открыть файл по ссылке, сохранять на ваш сервер

src= открывает файл (ваш сервер должен разрешать CORS), webhook= заставляет «Сохранить» (Ctrl+S) отправлять документ на этот адрес. Добавьте &token=… для заголовка Authorization: Bearer … и &auto, чтобы сохранять после каждого изменения.

<iframe src="https://json.giit.ch/?embed=1&src=https://your-site.com/config/app.json&webhook=https://your-site.com/save.php"
        allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>

Вебхук получает POST с JSON { editor: "json", event: "save", id, name, content, updated }; content - это документ в виде строки. Небольшой PHP-скрипт, который его сохраняет:

<?php
header('Access-Control-Allow-Origin: https://json.giit.ch');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: POST, OPTIONS');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
if (($_SERVER['HTTP_AUTHORIZATION'] ?? '') !== 'Bearer SECRET') { http_response_code(403); exit; }
$d = json_decode(file_get_contents('php://input'), true);
$name = preg_replace('/[^\w\- ]/u', '_', $d['name']);
file_put_contents(__DIR__ . "/config/$name.json", $d['content']);
echo '{"ok":true}';

2. Документ хранит ваша страница (postMessage)

Редактор сообщает jsoneditor:ready, ваша страница отвечает jsoneditor:load, редактор сообщает jsoneditor:loaded, jsoneditor:change при настоящих правках и jsoneditor:save, когда пользователь сохраняет. Ваша страница может отправить jsoneditor:get (текущее состояние) или jsoneditor:save (нажать «Сохранить»). Сохранение тогда идёт через ваш собственный вход и сеанс.

<iframe id="ed" src="https://json.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://json.giit.ch';

addEventListener('message', async e => {
  if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
  const m = e.data;
  if (m.type === 'jsoneditor:ready') {              // редактор готов: передаём ему документ
    ed.contentWindow.postMessage({
      type: 'jsoneditor:load',
      name: 'Settings',
      content: await (await fetch('/config/app.json')).text()
    }, ORIGIN);
  }
  if (m.type === 'jsoneditor:change') document.title = '● not saved';   // настоящая правка
  if (m.type === 'jsoneditor:save') {               // пользователь нажал «Сохранить»
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Кнопка сохранения на вашей странице: ответ приходит как jsoneditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>

ИИ-ассистент внутри вашей страницы: он работает и во фрейме. С allow="clipboard-write" на iframe кнопка «Копировать промпт» напрямую использует буфер обмена (иначе редактор переходит на старую команду копирования или показывает промпт для ручного копирования). Ссылка, которую присылает ИИ, не может попасть в редактор внутри другого сайта, поэтому редактор просит ИИ и пользователя вставить весь ответ ИИ в редактор - или открыть редактор в отдельном окне.

3. В отдельном окне

window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") открывает полный редактор в отдельном окне и обменивается теми же сообщениями с window.opener. Ссылки от ИИ попадают туда. jsoneditor:load может также содержать context: { host, title, rules } - тогда промпт для ИИ говорит, к чему относится документ, и следует вашим правилам, - и hook: { url, token }, вебхук только для этого документа, который никогда не сохраняется. При закрытии окна с несохранёнными изменениями отправляется jsoneditor:closing.

4. ИИ через ваш собственный сервер

Передайте редактору свой промпт, адрес на вашем сайте и ключ для этого сеанса редактора. Тогда диалог ИИ показывает «Подключено к» вашему сайту, что вы сообщаете ИИ, и выбор изменить текущий документ или создать новый; Копировать промпт собирает всё вместе. ИИ отправляет свой результат с ключом на ваш сервер, а ваша страница открывает его в редакторе - новый документ открывается отдельно и остаётся в браузере пользователя. Один ключ на сеанс редактора: он действует, пока редактор открыт, и только пока ключа нет, редактор запрашивает его через jsoneditor:key-request. Редактор никогда сам не отправляет ключ и никогда не сохраняет его; адрес должен быть https на вашем собственном хосте или его поддомене.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // один ключ на сеанс редактора
const k = await key();
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content, ai: {
  label: 'My Site', prompt: 'Keep every key. Only change values.',
  endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// запомните id из jsoneditor:loaded и игнорируйте change/save/closing с другим id
// только пока у редактора нет ключа:
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// пока редактор открыт, сообщайте серверу каждую минуту; закрытие редактора или страницы аннулирует ключ
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// у вашего сервера есть результат (polling, SSE …): target - "current" или "new"
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Создавайте ключи минимум из 128 случайных бит, храните только их хеш, привязывайте каждый к вошедшему пользователю, документу и этому сеансу редактора, создавайте один ключ на сеанс, считайте его действительным, только пока ваша страница сообщает, что сеанс открыт, и аннулируйте его, когда редактор или страница закрываются.

Весь протокол описан в llms.txt - дайте его ИИ, и он построит подключение для вашей системы. Редактор YAML работает так же с префиксом yamleditor: - yaml.giit.ch.

Частые вопросы

Мои данные куда-то загружаются?

Нет. Редактор полностью работает в вашем браузере. Ваши документы никогда не отправляются на сервер, если только вы сами не настроите вебхук на свой собственный сервер.

Можно ли редактировать данные в дереве?

Да. Щёлкните по ключу или значению в дереве, введите новое и нажмите Enter. Изменение записывается в код ровно в этом месте - остальное сохраняет своё форматирование, - а «Отменить» возвращает его. Кнопки над деревом добавляют, дублируют, перемещают и удаляют записи и меняют тип значения.

Читает ли он JSON с комментариями или JSON5?

Да. Комментарии, запятые в конце, одинарные кавычки и ключи без кавычек читаются и показываются в дереве с пометкой, что это не обычный JSON. «Форматировать» записывает обычный JSON.

Как проверить мой JSON по схеме?

Откройте или вставьте JSON Schema как второй документ, затем выберите её во вкладке Схема. Каждое несоответствующее место перечисляется со строкой и столбцом. Редактор никогда не скачивает схему из интернета - адрес $schema в документе только показывается.

Может ли он преобразовать JSON в YAML, CSV или XML?

Да, во вкладке Конвертер или в экспорте. Для CSV нужен массив объектов - каждый объект становится строкой. Открываемые файлы YAML, CSV и XML преобразуются в JSON.

Где сохраняются мои документы?

Только в вашем браузере. Нажмите кнопку с папкой вверху слева («Мои документы»), чтобы открывать, переименовывать, дублировать, скачивать или удалять их. Очистка данных сайта в браузере удалит их, поэтому скачайте те, которые хотите сохранить, - или пусть редактор отправляет их на ваш собственный сервер («На сервер»).

Может ли ИИ писать в редакторе JSON?

Да, любой ИИ - ChatGPT, Claude, Gemini, Copilot или ИИ в вашем инструменте для программирования. Нажмите «ИИ-ассистент», затем «Копировать промпт», вставьте его в свой ИИ и скажите, что нужно изменить. ИИ ответит ссылкой; щёлкните по ней, и данные появятся в вашем редакторе. «Отменить» возвращает любое изменение.

Сколько стоит редактор JSON?

Нисколько. Редактор бесплатный, без рекламы и без регистрации.