What is a collapsible JSON tree?

A view that renders JSON as a hierarchy of expandable nodes instead of flat text. Each object and array can be collapsed to a one-line summary or expanded to show its children, so you can navigate large documents without scrolling through everything.

How is a JSON tree viewer different from a formatter?

A formatter outputs clean, indented text you copy; a tree viewer renders an interactive structure you click through. Use a formatter for output, a viewer for exploration.

Can I collapse and expand individual nodes?

Yes — click any object or array to toggle it, and use collapse all / expand all to reset the whole view. Collapsed nodes show a count of the hidden keys or items.

What if my JSON is invalid?

A tree can only be built from parseable JSON. Repair common errors first with a JSON fixer, or find the exact problem with a validator, then view the cleaned result.

← Tous les articles

May 27, 2026Mis à jour le May 29, 20266 min read

Visualiseur JSON en arbre : explorer JSON comme un arbre repliable

Voyez le JSON comme un arbre interactif et repliable. Dépliez et repliez n'importe quel objet ou tableau pour naviguer dans des payloads grands et imbriqués — dans votre navigateur, sans upload.

Une réponse d'API de 5 000 lignes est illisible en texte brut. Un arbre JSON repliable transforme ce mur de crochets en une structure interactive que tu peux déplier et replier une branche à la fois —— pour que tu trouves le champ qui t'intéresse sans scroller au-delà de tout le reste. Ce guide explique ce qu'est un JSON tree viewer, pourquoi il bat le texte brut pour des données grosses ou profondément imbriquées, et quand attraper un arbre plutôt qu'un formatter ou un validator.

Qu'est-ce qu'un arbre JSON repliable ?

Un JSON tree viewer parse ton JSON et le rend sous forme d'une hiérarchie de nœuds dépliables au lieu d'un bloc plat de texte. Chaque objet {} et tableau [] devient un nœud que tu peux replier sur une seule ligne ou déplier pour révéler ses enfants. C'est la différence entre lire du JSON et le naviguer.

// Replié —— tu vois la forme d'un coup d'œil
{
  "user": {…},        ▶ 6 keys
  "orders": […],      ▶ 24 items
  "meta": {…}         ▶ 3 keys
}

Tu cliques sur un nœud et il se déplie ; tu cliques à nouveau et il se replie en un résumé d'une ligne, souvent avec un compte des clés ou éléments cachés. Les données ne changent jamais —— seule la quantité que tu regardes.

Pourquoi un arbre bat un mur de texte

Le formatage (pretty-print) rend le JSON lisible, mais un gros document pretty-printed reste des milliers de lignes que tu dois scroller. Un arbre ajoute de la structure que tu peux contrôler :

Données profondément imbriquées —— fichiers de config, manifestes Kubernetes et réponses GraphQL s'imbriquent sur de nombreux niveaux. Replie les branches qui ne t'intéressent pas et la section pertinente remonte.
Grosses réponses d'API —— replie un tableau de 500 éléments sur une seule ligne, déplie juste celui que tu débugges.
Payloads inconnus —— tout replier au niveau supérieur te donne une carte instantanée de la forme d'une API avant d'écrire la moindre ligne de code de parsing.
Comparer la structure —— les nœuds repliés facilitent la vue des sections que deux payloads ont en commun.

Déplier, replier et naviguer

Un bon JSON tree viewer t'offre plus que le clic-pour-basculer :

Déplier/replier par nœud —— ouvre seulement la branche que tu investigues.
Tout replier / tout déplier —— réinitialise la vue instantanément au lieu de fermer les nœuds un par un.
Compteurs d'éléments et de clés —— un nœud replié montre ▶ 24 items ou ▶ 6 keys pour que tu gardes tes repères.
Coloration syntaxique —— clés, chaînes, nombres, booléens et null reçoivent chacun une couleur distincte, donc les types sont évidents d'un coup d'œil.
Navigation par clé —— saute à un champ sans scroller à travers des milliers de lignes.

Rechercher par chemin : JSONPath et JMESPath

Une fois l'arbre ouvert, la question suivante est généralement « où est cette clé ? ». Deux petits langages de requête te laissent adresser des valeurs par chemin au lieu de cliquer partout :

JSONPath —— inspiré de XPath, standardisé comme RFC 9535. $.user.orders[*].id se lit « chaque id dans user.orders ». Supporte wildcards, slices, filtres (?(@.price > 10)) et descente récursive (..price).
JMESPath —— utilisé par le --query de l'AWS CLI et de nombreux outils cloud. Surface similaire mais avec projections et fonctions de première classe : users[?active].name.

Un tree viewer est pour l'exploration ; JSONPath/JMESPath sont pour l'extraction reproductible. Combine-les : utilise l'arbre pour trouver le chemin, puis capture-le comme expression JSONPath pour des scripts ou dans jq.

Tree viewer vs Formatter vs Validator —— quand utiliser lequel

Tu veux…	Utilise
Naviguer et explorer du JSON gros ou imbriqué	Tree viewer
Obtenir du texte propre et indenté à copier ou commiter	Formatter / pretty-printer
Confirmer que le JSON est syntaxiquement valide et trouver l'erreur	Validator
Voir ce qui a changé entre deux documents	Outil de diff

Ces outils se chevauchent —— la plupart des outils modernes formatent et rendent un arbre —— mais la question qui décide vers lequel tu te tournes est de savoir si tu as besoin de sortie à copier (formatter) ou de structure à explorer (viewer). Pour la comparaison complète, voir JSON Viewer vs JSON Formatter.

Gère le JSON cassé avant de le voir

Un tree viewer a besoin de JSON valide pour construire l'arbre —— il ne peut pas rendre une structure qu'il ne peut pas parser. Si ton entrée a des virgules finales, des apostrophes ou des clés sans guillemets (courant dans la config éditée à la main ou la sortie LLM), répare-le d'abord. Un bon viewer répare automatiquement les erreurs courantes avant le rendu ; sinon, nettoie-le avec JSON Fix ou vérifie l'erreur exacte avec le validator. Pour les règles sous-jacentes, voir Qu'est-ce que JSON ?

Foire aux questions

Qu'est-ce qu'un arbre JSON repliable ?

Une vue qui rend le JSON comme une hiérarchie de nœuds dépliables au lieu de texte plat. Chaque objet et tableau peut être replié en un résumé d'une ligne ou déplié pour montrer ses enfants, donc tu peux naviguer dans de gros documents sans scroller à travers tout.

En quoi un JSON tree viewer est-il différent d'un formatter ?

Un formatter sort du texte propre et indenté que tu copies ; un tree viewer rend une structure interactive que tu cliques. Utilise un formatter pour la sortie, un viewer pour l'exploration. Voir la comparaison complète.

Puis-je replier et déplier des nœuds individuels ?

Oui —— clique sur n'importe quel objet ou tableau pour le basculer, et utilise « collapse all » / « expand all » pour réinitialiser toute la vue. Les nœuds repliés montrent un compte des clés ou éléments cachés.

Que se passe-t-il si mon JSON est invalide ?

Un arbre ne peut être construit qu'à partir de JSON parsable. Répare d'abord les erreurs courantes avec JSON Fix, ou trouve le problème exact avec le JSON validator, puis vois le résultat nettoyé.

Explore ton JSON comme un arbre

Colle n'importe quel JSON dans le JSON Viewer de fixjson et il rend un arbre repliable instantané —— déplie et replie n'importe quel nœud, vois les compteurs d'éléments, et navigue dans de gros payloads imbriqués. Il répare le JSON cassé avant le rendu, et tout tourne dans ton navigateur, donc rien n'est envoyé.

JSON Viewer —— explore du JSON comme un arbre repliable
JSON Viewer vs JSON Formatter —— quel outil pour ta tâche
Comment formater du JSON —— pretty-print sortie texte lisible
JSON Diff —— compare deux documents JSON côte à côte
Qu'est-ce que JSON ? —— les types de données et règles derrière l'arbre