Travailler avec du JSON profondément imbriqué, c’est comme naviguer dans un labyrinthe les yeux bandés. On scrolle à travers des centaines de lignes en essayant de comprendre la forme des données — quelles clés existent, à quel niveau de profondeur, où sont les tableaux. Et si vous pouviez tout voir d’un seul coup ?

Le problème du JSON brut

La plupart des développeurs interagissent avec le JSON dans un éditeur de texte. Ça fonctionne pour les petits payloads, mais les données réelles sont rarement petites :

Les réponses API de services comme GitHub, Stripe ou Shopify peuvent faire des centaines de lignes
Les fichiers de configuration (Terraform, Docker Compose, package.json) ont des structures imbriquées complexes
Les exports de base de données contiennent des tableaux d’objets avec des schémas variables

Lire du texte brut vous oblige à construire un modèle mental de la structure. C’est lent, source d’erreurs et épuisant pour les gros fichiers.

Visualisation en graphe : voir la structure instantanément

Une vue en graphe transforme le JSON en un arbre de nœuds connectés. Chaque clé devient un nœud, et l’imbrication devient des arêtes. Vous pouvez immédiatement voir :

La profondeur : combien de niveaux contiennent les données
La largeur : combien de clés existent à chaque niveau
Tableaux vs objets : un traitement visuel différent les rend immédiatement distinguables
Les valeurs feuilles : les données réelles aux extrémités de l’arbre

Comment JSON Lens le fait

JSON Lens utilise un algorithme d’auto-layout (Dagre) pour disposer les nœuds dans un arbre lisible. Voici ce qui le rend utile :

Déplier et replier

Pas besoin de tout voir en même temps. Cliquez sur n’importe quel nœud pour déplier ou replier ses enfants. Commencez par une vue d’ensemble, puis explorez les sections qui comptent.

Détection intelligente des formats

Quand vous dépliez un nœud, JSON Lens ne montre pas juste des valeurs brutes. Il détecte automatiquement des formats comme :

URLs — affichées comme des liens cliquables
Dates — montrées dans un format lisible
UUIDs — identifiés et étiquetés
JWTs — header et payload décodés
Adresses IP, codes pays, devises, et bien plus

Mode schéma

Passez en mode schéma pour voir la structure de types inférée au lieu des valeurs réelles. C’est inestimable quand vous travaillez avec une API inconnue et que vous avez besoin de comprendre la forme avant d’écrire du code.

Essayez avec vos propres données

Ouvrez JSON Lens
Collez votre JSON (ou YAML, XML, TOML, HTML)
Passez en vue Graphe dans la barre d’outils
Cliquez sur les nœuds pour explorer

L’application tourne entièrement dans votre navigateur — aucune donnée n’est envoyée à un serveur. Elle fonctionne même hors-ligne en tant que PWA.

Quand utiliser la vue graphe vs. les autres vues

Cas d’usage	Meilleure vue
Comprendre la structure globale	Graphe
Naviguer dans de gros datasets	Colonnes Miller
Éditer et reformater	Éditeur de code
Comparer les schémas entre éléments d’un tableau	Mode Schéma

La vue graphe excelle pour l’exploration et la communication. Quand vous devez expliquer une structure de données à votre équipe, une capture d’écran du graphe vaut mille lignes de JSON.