Qu’est-ce que le Visualiseur JSON ?
Le JSON brut, c’est parfait pour les machines et horrible pour les yeux. Cinq niveaux d’accolades, des virgules traînantes, une seule longue ligne — vous connaissez la chanson. Le Visualiseur JSON transforme tout ça en quelque chose que vous pouvez réellement parcourir : chaque tableau devient une ligne, chaque objet devient un ensemble de colonnes, et les structures imbriquées deviennent des tableaux-dans-des-tableaux dans lesquels vous pouvez descendre.
Il est fait pour le moment où vous voulez juste VOIR les données. Pas les analyser, pas les valider, pas les convertir — juste les voir. Déposez une réponse fetch, un payload GraphQL, une ligne de log, peu importe. Le visualiseur les présente pour que vous puissiez dire d’un coup d’œil si l’API a bien renvoyé ce que vous attendiez et si la forme correspond à ce que votre code attend.
Tout tourne dans votre navigateur — aucun envoi, aucun compte, aucune limite sur le nombre de collages-et-visualisations que vous pouvez enchaîner en un après-midi.
Comment visualiser du JSON ici
Trois étapes pour obtenir une vue structurée de vos données. Les boutons sous l’éditeur correspondent à ce que vous lisez ici.
Collez ou chargez un exemple
Copiez du JSON depuis votre client API (Postman, Insomnia, onglet Réseau des DevTools du navigateur) et collez-le à gauche. Si vous voulez d’abord voir le visualiseur en action, cliquez sur Exemple pour charger un petit jeu de données.
{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}Si votre JSON est mal formé, un message apparaîtra juste sous l’éditeur pour indiquer où le parseur a lâché.
Parcourez la structure
Le panneau de droite se met à jour instantanément dès que votre entrée change. Les tableaux d’objets apparaissent en lignes avec une colonne par clé. Les objets et tableaux imbriqués deviennent des mini-tableaux à l’intérieur de la cellule, ce qui vous permet de suivre visuellement une chaîne comme order.customer.tier. Utilisez Principal ou Imbriqué pour basculer l’orientation quand un enregistrement a plus de clés que de lignes — il est parfois plus lisible d’avoir les clés en lignes et les valeurs en colonnes. La mise en page suit les types JSON définis dans la RFC 8259.
Ciblez ce que vous regardez
Chaque colonne a son champ de filtre. Tapez gold dans la colonne tier, SKU-1 dans une colonne SKU, pending dans une colonne statut — les lignes qui ne correspondent pas sont masquées. Les filtres sont insensibles à la casse et se cumulent (tier=gold ET status=paid). Si une colonne encombre votre vue, cliquez sur Modifier, puis sur l’icône (×) de l’en-tête pour la supprimer.
Passez en plein écran pour les données larges
Pour les jeux de données avec 20+ colonnes, cliquez sur Plein écran. Le tableau prend toute la fenêtre et vous pouvez faire défiler horizontalement sans le panneau latéral dans le chemin. Idéal pour déboguer une requête GraphQL bien chargée ou un rapport dénormalisé.
Partagez ou exportez une fois terminé
Vous avez trouvé quelque chose à signaler ? Cliquez sur Partager pour créer un lien court (1 heure, 1 jour ou 1 semaine) et envoyez-le à un collègue — il ouvre la même vue, le même JSON, sans avoir à recoller. Ou cliquez sur Excel pour télécharger le tableau en .xls pour Excel, Google Sheets ou LibreOffice. Le parsing se fait côté client via JSON.parse().
Quand le visualiseur est rentable
Jeter un œil aux réponses d’API
Vous tapez un endpoint dans Postman, vous récupérez 8 Ko de JSON, et vous devez savoir si un champ imbriqué shipping.address.country est bien renseigné. Collez la réponse ici et vous avez votre réponse en deux secondes. Pas besoin de parser le JSON dans votre tête.
Lire des flux de logs
Les logs structurés de <a href="https://www.elastic.co/fr/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>, CloudWatch, ou tout logger JSON-line arrivent comme des blobs sur une seule ligne. Déposez-en un ici pour voir timestamp, service, niveau, message et trace ID clairement mis en page — pratique quand vous suivez un service capricieux à 2h du matin.
Passer en revue des exemples de schéma
Vous regardez des payloads d’exemple dans une spec <a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a> ou le README d’une équipe ? Collez le bloc d’exemple et parcourez la forme champ par champ. Plus rapide que de lire du JSON indenté de haut en bas, et vous repérez immédiatement les champs optionnels ou manquants.
Montrer les données aux parties prenantes
Votre PM veut savoir ce que l’API de checkout renvoie, mais "voilà un blob JSON" ne passera pas. Générez un lien de partage, collez-le dans Slack, et on voit un vrai tableau — pas besoin d’expliquer les crochets et les deux-points.
FAQ
Quelle différence entre un visualiseur JSON et un analyseur JSON ?
Ils se recoupent beaucoup, mais le cadrage diffère. Un analyseur se concentre sur l’acte de transformer du texte JSON en structure utilisable (et de signaler les erreurs de syntaxe). Un visualiseur se concentre sur la sortie — comment le résultat analysé est présenté pour que vous puissiez le lire. Cet outil fait les deux sous le capot, mais l’interface est optimisée pour parcourir des données volumineuses ou profondément imbriquées, pas seulement pour les valider.
Mes données quittent-elles mon navigateur ?
Non. L’analyse et le rendu se font localement en JavaScript. Les données ne partent que si vous cliquez sur "Partager" pour créer un lien court, et encore, vous contrôlez l’expiration (de 1 heure à 1 semaine). Si vous regardez quelque chose de sensible, ne partagez tout simplement pas — fermez l’onglet et c’est oublié.
Jusqu’à quelle profondeur peut aller l’imbrication ?
Pas de plafond en dur. Le visualiseur affiche récursivement les tableaux et objets imbriqués, quelle que soit la profondeur. Les structures très profondes deviennent visuellement chargées à un moment — au bout de cinq ou six niveaux, pensez à utiliser la ligne de filtres pour vous concentrer sur la branche qui vous intéresse, ou basculez l’orientation imbriquée avec le bouton Imbriqué.
Puis-je aussi voir des tableaux de valeurs primitives, pas seulement d’objets ?
Oui. Un tableau comme ["read", "write", "admin"] s’affiche comme une liste à une colonne. Les tableaux mixtes (objets + primitives) fonctionnent aussi — chaque élément a sa propre ligne, et le visualiseur détermine l’ensemble des colonnes à partir des clés présentes sur l’ensemble des objets.
Pourquoi certaines colonnes ont disparu après que j’ai rafraîchi le JSON ?
Si vous avez supprimé des colonnes plus tôt (via l’icône × en mode édition), le visualiseur s’en souvient pour la session en cours et masque aussi les clés correspondantes du JSON. Coller un nouveau JSON relance la détection. Si une colonne attendue manque, vérifiez si le mode édition l’a retirée, ou si la clé existe réellement dans chaque enregistrement.
Quelle taille de fichier JSON est confortable ?
Les fichiers jusqu’à quelques Mo s’affichent rapidement. Au-delà de 5 Mo, vous sentirez le navigateur travailler. Au-delà de 10 Mo, ça devient lent mais le visualiseur tient encore — si vous traitez régulièrement des jeux de 50 Mo ou plus, prenez d’abord un outil CLI comme jq ou gron, puis collez la tranche pertinente ici.
Outils JSON associés
La visualisation n’est qu’une des choses que vous voudrez peut-être faire avec du JSON. Si vous cherchez quelque chose de plus précis, essayez ceux-ci :