JSON Tree Viewer
Explorez le JSON en arbre dépliable et recherchable, plutôt qu'en bloc de texte plat.
Entrée JSON
Arborescence
Saisissez du JSON à gauche pour l'explorer sous forme d'arborescence.
Qu'est-ce que JSON Tree Viewer ?
Un visualiseur d'arbre JSON rend un document JSON en arbre interactif et dépliable, au lieu d'un mur plat de texte indenté — la même expérience de navigation que dans le panneau Network des DevTools d'un navigateur ou la visionneuse de réponse d'un client d'API. Chaque objet et tableau devient un nœud que vous pouvez déplier ou replier indépendamment, les clés et valeurs sont colorées par type (chaînes, nombres, booléens, null), et vous pouvez chercher dans tout le document pour sauter directement vers la clé ou la valeur recherchée au lieu de défiler des centaines de lignes. C'est surtout utile pour les grandes réponses d'API profondément imbriquées ou les fichiers de configuration, où une simple vue mise en forme rend difficile de voir la forme d'ensemble des données ou de trouver un champ précis enfoui plusieurs niveaux plus bas.
Comment utiliser JSON Tree Viewer
- Collez ou tapez votre JSON dans le panneau de gauche.
- L'arbre à droite se rend instantanément — cliquez sur la flèche à côté de tout objet ou tableau pour le déplier ou le replier.
- Utilisez « Expand all » ou « Collapse all » pour contrôler tout l'arbre d'un coup, ou la zone de recherche pour surligner clés/valeurs correspondant à un terme (les branches correspondantes se déplient automatiquement).
- Survolez n'importe quelle ligne et cliquez sur l'icône de copie pour récupérer son chemin (par ex. roles[0].name) pour l'utiliser dans du code ou une requête JSONPath.
Exemples
Explorer une réponse d'API imbriquée
Entrée
{"user": {"id": 1, "roles": [{"name": "Admin"}, {"name": "Editor"}]}}
Sortie
Arbre dépliable : user → roles [2] → {name: "Admin"}, {name: "Editor"}
Copier le chemin d'un champ
Entrée
{"data": {"items": [{"sku": "P001"}]}}
Sortie
Cliquer sur copier sur le champ sku donne : data.items[0].sku
Erreurs courantes
- Essayer d'éditer des valeurs directement dans l'arbre — cet outil est en lecture seule pour l'exploration ; utilisez l'outil JSON Editor si vous devez modifier des valeurs.
- S'attendre à ce que le chemin copié soit une expression JSONPath complète (avec un $ initial) — c'est un chemin simplifié à points/crochets destiné au repérage rapide, pas une chaîne de requête JSONPath.
- Supposer que les branches repliées sont retirées des données — le repliement ne fait que les masquer visuellement ; rien n'est supprimé ni altéré.
Pourquoi utiliser cet outil
- S'exécute entièrement dans votre navigateur — rien de ce que vous collez n'est téléversé nulle part.
- Rend le JSON profondément imbriqué bien plus facile à naviguer qu'une vue plate mise en forme, surtout pour les grandes réponses d'API.
- La copie de chemin en un clic vous évite de compter manuellement les indices de tableau ou les clés imbriquées en écrivant du code contre ces données.