Visualiseur d'arbre JSON, gratuit

JSON, le format de données qui a gagné

Douglas Crockford a publié JSON sur json.org en 2001 comme alternative légère à XML, tirant la syntaxe directement des littéraux d'objet JavaScript. Le format a d'abord été normalisé en tant qu'Internet-Draft IETF dans la RFC 4627 (juillet 2006), puis révisé en RFC 7159 (mars 2014), et finalement fixé dans la RFC 8259 (décembre 2017), qui est la norme actuelle et est alignée avec ECMA-404 (1ère édition octobre 2013, 2e édition décembre 2017). La RFC 8259 a ajouté une exigence importante : l'encodage au niveau réseau doit être UTF-8. Deux specs complémentaires complètent l'écosystème : RFC 6901 « JSON Pointer » (avril 2013) définit la syntaxe /store/book/0/title pour adresser les nœuds à l'intérieur d'un document, et RFC 6902 « JSON Patch » définit un document JSON qui décrit les changements à appliquer à un autre document JSON. JSON Schema (brouillon IETF actuel 2020-12) ajoute la validation. Tout le reste construit dessus, JSONC pour les commentaires de fichiers de configuration, JSON5 pour la syntaxe assouplie, NDJSON pour le streaming, est venu après.

Les six types de valeurs JSON (et ce qui manque)

La RFC 8259 §3 définit exactement six types de valeurs. Il n'y a rien d'autre.

• objet, ensemble non ordonné de paires nom-valeur délimitées par des accolades. Les clés sont toujours des chaînes.
• tableau, liste ordonnée de valeurs délimitées par des crochets. Peut contenir des types mixtes.
• chaîne, caractères Unicode entre guillemets doubles. Les guillemets simples ne sont pas du JSON légal.
• nombre, IEEE 754 double précision flottant. La spec ne garantit pas une précision arbitraire ; les nombres au-delà de Number.MAX_SAFE_INTEGER = 2⁵³ − 1 = 9 007 199 254 740 991 perdent en précision lors du parsing.
• true / false, littéraux booléens, minuscules, sans guillemets.
• null, le littéral null, minuscules, sans guillemets. Une clé avec la valeur null est différente d'une clé absente.

Ce que JSON n'a pas : un type date (la convention est une chaîne ISO 8601 avec fuseau horaire), commentaires (utilisez un champ de métadonnées séparé), virgules de fin, chaînes entre guillemets simples, nombres hexadécimaux, undefined, NaN ou Infinity. Tout cela fera lever SyntaxError par JSON.parse.

JSON strict, JSONC, JSON5 : qui est qui

JSON strict (RFC 8259) est ce que ce visualiseur accepte : pas de commentaires, pas de virgules de fin, clés entre guillemets doubles, chaînes entre guillemets doubles. JSONC est une convention Microsoft livrée dans VS Code qui permet les commentaires de ligne // et les commentaires de bloc /* ... */ tout en gardant tout le reste strict ; vous le voyez dans tsconfig.json, .vscode/settings.json, et le package npm jsonc-parser. JSON5 (2017, https://json5.org) est un sur-ensemble qui ajoute les chaînes entre guillemets simples, les clés sans guillemets, les virgules de fin, les nombres hexadécimaux, les valeurs spéciales IEEE 754 (NaN, Infinity), et les commentaires de ligne et de bloc ; le package npm json5 a environ 10 millions de téléchargements hebdomadaires. NDJSON / JSON Lines (https://jsonlines.org) est une variante streaming où chaque ligne est un document JSON indépendant, utilisé par les expéditeurs de logs et les pipelines d'ingestion big-data. Retirez les commentaires et virgules de fin avant de coller si votre source est JSONC ou JSON5.

Où un visualiseur d'arbre gagne vraiment sa croûte

• Inspection de réponse API. Stripe, GitHub, Slack, Twilio : chaque API moderne retourne du JSON imbriqué. Le coller dans un visualiseur d'arbre rend la forme évidente.
• Fichiers de configuration. package.json, tsconfig.json, composer.json, kubeconfig, et la longue traîne des configs JSON des fournisseurs cloud deviennent tous plus faciles à auditer sous forme d'arbre.
• Inspection d'export de base de données. Sortie MongoDB find(), lignes PostgreSQL row_to_json, listes de hits ElasticSearch.
• Découverte de schéma. Quand une API n'a pas de documentation, le visualiseur d'arbre est la documentation.
• Préparation de diff. Avant d'exécuter json-diff ou jq entre deux fichiers, inspectez chacun dans un visualiseur pour repérer manuellement les différences évidentes.
• Inspection de charge utile webhook. Stripe, GitHub, SendGrid et services similaires envoient tous des webhooks JSON. Coller la charge utile dans un visualiseur est le moyen le plus rapide de vérifier ce que votre endpoint va recevoir.
• Création de données d'échantillon. Construisez un fixture de test en tapant du JSON et regardez l'arbre se mettre à jour incrémentalement ; attrape les accolades manquantes avant d'enregistrer le fichier.

Erreurs courantes en travaillant avec JSON

• Virgules de fin. {"a": 1,} est du JavaScript légal mais du JSON illégal. JSON.parse lève SyntaxError: Unexpected token '}'. Retirez-les ou passez à JSON5.
• Commentaires. // comme ça ou /* comme ça */ sont valides en JavaScript et JSONC mais pas en JSON strict.
• Perte de précision sur les grands entiers. Les IDs Twitter et Stripe peuvent dépasser 2⁵³ ; JSON.parse("9007199254740993") retourne 9007199254740992. Recevez-les en chaînes si la précision importe.
• Confondre null avec absent. {"foo": null} a foo défini comme null ; {} a foo indéfini. La distinction importe pour les contrats API et la gestion NULL en base.
• Clés dupliquées. La RFC 8259 dit que le comportement n'est pas défini ; en pratique chaque moteur JS garde la dernière valeur. {"a": 1, "a": 2} parse en {a: 2}.
• Références circulaires. JSON.stringify lève TypeError: Converting circular structure to JSON. Aplatissez les cycles, ou utilisez un replacer, ou une bibliothèque comme flatted.
• Chaînes de date sans fuseau horaire. "2026-05-12" est ambigu ; "2026-05-12T18:30:00Z" est ISO 8601 sans ambiguïté en UTC. Toujours inclure le décalage.

Plus de questions fréquentes

Quelle taille de fichier JSON ce visualiseur peut-il gérer ?

Le parsing de 1 Mo avec JSON.parse prend environ 10 ms dans V8. Le rendu de 100 000 nœuds DOM repliés peut figer le navigateur pendant plusieurs secondes. En pratique, ce visualiseur est confortable jusqu'à environ 5 Mo ; au-delà, attendez-vous à un décalage notable pendant le rendu. Pour les documents plus grands, utilisez un parseur streaming comme stream-json dans un Web Worker, ou paginez l'entrée en morceaux.

Pourquoi mon grand entier revient-il faux ?

Les nombres JavaScript sont des flottants double précision IEEE 754. Les entiers jusqu'à 2⁵³ − 1 = 9 007 199 254 740 991 survivent à un aller-retour exactement ; au-delà, la précision est perdue. Les IDs snowflake Twitter (64 bits), les IDs client Stripe, les IDs de transaction blockchain et de nombreuses clés substitutives de base dépassent cette limite. JSON.parse tronquera silencieusement. Le correctif est soit de recevoir les IDs comme chaînes (la plupart des APIs modernes le font) soit de parser avec une bibliothèque qui supporte BigInt.

Qu'est-ce que JSON Pointer, et où l'utiliserais-je ?

La RFC 6901 (avril 2013) définit une syntaxe de chemin pour adresser les nœuds à l'intérieur d'un document JSON : /store/book/0/title sélectionne le titre du premier livre du tableau store. JSON Pointer est le fondement de JSON Patch (RFC 6902), qui exprime les deltas de document comme des tableaux de paires pointeur-et-opération. Le serveur API Kubernetes utilise JSON Patch pour les mises à jour incrémentales ; tout comme l'API REST de GitHub et de nombreux autres systèmes.

NDJSON / JSON Lines fonctionne-t-il dans ce visualiseur ?

Non. NDJSON est une valeur JSON indépendante par ligne, sans tableau englobant. JSON.parse sur le fichier entier lève car la deuxième ligne commence où le premier objet se termine. Enveloppez tout le contenu dans [ et ] et remplacez chaque nouvelle ligne entre objets par une virgule, ou collez une ligne à la fois, ou utilisez un visualiseur NDJSON dédié.

Mon JSON est-il envoyé quelque part ?

Non. JSON.parse tourne dans le moteur JavaScript de votre navigateur, l'arbre est rendu comme nœuds DOM localement, et aucune copie de vos données n'est envoyée sur le réseau. C'est sûr pour les réponses API avec secrets, données clients ou PII. Ouvrez l'onglet Réseau dans DevTools et collez un échantillon : vous verrez zéro requête sortante pendant le parsing et le rendu.