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'u çevrimiçi düzenleyin, kod ve ağaç olarak

JSON Editörü, JSON kodunuzu ve verileri ağaç olarak yan yana gösterir. Nesneleri ve dizileri katlayın, her değerin türünü ve girdi sayısını görün, anahtarları ve değerleri doğrudan ağaçta değiştirin - değişiklik koda tam o yere gider ve dosyanın geri kalanı biçimini korur. Hatalar satır ve sütunuyla listelenir; veriler bir JSON Schema'ya göre kontrol edilebilir ve YAML, CSV veya XML'e dönüştürülebilir.

Her şey tarayıcınızda çalışır. Belgeler yüklenmez; kayıt ve reklam yoktur.

Editörün yapabilecekleri

Kod ve ağaç

Solda vurgulanmış JSON, ortada katlanabilir ağaç. Ağaçta bir tıklama koda atlar, kod imleci ağaçta değerini işaretler, yol ($.items[3].name) her zaman gösterilir.

Ağaçta düzenleyin

Anahtarları ve değerleri değiştirin, girdi ekleyin, çoğaltın, taşıyın ve kaldırın, bir türü değiştirin - her biri kodda küçük bir düzenleme olarak, Geri al için tek adım.

Bulabileceğiniz hatalar

Eksik bir virgül veya tırnak, yinelenen anahtarlar ve JSON Schema'nıza uymayan değerler, her biri satır ve sütunuyla. Yorumlu JSON ve JSON5 de okunur.

Arama

Anahtarlarda ve değerlerde arayın; her eşleşme ağaçta işaretlenir, Enter bir sonrakine gider.

Dönüştürme

Biçimlendirin, küçültün ve anahtarları sıralayın ya da YAML, CSV (nesnelerden oluşan bir dizi bir tablodur) ve XML'e dönüştürün. YAML, CSV ve XML dosyaları JSON olarak açılır.

Çok sayıda belge

Tarayıcınızda kendi geri alma geçmişleriyle istediğiniz sayıda belge saklayın ve hepsini bir ZIP olarak indirin.

Nasıl çalışır

  1. Başlayın - "Yeni" altından bir şablon seçin, bir .json dosyası açın veya JSON yapıştırın.
  2. Düzenleyin - kodda veya ağaçta; ikisi de her zaman aynı verileri gösterir.
  3. Kontrol edin ve dışa aktarın - listelenen sorunları düzeltin, bir şema seçin ve JSON, YAML, CSV veya metin indirin.

Editörü kendi web sitenizde kullanın

Her https sayfası (ve localhost) editörü bir <iframe> ve ?embed=1 ile yerleştirebilir - kayıt yok, anahtar yok. Yerleştirildiğinde editör bu metni gizler ve bir Kaydet düğmesi gösterir. Belgeyi içeri almanın ve dışarı vermenin iki yolu vardır.

1. Bir bağlantıdan dosya açın, sunucunuza kaydedin

src= bir dosya açar (sunucunuz CORS'a izin vermelidir), webhook= ise "Kaydet"in (Ctrl+S) belgeyi o adrese göndermesini sağlar. Authorization: Bearer … başlığı için &token=…, her değişiklikten sonra kaydetmek için &auto ekleyin.

<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, JSON içeren bir POST alır: { editor: "json", event: "save", id, name, content, updated }; content dize olarak belgedir. Bunu saklayan küçük bir PHP betiği:

<?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. Belgeyi sayfanız tutar (postMessage)

Editör jsoneditor:ready der, sayfanız jsoneditor:load ile yanıt verir, editör jsoneditor:loaded, gerçek düzenlemelerde jsoneditor:change ve kullanıcı kaydettiğinde jsoneditor:save bildirir. Sayfanız jsoneditor:get (geçerli durum) veya jsoneditor:save (Kaydet'e basma) gönderebilir. Kaydetme böylece kendi oturum açma ve oturum sisteminiz üzerinden yapılır.

<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') {              // editör hazır: belgeyi ona verin
    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';   // gerçek bir düzenleme
  if (m.type === 'jsoneditor:save') {               // kullanıcı "Kaydet"e tıkladı
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Kendi sayfanızda bir kaydet düğmesi: yanıt jsoneditor:save olarak gelir
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>

Sayfanızın içinde Yapay Zekâ Asistanı: çerçeve içinde de çalışır. iframe üzerinde allow="clipboard-write" ile "İstemi kopyala" panoyu doğrudan kullanır (aksi halde editör eski kopyalama komutuna geri döner veya istemi elle kopyalamanız için gösterir). Yapay zekânın gönderdiği bir bağlantı başka bir web sitesinin içindeki editöre ulaşamaz; bu yüzden editör, yapay zekâya ve kullanıcıya bunun yerine yapay zekânın yanıtının tamamını editöre yapıştırmasını söyler - veya editörü kendi penceresinde açın.

3. Kendi penceresinde

window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") tam editörü kendi penceresinde açar ve aynı mesajları window.opener ile konuşur. Yapay zekâdan gelen bağlantılar ona orada ulaşır. jsoneditor:load ayrıca context: { host, title, rules } taşıyabilir - yapay zekâ istemi bu durumda belgenin nereye ait olduğunu söyler ve kurallarınıza uyar - ve hook: { url, token }, yalnızca bu belge için olan ve asla saklanmayan bir webhook. Kaydedilmemiş değişikliklerle pencereyi kapatmak jsoneditor:closing gönderir.

4. Kendi sunucunuz üzerinden yapay zekâ

Editöre kendi isteminizi, sitenizde bir adresi ve bu editör oturumu için bir anahtarı verin. Yapay zekâ iletişim kutusu bu durumda sitenize "Bağlı" olduğunu, yapay zekâya ne söylediğinizi ve geçerli belgeyi değiştir veya yeni bir belge oluştur seçimini gösterir; İstemi kopyala hepsini bir araya getirir. Yapay zekâ sonucunu anahtarla sunucunuza gönderir ve sayfanız onu editörde açar - yeni bir belge ayrı açılır ve kullanıcının tarayıcısında kalır. Editör oturumu başına bir anahtar: editör açık olduğu sürece geçerli kalır ve editör yalnızca anahtarı yokken jsoneditor:key-request ile ister. Editör anahtarı asla kendisi göndermez ve asla saklamaz; adres kendi alan adınızda veya onun bir alt alan adında https olmalıdır.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // editör oturumu başına bir anahtar
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);
// jsoneditor:loaded içindeki id'yi hatırlayın ve başka id'li change/save/closing mesajlarını yok sayın
// yalnızca editörün anahtarı yokken:
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// editör açıkken sunucunuza her dakika bildirin; editörü veya sayfayı kapatmak anahtarı geçersiz kılar
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// sunucunuzda bir sonuç var (polling, SSE …): target "current" veya "new" olur
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Anahtarları en az 128 rastgele bitle oluşturun, yalnızca özetlerini (hash) saklayın, her birini oturum açmış kullanıcıya, belgeye ve bu editör oturumuna bağlayın, oturum başına bir tane oluşturun, yalnızca sayfanız oturumu açık bildirdiği sürece geçerli tutun ve editör veya sayfa kapandığında geçersiz kılın.

Protokolün tamamı llms.txt dosyasındadır - bir yapay zekâya verin, sisteminiz için bağlantıyı o kursun. YAML Editörü yamleditor: önekiyle aynı şekilde çalışır - yaml.giit.ch.

Sıkça sorulan sorular

Verilerim yükleniyor mu?

Hayır. Editör tamamen tarayıcınızda çalışır. Kendi sunucunuza bir webhook kurmadığınız sürece belgeleriniz asla bir sunucuya gönderilmez.

Verileri ağaçta düzenleyebilir miyim?

Evet. Ağaçta bir anahtara veya değere tıklayın, yazın ve Enter'a basın. Değişiklik koda tam o yere yazılır - geri kalanı biçimini korur - ve Geri al onu geri alır. Ağacın üstündeki düğmeler girdi ekler, çoğaltır, taşır, kaldırır ve bir değerin türünü değiştirir.

Yorumlu JSON'u veya JSON5'i okuyor mu?

Evet. Yorumlar, sondaki virgüller, tek tırnaklar ve tırnaksız anahtarlar okunur ve ağaçta gösterilir; düz JSON olmadıklarına dair bir notla birlikte. "Biçimlendir" düz JSON yazar.

JSON'umu bir şemaya göre nasıl kontrol ederim?

JSON Schema'yı ikinci bir belge olarak açın veya yapıştırın, sonra Şema sekmesinde seçin. Uymayan her yer satır ve sütunuyla listelenir. Editör internetten asla şema indirmez - belgedeki bir $schema adresi yalnızca gösterilir.

JSON'u YAML, CSV veya XML'e dönüştürebilir mi?

Evet, Dönüştür sekmesinde veya Dışa aktar altında. CSV nesnelerden oluşan bir dizi gerektirir - her nesne bir satırdır. Açtığınız YAML, CSV ve XML dosyaları JSON'a dönüştürülür.

Belgelerim nereye kaydediliyor?

Yalnızca tarayıcınıza. Belgeleri açmak, yeniden adlandırmak, çoğaltmak, indirmek veya silmek için sol üstteki klasör düğmesine (Belgelerim) tıklayın. Tarayıcınızın site verilerini temizlemek onları siler; bu yüzden saklamak istediklerinizi indirin - veya editörün onları kendi sunucunuza göndermesine izin verin ("Sunucuya kaydet").

Bir yapay zekâ JSON Editöründe yazabilir mi?

Evet, her yapay zekâ - ChatGPT, Claude, Gemini, Copilot veya kodlama aracınızdaki yapay zekâ. "Yapay Zekâ Asistanı"na, ardından "İstemi kopyala"ya tıklayın, istemi yapay zekânıza yapıştırın ve neyi değiştirmesi gerektiğini söyleyin. Yapay zekâ bir bağlantıyla yanıt verir; ona tıklayın, veriler editörünüzde görünür. "Geri al" her değişikliği geri alır.

JSON Editörü ücretli mi?

Hayır. Editör ücretsizdir; reklam ve kayıt yoktur.