Visualiseur JSON
Visualisez les données JSON sous forme d'arbre interactif. Formatez, minifiez et analysez votre JSON avec des statistiques.
Un visualiseur JSON analyse un document JSON et le dessine sous forme d'arbre indenté et coloré plutôt qu'en bloc de texte. Collez dans la zone Input JSON : le panneau de droite réanalyse 300 ms après la fin de la frappe, chaînes en vert, nombres en bleu, booléens en jaune et null en gris, chaque tableau ou objet portant son nombre d'éléments. Huit compteurs en dessous indiquent clés, chaînes, nombres, booléens, nulls, tableaux, objets et profondeur d'imbrication maximale.
Visualiseur JSON
Le Visualiseur JSON vous permet de coller, formater et explorer des données JSON dans une vue arborescente interactive.
Outils populaires
À propos de Visualiseur JSON
Tout se passe dans la page. Votre JSON est confié au JSON.parse natif du navigateur : ce que vous voyez est donc exactement ce qu'un moteur JavaScript accepterait, sans aller-retour serveur, sans téléversement et sans plafond de taille autre que la mémoire de l'onglet. L'analyse est temporisée de 300 millisecondes, si bien que l'arbre suit la frappe sans se reconstruire à chaque touche.
Le panneau de droite a deux modes. Tree dessine chaque clé en violet suivie de sa valeur dans la couleur de son type, les tableaux apparaissant en [n] et les objets en {n} : la forme d'une charge utile se lit avant même d'en lire le contenu. Raw affiche les mêmes données réanalysées puis resérialisées avec une indentation de deux espaces, utile pour copier une version normalisée plutôt que pour explorer. L'étiquette au-dessus du panneau indique aussi la taille du contenu de la zone de saisie, en octets sous 1 Ko et en kilo-octets au-delà.
La barre d'outils propose Format, qui réécrit la saisie avec une indentation de deux espaces, Minify, qui supprime tout espace et tout retour à la ligne, et Copy, qui place la version formatée à deux espaces dans le presse-papiers. Quatre boutons d'exemple — Simple Object, Nested Data, Array of Objects et API Response — remplacent la saisie par un petit cas concret, le moyen le plus rapide de comprendre les compteurs. Attention : Format, Minify et Copy ne font rien tant que la saisie est invalide.
En cas d'échec d'analyse, la zone de saisie passe au rouge et le message exact de JSON.parse s'affiche dessous, avec la position du problème. C'est tout le diagnostic : cette page est une visionneuse et un formateur, pas un validateur de schéma JSON, pas un outil de requête JSONPath et pas un éditeur — impossible de replier une branche, de chercher dans l'arbre ou de modifier une valeur à droite. Elle attend du JSON strict : virgules finales, apostrophes simples, commentaires et clés sans guillemets sont tous rejetés.
Cas d'utilisation
Comment utiliser
Collez votre JSON dans la zone Input JSON à gauche, ou appuyez sur l'un des boutons d'exemple : Simple Object, Nested Data, Array of Objects ou API Response.
Observez le panneau de droite : il réanalyse environ 300 ms après la fin de la frappe et dessine un arbre coloré, chaînes, nombres, booléens et nulls ayant chacun sa couleur.
Si la zone de saisie devient rouge, lisez la ligne d'erreur en dessous : elle reprend le message du parseur JSON du navigateur et indique la position du problème.
Appuyez sur Format pour réindenter la saisie avec deux espaces, ou sur Minify pour tout ramener sur une seule ligne sans espaces.
Basculez entre les boutons Tree et Raw pour remplacer l'arbre par le texte formaté, et lisez en dessous les compteurs de clés, chaînes, nombres, tableaux, objets et profondeur.
Appuyez sur Copy dans la barre d'outils pour placer le JSON indenté à deux espaces dans le presse-papiers.
Astuces Pro
- Format, Minify et Copy restent silencieusement sans effet tant que le JSON est invalide, car chacun commence par son propre JSON.parse dans un bloc try. Si un bouton semble mort, regardez d'abord la ligne d'erreur rouge sous la saisie.
- Le compteur Depth part de 0 pour une valeur scalaire et ajoute un niveau par imbrication : un objet plat affiche donc 1. C'est le moyen le plus rapide de repérer une charge utile qui exigera un parcours récursif plutôt qu'une simple boucle.
- La taille affichée à côté de Tree View ou Formatted mesure le contenu de la zone de saisie, pas les données analysées. Appuyez sur Minify et elle chute aussitôt : c'est un moyen rapide de voir quelle part de la charge utile n'est que de l'espace.
- Keys compte chaque clé de chaque objet, y compris les noms répétés dans un tableau d'objets : un tableau de trois objets à trois clés affiche donc 9 clés et 1 tableau, pas 3.
- Chargez Array of Objects pour voir comment l'arbre marque les collections : la racine affiche [3] et chaque élément {3}, si bien que les nombres entre crochets donnent la forme sans rien déplier.
Dépannage
Les boutons Format, Minify et Copy ne font rien quand on clique.
Les trois analysent la saisie avant d'agir et avalent l'erreur en cas d'échec : un document invalide les rend donc muets. Regardez la zone de saisie : un contour rouge signale un message d'erreur en dessous, avec la position à corriger.
L'arbre ne se met pas à jour immédiatement pendant la frappe.
L'analyse est temporisée de 300 millisecondes pour ne pas reconstruire l'arbre à chaque touche. Arrêtez-vous un instant et il rattrape ; si ce n'est toujours pas le cas, le document est invalide et le panneau de droite conserve la dernière analyse valide.
Un fichier de configuration accepté par mon éditeur est refusé ici.
Les éditeurs acceptent souvent le JSON with Comments ou le JSON5, qui autorisent commentaires, virgules finales et clés sans guillemets. Cette page utilise le JSON.parse strict. Retirez les commentaires et la virgule finale, mettez des guillemets doubles autour de chaque clé, ou ne collez que la partie strictement JSON.
La page se fige un instant après le collage d'une grosse charge utile.
L'analyse, le rendu de l'arbre et le parcours statistique s'exécutent tous sur le fil principal : un document de plusieurs mégaoctets bloque donc l'interface le temps du traitement. Attendez la fin, ou collez un extrait représentatif plutôt que l'export complet.
Questions fréquemment posées
C'est un lecteur de JSON : il analyse le texte et montre la structure sous forme d'arbre indenté plutôt qu'en une longue ligne. Collez votre JSON dans la zone Input JSON à gauche et l'arbre apparaît à droite environ un tiers de seconde plus tard. Rien d'autre n'est nécessaire : ni bouton d'exécution, ni compte, ni téléversement de fichier.
Oui, il fonctionne dans l'onglet du navigateur, sans rien à installer ni à créer comme compte. L'analyse, l'arbre, les statistiques et les actions Format, Minify et Copy sont du JavaScript exécuté sur votre machine : il n'y a donc ni clé d'API, ni quota, ni coût par requête derrière.
Non. Le document est passé au JSON.parse intégré de votre navigateur et rendu localement ; aucune requête n'emporte la saisie hors de la page. C'est donc utilisable pour des réponses d'API contenant jetons ou données personnelles, même si tout ce qui est réellement secret gagne à être expurgé avant de passer dans un outil de navigateur.
Il n'y a pas de limite fixe, seulement ce que l'onglet peut contenir. Analyser et redessiner un document de plusieurs mégaoctets fige visiblement l'interface un instant, car cela se produit sur le fil principal. Pour une charge utile de cette taille, minifiez un échantillon ou découpez-la en parties réellement à inspecter.
Non. Le panneau de droite propose une vue Tree et une vue Raw du texte formaté ; il n'y a ni mode tableau, ni sélecteur de colonnes, ni export CSV. Pour un tableau d'enregistrements, l'arbre marque le tableau en [n] et chaque enregistrement en {n}, ce qui donne le nombre de lignes et de champs sans passer par une grille.
Parce que JSON.parse impose du JSON strict. Virgule après le dernier élément, apostrophes simples au lieu de guillemets doubles, clés sans guillemets, commentaires, NaN ou Infinity sont tous rejetés, même si plusieurs sont admis dans un littéral objet JavaScript. La ligne rouge sous la saisie indique la position, en général un caractère après la véritable erreur.
Format réanalyse la saisie et la réécrit avec une indentation de deux espaces et une valeur par ligne, ce qu'on veut pour lire ou versionner. Minify écrit les mêmes données sans aucun espace ni retour à la ligne, ce qu'on veut pour une charge utile à envoyer. Les deux remplacent le contenu de la zone de saisie.
Appuyez sur Copy dans la barre d'outils. Le bouton analyse le contenu de la zone de saisie et écrit la version indentée à deux espaces dans le presse-papiers : vous obtenez donc la forme lisible même si la zone contient une ligne minifiée. Le bouton affiche Copied pendant deux secondes ; s'il ne se passe rien, la saisie n'est pas du JSON valide.
Pas d'extension : ceci est une page web, pas un greffon d'éditeur. Elle continue en revanche de fonctionner une fois chargée, puisque l'analyse et le rendu sont locaux ; une coupure en cours de session ne vous arrête pas. Rouvrir l'onglet à froid exige en revanche que la page se charge.
Keys, c'est chaque clé d'objet du document ; Strings, Numbers, Booleans et Nulls comptent les valeurs de chaque type ; Arrays et Objects comptent les conteneurs ; Depth est le niveau d'imbrication le plus profond atteint. Ensemble, ils décrivent la forme d'une charge utile en une ligne, pratique pour repérer une réponse anormalement profonde ou anormalement vide.