Code
L’éditeur JSON affiche votre code JSON et les données sous forme d’arbre côte à côte. Repliez les objets et les tableaux, voyez le type et le nombre d’entrées de chaque valeur, et modifiez les clés et les valeurs directement dans l’arbre - la modification va dans le code exactement à cet endroit, et le reste du fichier garde sa mise en forme. Les erreurs sont listées avec ligne et colonne, et les données peuvent être vérifiées avec un JSON Schema et converties en YAML, CSV ou XML.
Tout fonctionne dans votre navigateur. Les documents ne sont pas envoyés, il n’y a ni inscription ni publicité.
Le JSON coloré à gauche, l’arbre repliable au milieu. Un clic dans l’arbre mène au code, le curseur du code marque sa valeur dans l’arbre, le chemin ($.items[3].name) est toujours affiché.
Modifiez les clés et les valeurs, ajoutez, dupliquez, déplacez et supprimez des entrées, changez un type - chaque fois par une petite modification du code, une seule étape pour Annuler.
Une virgule ou un guillemet manquant, des clés en double et des valeurs non conformes à votre JSON Schema, chacun avec sa ligne et sa colonne. Le JSON avec commentaires et le JSON5 sont lus aussi.
Recherchez dans les clés et les valeurs ; chaque résultat est marqué dans l’arbre, Entrée passe au suivant.
Formatez, minifiez et triez les clés, ou convertissez en YAML, CSV (un tableau d’objets devient un tableau) et XML. Les fichiers YAML, CSV et XML s’ouvrent en JSON.
Conservez autant de documents que vous voulez dans votre navigateur, chacun avec son propre historique d’annulation, et téléchargez-les tous en ZIP.
Toute page https (et localhost) peut intégrer l’éditeur avec une <iframe> et ?embed=1 - sans inscription, sans clé. Intégré, l’éditeur masque ce texte et affiche un bouton Enregistrer. Il y a deux façons de faire entrer et sortir le document.
src= ouvre un fichier (votre serveur doit autoriser CORS), webhook= fait envoyer le document à cette adresse par « Enregistrer » (Ctrl+S). Ajoutez &token=… pour un en-tête Authorization: Bearer … et &auto pour enregistrer après chaque modification.
<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>Le webhook reçoit un POST avec du JSON { editor: "json", event: "save", id, name, content, updated } ; content est le document sous forme de chaîne. Un petit script PHP qui l’enregistre :
<?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}';L’éditeur annonce jsoneditor:ready, votre page répond par jsoneditor:load, l’éditeur signale jsoneditor:loaded, jsoneditor:change lors de vraies modifications et jsoneditor:save quand l’utilisateur enregistre. Votre page peut envoyer jsoneditor:get (l’état actuel) ou jsoneditor:save (appuyer sur Enregistrer). L’enregistrement passe alors par votre propre connexion et votre propre session.
<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') { // l’éditeur est prêt : on lui transmet le document
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'; // une vraie modification
if (m.type === 'jsoneditor:save') { // l’utilisateur a cliqué sur "Save"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Un bouton d’enregistrement sur votre propre page : la réponse arrive sous forme de jsoneditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>L’assistant IA dans votre page : il fonctionne aussi dans le cadre. Avec allow="clipboard-write" sur l’iframe, « Copier le prompt » utilise directement le presse-papiers (sinon l’éditeur se rabat sur l’ancienne commande de copie, ou affiche le prompt à copier à la main). Un lien envoyé par l’IA ne peut pas atteindre un éditeur intégré dans un autre site web : l’éditeur demande donc à l’IA et à l’utilisateur de coller toute la réponse de l’IA dans l’éditeur - ou d’ouvrir l’éditeur dans sa propre fenêtre.
window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") ouvre l’éditeur complet dans sa propre fenêtre et échange les mêmes messages avec window.opener. Les liens d’une IA l’y atteignent. jsoneditor:load peut aussi transporter context: { host, title, rules } - le prompt de l’IA indique alors où se trouve le document et suit vos règles - et hook: { url, token }, un webhook pour ce seul document, jamais stocké. Fermer la fenêtre avec des modifications non enregistrées envoie jsoneditor:closing.
Transmettez à l’éditeur votre propre prompt, une adresse sur votre site et une clé pour cette session de l’éditeur. La boîte de dialogue de l’IA affiche alors « Connecté à » votre site, ce que vous indiquez à l’IA, et le choix modifier le document actuel ou en créer un nouveau ; Copier le prompt assemble le tout. L’IA envoie son résultat avec la clé à votre serveur, et votre page l’ouvre dans l’éditeur - un nouveau document s’ouvre séparément et reste dans le navigateur de l’utilisateur. Une clé par session de l’éditeur : elle reste valable tant que l’éditeur est ouvert, et l’éditeur ne la demande avec jsoneditor:key-request que tant qu’il n’en a pas. L’éditeur n’envoie jamais la clé lui-même et ne la stocke jamais ; l’adresse doit être en https sur votre propre hôte ou sur un de ses sous-domaines.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // une clé par session de l’éditeur
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);
// retenez l’id de jsoneditor:loaded et ignorez change/save/closing portant un autre id
// seulement tant que l’éditeur n’a pas de clé :
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// tant que l’éditeur est ouvert, prévenez votre serveur chaque minute ; fermer l’éditeur ou la page annule la clé
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// votre serveur a un résultat (polling, SSE …) : target vaut "current" ou "new"
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);Créez des clés d’au moins 128 bits aléatoires, ne stockez que leur hash, liez chacune à l’utilisateur connecté, au document et à cette session de l’éditeur, créez-en une par session, ne la gardez valable que tant que votre page signale la session comme ouverte, et annulez-la quand l’éditeur ou la page se ferme.
Le protocole complet se trouve dans llms.txt - donnez-le à une IA et elle construit la connexion pour votre système. L’éditeur YAML fonctionne de la même façon avec le préfixe yamleditor: - yaml.giit.ch.
Non. L’éditeur fonctionne entièrement dans votre navigateur. Vos documents ne sont jamais envoyés à un serveur, sauf si vous configurez vous-même un webhook vers votre propre serveur.
Oui. Cliquez sur une clé ou une valeur dans l’arbre, tapez, et appuyez sur Entrée. La modification est écrite dans le code exactement à cet endroit - le reste garde sa mise en forme - et Annuler la reprend. Les boutons au-dessus de l’arbre ajoutent, dupliquent, déplacent et suppriment des entrées et changent le type d’une valeur.
Oui. Les commentaires, les virgules finales, les apostrophes simples et les clés sans guillemets sont lus et affichés dans l’arbre, avec une remarque indiquant que ce n’est pas du JSON standard. « Formater » écrit du JSON standard.
Ouvrez ou collez le JSON Schema comme deuxième document, puis choisissez-le dans l’onglet Schéma. Chaque endroit non conforme est listé avec sa ligne et sa colonne. L’éditeur ne télécharge jamais de schéma depuis Internet - une adresse $schema dans le document est seulement affichée.
Oui, dans l’onglet Convertir ou sous Exporter. Le CSV nécessite un tableau d’objets - chaque objet est une ligne. Les fichiers YAML, CSV et XML que vous ouvrez sont convertis en JSON.
Uniquement dans votre navigateur. Cliquez sur le bouton dossier en haut à gauche (Mes documents) pour les ouvrir, renommer, dupliquer, télécharger ou supprimer. Effacer les données de site de votre navigateur les supprime : téléchargez ceux que vous voulez garder - ou laissez l’éditeur les envoyer à votre propre serveur (« Enregistrer sur un serveur »).
Oui, n’importe quelle IA - ChatGPT, Claude, Gemini, Copilot ou l’IA de votre outil de développement. Cliquez sur « Assistant IA », puis sur « Copier le prompt », collez-le dans votre IA et dites-lui ce qu’elle doit modifier. L’IA répond par un lien ; cliquez dessus et les données apparaissent dans votre éditeur. « Annuler » revient sur chaque modification.
Non. L’éditeur est gratuit, sans publicité et sans inscription.