Transformer du JSON enchevêtré en un arbre interactif clair avec jsontr.ee

Récemment, je parsais une réponse d'API tierce de quelques centaines de lignes avec une bonne douzaine de tableaux et objets imbriqués. Le formatage de l'IDE et la visionneuse pliable familière du navigateur n'ont pas beaucoup aidé : pour comprendre les relations entre les entités, je devais constamment faire défiler vers le haut et vers le bas, perdant le contexte. Dans ces moments-là, on veut juste voir tout le graphe de données sur un seul écran.

Je suis tombé sur une bibliothèque compacte appelée jsontr.ee sur GitHub, conçue spécifiquement pour résoudre ce problème précis. Elle prend n'importe quel objet JSON et génère un arbre interactif basé sur SVG à partir de celui-ci.

Ce que la bibliothèque peut faire

Le dépôt The-01-Company/jsontr.ee contient un script JavaScript léger sans dépendances lourdes. Son objectif principal est de rendre rapidement les hiérarchies de données sous forme de diagrammes avec des nœuds et des connexions.

La bibliothèque propose plusieurs fonctionnalités intéressantes :

• Positionnement automatique des nœuds. Le script répartit les blocs pour qu'ils ne se chevauchent pas.
• Prise en charge complète de l'imbrication. Les objets dans les tableaux et les structures complexes reçoivent des libellés parents lisibles.
• Sortie SVG vectorielle propre. Les graphiques s'adaptent sans perte de qualité à n'importe quel niveau de zoom.
• Personnalisation flexible de l'apparence via des paramètres ou du CSS classique.

En plus de la bibliothèque JS elle-même, l'auteur a empaqueté la fonctionnalité sous forme d'extension Visual Studio Code appelée JSON Tree Visualizer. Donc pour une analyse rapide de fichiers, vous n'avez pas nécessairement besoin d'intégrer quoi que ce soit dans votre propre projet.

Démarrage rapide dans le code

Connecter la bibliothèque est simple. Aucune configuration de build complexe nécessaire—incluez simplement le fichier script dans votre page.

<script src="path/to/jsontr.ee.js"></script>

Ensuite, nous déclarons un conteneur dans le balisage :

<div id="json-tree"></div>

Et passons les données à la fonction generateJSONTree :

const jsonData = {
    name: "Lou Alcalá",
    projects: [
        {
            name: "JSONtr.ee",
            description: "JSON Formatter, Validator & Viewer Online",
            url: "https://jsontr.ee"
        },
        {
            name: "PixSpeed.com",
            description: "Image compressor",
            url: "https://pixspeed.com"
        }
    ]
};

const container = document.getElementById('json-tree');
container.innerHTML = generateJSONTree(jsonData);

La fonction retourne une chaîne de balisage SVG prête, que nous insérons immédiatement via innerHTML.

Stylisation

L'apparence du graphe s'adapte facilement au schéma de couleurs de votre interface. Il existe deux approches de personnalisation.

La première option consiste à passer un objet de configuration comme deuxième argument :

const options = {
    arrowColor: "#475872",
    nodeBorderColor: "#475872",
    nodeBackgroundColor: "#f6f8fa",
    keyColor: "#b16b2a",
    valueColor: "#008000",
};

container.innerHTML = generateJSONTree(jsonData, options);

La deuxième approche est le style via CSS. Comme la sortie est du SVG standard, vous pouvez appliquer des sélecteurs réguliers à ses éléments :

rect {
    fill: #ffffff !important;
    stroke: #1e293b !important;
    stroke-width: 2px !important;
}

Cette approche est pratique quand vous devez implémenter un thème sombre ou changer dynamiquement le style via des classes.

Utilisation dans VS Code

Si vous ne prévoyez pas de construire une interface web et que vous avez juste besoin d'analyser des logs et des dumps de données, il est plus pratique d'installer un plugin d'éditeur :

1. Ouvrez le panneau Extensions dans VS Code (Ctrl+Shift+X ou Cmd+Shift+X).
2. Entrez JSON Tree Visualizer dans la recherche.
3. Cliquez sur le bouton Installer.
4. Ouvrez le fichier JSON souhaité et invoquez la commande Visualize JSON as Tree via la palette de commandes.

Après cela, l'éditeur ouvrira le diagramme interactif dans l'onglet suivant.

Scénarios pratiques

Là où cette visualisation fait vraiment gagner du temps :

• Débogage de webhooks complexes et de payloads d'intégration.
• Création de documentation API interne pour vos collègues ou clients.
• Formation des développeurs juniors à lire les structures de données en arbre.
• Visualisation de fichiers de configuration avec des niveaux d'imbrication profonds.

Le script n'est pas alourdi par des abstractions inutiles, il est donc facile à intégrer dans un panneau d'administration interne ou un tableau de bord de surveillance.

Conclusion

La bibliothèque jsontr.ee fait exactement une chose : transformer rapidement et proprement du JSON en un diagramme SVG lisible.

La documentation dans le dépôt est encore concise, mais le code lui-même est clair sans avoir besoin de chercher des réponses. Si vous devez régulièrement expliquer des structures de données à vos collègues ou que vous en avez marre de faire défiler des murs de texte lors du débogage d'API, cet outil mérite définitivement d'être ajouté aux favoris. Le code source est ouvert sous licence MIT sur GitHub à l'adresse The-01-Company/jsontr.ee.