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.

Edita JSON online, como código y como árbol

El Editor de JSON muestra tu código JSON y los datos como árbol uno al lado del otro. Pliega objetos y arrays, ve el tipo y el número de entradas de cada valor, y cambia claves y valores directamente en el árbol: el cambio va al código exactamente en ese lugar, y el resto del archivo conserva su formato. Los errores aparecen con línea y columna, y los datos se pueden validar con un JSON Schema y convertir a YAML, CSV o XML.

Todo se ejecuta en tu navegador. Los documentos no se suben, no hay registro ni publicidad.

Lo que puede hacer el editor

Código y árbol

JSON resaltado a la izquierda, el árbol plegable en el centro. Un clic en el árbol salta al código, el cursor del código marca su valor en el árbol y la ruta ($.items[3].name) siempre está visible.

Edita en el árbol

Cambia claves y valores, añade, duplica, mueve y quita entradas, cambia un tipo: cada cosa como una pequeña edición del código, un paso para Deshacer.

Errores que puedes encontrar

Una coma o unas comillas que faltan, claves repetidas y valores que no cumplen tu JSON Schema, cada uno con su línea y columna. También se leen JSON con comentarios y JSON5.

Búsqueda

Busca claves y valores; cada coincidencia se marca en el árbol, Enter va a la siguiente.

Convertir

Formatea, minifica y ordena claves, o convierte a YAML, CSV (un array de objetos es una tabla) y XML. Los archivos YAML, CSV y XML se abren como JSON.

Muchos documentos

Guarda todos los documentos que quieras en tu navegador, cada uno con su propio historial de deshacer, y descárgalos todos como ZIP.

Cómo funciona

  1. Empieza: elige una plantilla en «Nuevo», abre un archivo .json o pega JSON.
  2. Edita: en el código o en el árbol; ambos muestran siempre los mismos datos.
  3. Valida y exporta: corrige los problemas de la lista, elige un esquema y descarga JSON, YAML, CSV o texto.

Usa el editor en tu propio sitio web

Cualquier página https (y localhost) puede integrar el editor con un <iframe> y ?embed=1, sin registro y sin clave. Integrado, el editor oculta este texto y muestra un botón Guardar. Hay dos formas de meter y sacar el documento.

1. Abrir un archivo desde un enlace, guardar en tu servidor

src= abre un archivo (tu servidor debe permitir CORS), webhook= hace que «Guardar» (Ctrl+S) envíe el documento a esa dirección. Añade &token=… para una cabecera Authorization: Bearer … y &auto para guardar después de cada cambio.

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

El webhook recibe un POST con JSON { editor: "json", event: "save", id, name, content, updated }; content es el documento como cadena. Un pequeño script PHP que lo guarda:

<?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. Tu página guarda el documento (postMessage)

El editor dice jsoneditor:ready, tu página responde con jsoneditor:load, el editor informa con jsoneditor:loaded, con jsoneditor:change en cada edición real y con jsoneditor:save cuando el usuario guarda. Tu página puede enviar jsoneditor:get (el estado actual) o jsoneditor:save (pulsar Guardar). Así el guardado pasa por tu propio inicio de sesión y tu sesión.

<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') {              // el editor está listo: pásale el documento
    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';   // una edición real
  if (m.type === 'jsoneditor:save') {               // el usuario hizo clic en «Guardar»
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Un botón de guardar en tu propia página: la respuesta llega como jsoneditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>

Asistente de IA dentro de tu página: también funciona en el marco. Con allow="clipboard-write" en el iframe, «Copiar prompt» usa el portapapeles directamente (si no, el editor recurre al antiguo comando de copiar o muestra el prompt para copiarlo a mano). Un enlace que envía la IA no puede llegar a un editor dentro de otro sitio web, así que el editor indica a la IA y al usuario que peguen la respuesta completa de la IA en el editor, o que abran el editor en una ventana propia.

3. En una ventana propia

window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") abre el editor completo en su propia ventana y usa los mismos mensajes con window.opener. Ahí sí le llegan los enlaces de una IA. jsoneditor:load también puede llevar context: { host, title, rules } (el prompt de IA dice entonces a dónde pertenece el documento y sigue tus reglas) y hook: { url, token }, un webhook solo para este documento que nunca se guarda. Al cerrar la ventana con cambios sin guardar se envía jsoneditor:closing.

4. IA a través de tu propio servidor

Pasa al editor tu propio prompt, una dirección en tu sitio y una clave para esta sesión del editor. El diálogo de IA muestra entonces «Conectado a» tu sitio, lo que le dices a la IA y la opción cambiar el documento actual o crear uno nuevo; Copiar prompt lo junta todo. La IA envía su resultado con la clave a tu servidor, y tu página lo abre en el editor: un documento nuevo se abre aparte y se queda en el navegador del usuario. Una clave por sesión del editor: sigue siendo válida mientras el editor esté abierto, y solo mientras no tenga ninguna el editor la pide con jsoneditor:key-request. El editor nunca envía la clave por sí mismo ni la guarda; la dirección debe ser https en tu propio host o en un subdominio suyo.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // una clave por sesión del editor
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);
// recuerda el id de jsoneditor:loaded e ignora change/save/closing con otro id
// solo mientras el editor no tenga clave:
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// mientras el editor esté abierto, avisa a tu servidor cada minuto; cerrar el editor o la página anula la clave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// tu servidor tiene un resultado (polling, SSE …): target es «current» o «new»
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Crea claves con al menos 128 bits aleatorios, guarda solo su hash, vincula cada una al usuario con sesión iniciada, al documento y a esta sesión del editor, crea una por sesión, mantenla válida solo mientras tu página informe de que la sesión está abierta, y anúlala cuando se cierre el editor o la página.

El protocolo completo está en llms.txt: dáselo a una IA y construirá la conexión para tu sistema. El Editor de YAML funciona igual con el prefijo yamleditor:: yaml.giit.ch.

Preguntas frecuentes

¿Se suben mis datos?

No. El editor se ejecuta por completo en tu navegador. Tus documentos nunca se envían a un servidor, salvo que tú mismo configures un webhook a tu propio servidor.

¿Puedo editar los datos en el árbol?

Sí. Haz clic en una clave o un valor del árbol, escribe y pulsa Enter. El cambio se escribe en el código exactamente en ese lugar (el resto conserva su formato) y Deshacer lo revierte. Los botones encima del árbol añaden, duplican, mueven y quitan entradas y cambian el tipo de un valor.

¿Lee JSON con comentarios o JSON5?

Sí. Los comentarios, las comas finales, las comillas simples y las claves sin comillas se leen y se muestran en el árbol, con un aviso de que no son JSON puro. «Formatear» escribe JSON puro.

¿Cómo valido mi JSON con un esquema?

Abre o pega el JSON Schema como segundo documento y elígelo en la pestaña Esquema. Cada lugar que no lo cumple aparece con su línea y columna. El editor nunca descarga un esquema de internet: una dirección $schema en el documento solo se muestra.

¿Puede convertir JSON a YAML, CSV o XML?

Sí, en la pestaña Convertir o en Exportar. CSV necesita un array de objetos: cada objeto es una fila. Los archivos YAML, CSV y XML que abres se convierten a JSON.

¿Dónde se guardan mis documentos?

Solo en tu navegador. Haz clic en el botón de carpeta arriba a la izquierda (Mis documentos) para abrirlos, renombrarlos, duplicarlos, descargarlos o eliminarlos. Si borras los datos del sitio en tu navegador, desaparecen; descarga los que quieras conservar, o deja que el editor los envíe a tu propio servidor («Guardar en servidor»).

¿Puede una IA escribir en el Editor de JSON?

Sí, cualquier IA: ChatGPT, Claude, Gemini, Copilot o la IA de tu herramienta de programación. Haz clic en «Asistente de IA» y luego en «Copiar prompt», pégalo en tu IA y dile qué debe cambiar. La IA responde con un enlace; haz clic en él y los datos aparecen en tu editor. «Deshacer» revierte cada cambio.

¿Cuesta algo el Editor de JSON?

No. El editor es gratuito, sin anuncios y sin registro.