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.

Edytuj JSON online jako kod i jako drzewo

Edytor JSON pokazuje kod JSON i dane jako drzewo obok siebie. Zwijaj obiekty i tablice, oglądaj typ i liczbę wpisów każdej wartości i zmieniaj klucze i wartości bezpośrednio w drzewie - zmiana trafia do kodu dokładnie w tym miejscu, a reszta pliku zachowuje swoje formatowanie. Błędy są wymienione z wierszem i kolumną, a dane można sprawdzić względem JSON Schema i przekształcić w YAML, CSV lub XML.

Wszystko działa w przeglądarce. Dokumenty nie są nigdzie wysyłane, nie ma rejestracji ani reklam.

Co potrafi edytor

Kod i drzewo

Podświetlony JSON po lewej, zwijane drzewo pośrodku. Kliknięcie w drzewie przenosi do kodu, kursor kodu zaznacza swoją wartość w drzewie, a ścieżka ($.items[3].name) jest zawsze widoczna.

Edycja w drzewie

Zmieniaj klucze i wartości, dodawaj, duplikuj, przesuwaj i usuwaj wpisy, zmieniaj typ - każda zmiana to mała edycja kodu, jeden krok dla Cofnij.

Błędy, które łatwo znaleźć

Brakujący przecinek lub cudzysłów, powtórzone klucze i wartości niezgodne z twoim JSON Schema, każdy z wierszem i kolumną. Czytany jest też JSON z komentarzami i JSON5.

Wyszukiwanie

Szukaj kluczy i wartości; każde trafienie jest zaznaczone w drzewie, Enter przechodzi do następnego.

Konwersja

Formatuj, minifikuj i sortuj klucze albo konwertuj do YAML, CSV (tablica obiektów to tabela) i XML. Pliki YAML, CSV i XML otwierają się jako JSON.

Wiele dokumentów

Przechowuj w przeglądarce dowolną liczbę dokumentów, każdy z własną historią cofania, i pobierz je wszystkie jako ZIP.

Jak to działa

  1. Start - wybierz szablon w menu „Nowy”, otwórz plik .json lub wklej JSON.
  2. Edycja - w kodzie lub w drzewie; oba zawsze pokazują te same dane.
  3. Sprawdzenie i eksport - popraw wymienione problemy, wybierz schemat i pobierz JSON, YAML, CSV lub tekst.

Edytor na własnej stronie

Każda strona https (i localhost) może osadzić edytor za pomocą <iframe> i ?embed=1 - bez rejestracji, bez klucza. Po osadzeniu edytor ukrywa ten tekst i pokazuje przycisk Zapisz. Dokument można przekazywać do edytora i z niego na dwa sposoby.

1. Otwieranie pliku z linku, zapis na twoim serwerze

src= otwiera plik (twój serwer musi zezwalać na CORS), webhook= sprawia, że „Zapisz” (Ctrl+S) wysyła dokument pod ten adres. Dodaj &token=…, aby wysyłać nagłówek Authorization: Bearer …, i &auto, aby zapisywać po każdej zmianie.

<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>

Webhook otrzymuje żądanie POST z JSON { editor: "json", event: "save", id, name, content, updated }; content to dokument jako tekst. Mały skrypt PHP, który go zapisuje:

<?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. Dokument przechowuje twoja strona (postMessage)

Edytor zgłasza jsoneditor:ready, twoja strona odpowiada jsoneditor:load, edytor zgłasza jsoneditor:loaded, jsoneditor:change przy rzeczywistych zmianach i jsoneditor:save, gdy użytkownik zapisuje. Twoja strona może wysłać jsoneditor:get (bieżący stan) lub jsoneditor:save (naciśnięcie Zapisz). Zapis odbywa się wtedy przez twoje własne logowanie i sesję.

<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') {              // edytor jest gotowy: przekaż mu dokument
    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';   // rzeczywista zmiana
  if (m.type === 'jsoneditor:save') {               // użytkownik kliknął „Zapisz”
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Przycisk zapisu na twojej stronie: odpowiedź przychodzi jako jsoneditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>

Asystent AI na twojej stronie: działa także w ramce. Z allow="clipboard-write" w iframe „Kopiuj prompt” korzysta bezpośrednio ze schowka (w przeciwnym razie edytor używa starego polecenia kopiowania albo pokazuje prompt do ręcznego skopiowania). Link wysłany przez AI nie dotrze do edytora osadzonego w innej stronie, więc edytor prosi AI i użytkownika o wklejenie całej odpowiedzi AI do edytora - albo o otwarcie edytora we własnym oknie.

3. We własnym oknie

window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") otwiera pełny edytor we własnym oknie, który wymienia te same wiadomości z window.opener. Linki od AI docierają do niego tam. jsoneditor:load może też zawierać context: { host, title, rules } - prompt dla AI mówi wtedy, gdzie należy dokument, i stosuje twoje zasady - oraz hook: { url, token }, webhook tylko dla tego dokumentu, który nigdy nie jest zapisywany. Zamknięcie okna z niezapisanymi zmianami wysyła jsoneditor:closing.

4. AI przez twój własny serwer

Przekaż edytorowi własny prompt, adres w twojej witrynie i klucz dla tej sesji edytora. Okno AI pokazuje wtedy „Połączono z” twoją witryną, to, co przekazujesz AI, oraz wybór: zmienić bieżący dokument lub utworzyć nowy; Kopiuj prompt łączy to wszystko. AI wysyła swój wynik z kluczem na twój serwer, a twoja strona otwiera go w edytorze - nowy dokument otwiera się osobno i zostaje w przeglądarce użytkownika. Jeden klucz na sesję edytora: pozostaje ważny, dopóki edytor jest otwarty, a edytor prosi o niego przez jsoneditor:key-request tylko wtedy, gdy go nie ma. Edytor nigdy sam nie wysyła klucza i nigdy go nie zapisuje; adres musi być adresem https na twoim własnym hoście lub jego subdomenie.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // jeden klucz na sesję edytora
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);
// zapamiętaj id z jsoneditor:loaded i ignoruj change/save/closing z innym id
// tylko gdy edytor nie ma klucza:
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// dopóki edytor jest otwarty, informuj serwer co minutę; zamknięcie edytora lub strony unieważnia klucz
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// twój serwer ma wynik (polling, SSE …): target to "current" lub "new"
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Twórz klucze z co najmniej 128 losowymi bitami, przechowuj tylko ich hash, wiąż każdy z zalogowanym użytkownikiem, dokumentem i tą sesją edytora, twórz jeden na sesję, utrzymuj go ważnym tylko wtedy, gdy twoja strona zgłasza sesję jako otwartą, i unieważniaj go, gdy edytor lub strona zostaną zamknięte.

Cały protokół jest opisany w llms.txt - przekaż go AI, a zbuduje połączenie dla twojego systemu. Edytor YAML działa tak samo z prefiksem yamleditor: - yaml.giit.ch.

Najczęstsze pytania

Czy moje dane są gdzieś wysyłane?

Nie. Edytor działa w całości w przeglądarce. Dokumenty nigdy nie są wysyłane na serwer, chyba że sam skonfigurujesz webhook do własnego serwera.

Czy mogę edytować dane w drzewie?

Tak. Kliknij klucz lub wartość w drzewie, wpisz tekst i naciśnij Enter. Zmiana jest zapisywana w kodzie dokładnie w tym miejscu - reszta zachowuje swoje formatowanie - a Cofnij ją wycofuje. Przyciski nad drzewem dodają, duplikują, przesuwają i usuwają wpisy oraz zmieniają typ wartości.

Czy czyta JSON z komentarzami lub JSON5?

Tak. Komentarze, przecinki na końcu, pojedyncze cudzysłowy i klucze bez cudzysłowów są czytane i pokazywane w drzewie z uwagą, że nie są zwykłym JSON. „Formatuj” zapisuje zwykły JSON.

Jak sprawdzić JSON względem schematu?

Otwórz lub wklej JSON Schema jako drugi dokument, a potem wybierz go w karcie Schemat. Każde niezgodne miejsce jest wymienione z wierszem i kolumną. Edytor nigdy nie pobiera schematu z internetu - adres $schema w dokumencie jest tylko pokazywany.

Czy może przekształcić JSON w YAML, CSV lub XML?

Tak, w karcie Konwersja lub w Eksporcie. CSV wymaga tablicy obiektów - każdy obiekt to wiersz. Otwierane pliki YAML, CSV i XML są przekształcane w JSON.

Gdzie zapisywane są moje dokumenty?

Tylko w przeglądarce. Kliknij przycisk folderu w lewym górnym rogu (Moje dokumenty), aby je otwierać, zmieniać ich nazwy, duplikować, pobierać lub usuwać. Wyczyszczenie danych witryny w przeglądarce je usuwa, więc pobierz te, które chcesz zachować - albo pozwól edytorowi wysyłać je na własny serwer („Zapis na serwerze”).

Czy AI może pisać w Edytorze JSON?

Tak, każda AI - ChatGPT, Claude, Gemini, Copilot lub AI w twoim narzędziu programistycznym. Kliknij „Asystent AI”, potem „Kopiuj prompt”, wklej go do swojej AI i napisz, co ma zmienić. AI odpowiada linkiem; kliknij go, a dane pojawią się w edytorze. „Cofnij” cofa każdą zmianę.

Czy Edytor JSON coś kosztuje?

Nie. Edytor jest darmowy, bez reklam i bez rejestracji.