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?

Ні. Редактор безкоштовний, без реклами й без реєстрації.