JSON Formatter — Embellir et valider JSON

Qu'est-ce que JSON Formatter ?

JSON Formatter est un outil basé sur le navigateur qui prend du texte JSON brut ou malformé et produit une sortie proprement indentée et lisible en quelques secondes. Les développeurs rencontrent constamment du JSON illisible — des réponses d'API compressées en une seule ligne, des fragments de configuration copiés qui ont perdu leurs espaces, ou des fichiers édités manuellement avec de subtiles erreurs de syntaxe. Cet outil résout les trois problèmes à la fois : il formate avec une indentation configurable, valide la syntaxe et répare les erreurs courantes automatiquement grâce à la bibliothèque jsonrepair.

Contrairement aux alternatives côté serveur, JSON Formatter s'exécute entièrement dans votre navigateur. Vos données ne quittent jamais votre machine. Il n'y a pas de compte, pas de limite de débit, et pas de coût.

Fonctionnalités principales

• Formater avec une indentation personnalisable (2 ou 4 espaces) — Choisissez votre taille d'indentation préférée dans le menu déroulant de la barre d'action avant de cliquer sur Formater. La sélection persiste entre les sessions lorsqu'elle est combinée à l'enregistrement de préréglages.
• Valider la syntaxe JSON avec des messages d'erreur — L'outil exécute JSON.parse après tentative de réparation automatique et affiche le message d'erreur exact si l'entrée est non analysable, affiché dans le panneau de sortie avec un attribut role="alert" accessible.
• Réparer automatiquement le JSON malformé — La bibliothèque jsonrepair corrige les chaînes entre guillemets simples, les virgules finales, les clés sans guillemets et autres déviations courantes avant l'analyse. Si une réparation est appliquée, une notification toast distincte vous en informe.
• Minifier JSON (supprimer les espaces blancs) — Produit une sortie sur une seule ligne avec tous les espaces de formatage supprimés, utile pour intégrer du JSON dans des fichiers de configuration ou réduire la taille du payload.
• Copier la sortie formatée dans le presse-papiers — Copie en un clic via l'API Clipboard avec un repli pour les navigateurs plus anciens.
• Télécharger en tant que fichier .json — Enregistre la sortie sous formatted.json avec le type MIME application/json.
• Onglet Validateur de schéma — Collez des données JSON et un document JSON Schema draft-07 ; l'outil signale chaque violation avec son chemin exact (par ex., root.user.email).
• Onglet Générateur de schéma — Collez n'importe quel objet JSON ; l'outil infère un document JSON Schema draft-07 incluant les formats détectés (email, date, UUID, URI).
• Onglet Vue arborescente — Affiche le JSON analysé sous forme d'arbre interactif rétractable avec des types codés par couleur, la mise en surbrillance de la recherche, développer/réduire tout, et la copie de chemin en un clic.

Comment utiliser JSON Formatter

Étape 1 : Collez votre JSON

Ouvrez l'onglet Formater/Minifier (la vue par défaut). Collez votre JSON dans le panneau d'entrée sur le côté gauche. La zone de texte accepte des entrées de n'importe quelle taille et peut être redimensionnée verticalement en faisant glisser le bord inférieur. Si vous chargez un lien partagé par un collègue, l'outil lit l'entrée de l'URL automatiquement et affiche une notification toast.

Étape 2 : Choisissez l'indentation

Dans la barre d'action sous les panneaux, ouvrez le menu déroulant d'indentation. Sélectionnez 2 espaces (par défaut) ou 4 espaces. Cela contrôle le nombre d'espaces utilisés par niveau d'imbrication dans la sortie. Une indentation de 4 espaces est courante dans les projets Python et certains guides de style ; 2 espaces est le standard dans les écosystèmes JavaScript et Node.js.

Étape 3 : Cliquez sur Formater

Cliquez sur le bouton Formater ou appuyez sur Cmd+Entrée (Mac) / Ctrl+Entrée (Windows/Linux). Le JSON formaté apparaît dans le panneau de sortie en lecture seule à droite. Si l'entrée contient des problèmes corrigeables — tels que des virgules finales ou des clés sans guillemets — une notification toast affiche "JSON formatted and repaired" pour confirmer que la réparation a été appliquée. Si le JSON est invalide au-delà de toute réparation, un message d'erreur apparaît sous le panneau de sortie avec l'erreur d'analyse spécifique.

Exemple d'entrée (réponse API compressée) :

{"user":{"id":4821,"name":"Maria Santos","email":"maria@example.com","roles":["admin","editor"],"active":true,"lastLogin":null}}

Sortie avec indentation de 2 espaces :

{
  "user": {
    "id": 4821,
    "name": "Maria Santos",
    "email": "maria@example.com",
    "roles": [
      "admin",
      "editor"
    ],
    "active": true,
    "lastLogin": null
  }
}

Étape 4 : Minifier (optionnel)

Pour réduire le JSON à une seule ligne, cliquez sur Minifier ou appuyez sur Cmd+Shift+M / Ctrl+Shift+M. C'est utile lorsque vous avez du JSON formaté qui doit être intégré dans une variable d'environnement ou une chaîne de configuration.

Étape 5 : Copier ou télécharger la sortie

Cliquez sur Copier pour placer la sortie dans votre presse-papiers. Cliquez sur Télécharger pour enregistrer formatted.json dans votre dossier de téléchargements. Le bouton Copier est désactivé jusqu'à ce qu'une sortie existe, évitant les opérations accidentelles de presse-papiers vide.

Utiliser le Validateur de schéma

Passez à l'onglet Validateur de schéma. Collez vos données JSON dans le panneau gauche et un document JSON Schema dans le panneau droit, puis cliquez sur Valider. Les résultats apparaissent en dessous avec une coche verte pour les données valides ou une liste rouge de violations. Chaque violation affiche son chemin en notation pointée (par ex., root.addresses[0].postalCode) et une description en langage clair de ce qui a échoué (par ex., "La chaîne ne correspond pas au modèle : ^\\d{5}$").

Utiliser le Générateur de schéma

Passez à l'onglet Générateur de schéma. Collez un exemple d'objet JSON et cliquez sur Générer le schéma. L'outil produit un document JSON Schema draft-07 inféré de l'exemple en quelques secondes, incluant des indications de format pour les chaînes qui ressemblent à des emails, des dates (YYYY-MM-DD), des dates-heures ISO, des UUIDs et des URIs.

Utiliser la Vue arborescente

Passez à l'onglet Vue arborescente. Collez du JSON et l'arbre se construit automatiquement après un délai de 500 ms (aucun appui sur un bouton n'est nécessaire). Cliquez sur n'importe quel nœud objet ou tableau pour le développer ou le réduire. Utilisez la zone de recherche pour mettre en surbrillance les nœuds dont la clé ou la valeur correspond à votre terme. Cliquez sur Tout développer pour ouvrir toute la structure en une seule fois, ou survolez n'importe quel nœud pour révéler un bouton de copie de chemin qui copie le chemin en notation pointée vers ce champ.

Exemples pratiques

Débogage d'une réponse API

Une API REST renvoie un profil utilisateur compressé pour le dépannage :

{"profile":{"id":"a3f8-bc21","created":"2025-11-03","tier":"pro","quota":{"used":14200,"limit":50000},"features":["export","api","webhooks"]}}

Collez-le et cliquez sur Formater avec une indentation de 2 espaces. La sortie affiche immédiatement la hiérarchie d'imbrication, rendant évident que quota est un objet imbriqué avec deux champs et features est un tableau de trois chaînes. Copiez le résultat et collez-le dans votre rapport de bug.

Validation d'un fichier de configuration contre un schéma

Votre application attend une configuration avec un entier port requis entre 1 et 65535 et une chaîne host requise. Collez le JSON de configuration dans le panneau gauche du Validateur de schéma et un schéma comme :

{
  "type": "object",
  "required": ["host", "port"],
  "properties": {
    "host": { "type": "string" },
    "port": { "type": "integer", "minimum": 1, "maximum": 65535 }
  }
}

Si port est "8080" (une chaîne au lieu d'un entier), le validateur signale : root.port — Expected integer, got string.

Générer un schéma pour un nouveau contrat d'API

Vous avez un exemple de réponse d'une nouvelle API tierce et vous devez écrire rapidement un JSON Schema pour celle-ci. Collez l'exemple dans l'onglet Générateur de schéma et cliquez sur Générer le schéma. L'outil produit un schéma draft-07 en quelques secondes, que vous pouvez ensuite affiner manuellement en ajoutant des contraintes comme minLength, pattern ou des valeurs enum.

Conseils et meilleures pratiques

Utilisez les raccourcis clavier. Cmd+Entrée formate et Cmd+Shift+M minifie sans toucher la souris. Sur le YAML Formatter, le raccourci équivalent est Cmd+Shift+J pour la conversion JSON, mais sur cet outil Cmd+Shift+M signifie toujours minifier.

Vérifiez la notification de réparation. Si le toast de succès indique "formatted and repaired" plutôt que "formatted successfully", examinez votre source originale. La réparation a peut-être corrigé une véritable erreur dans un fichier de configuration qui devrait être corrigée à la source.

La vue arborescente se construit automatiquement. Vous n'avez pas besoin de cliquer sur Construire l'arbre — l'arbre s'affiche 500 ms après que vous ayez arrêté de taper. C'est utile pour explorer rapidement une structure de données inconnue pendant que vous modifiez encore l'entrée.

Copiez les chemins pour l'accès en JavaScript. Dans la Vue arborescente, survolez n'importe quel nœud et cliquez sur l'icône de copie qui apparaît. Le chemin copié (par ex., root.users[2].address.city) est la notation exacte point-crochet dont vous avez besoin pour accéder à cette valeur en JavaScript après JSON.parse().

Le générateur de schéma marque toutes les clés existantes comme requises. Après avoir généré un schéma, vérifiez le tableau required et supprimez les champs qui sont réellement optionnels dans votre modèle de données.

Problèmes courants et dépannage

Erreur "Invalid JSON syntax" après le collage — L'entrée n'a pas pu être réparée automatiquement. Les causes courantes sont les guillemets échappés doublement lors de la copie (\\" au lieu de \"), ou des caractères binaires collés depuis un terminal. Essayez de sélectionner le JSON dans son application source et de le copier à nouveau, ou vérifiez la présence de caractères invisibles.

La sortie est vide après avoir cliqué sur Formater — Le champ d'entrée est vide ou ne contient que des espaces. Le bouton Formater est désactivé lorsque l'entrée est vide, mais s'il se déclenche quand même, le message d'erreur "Please enter JSON to format" apparaît sous le panneau de sortie.

Le Validateur de schéma affiche "Invalid JSON data" — Le texte dans le panneau gauche du Validateur de schéma n'est pas du JSON valide. Contrairement à l'onglet Formater, le Validateur de schéma n'applique pas la réparation automatique. Collez d'abord dans l'onglet Formater, copiez la sortie corrigée, puis revenez au Validateur de schéma.

La Vue arborescente affiche "Invalid JSON" — La vue arborescente analyse avec JSON.parse sans réparation. Si votre JSON a des problèmes mineurs, formatez-le d'abord dans l'onglet Formater pour obtenir une copie propre, puis collez-la dans la Vue arborescente.

Le téléchargement produit un fichier nommé formatted.json à chaque fois — C'est intentionnel. Renommez le fichier après le téléchargement.

Confidentialité et sécurité

JSON Formatter traite tout dans votre navigateur en utilisant JavaScript. Aucune entrée — y compris les clés API sensibles, les jetons, les mots de passe ou les données personnelles intégrées dans le JSON — n'est transmise à un serveur quelconque. L'outil fonctionne entièrement hors ligne après le chargement de la page. Il n'y a pas de crochets d'analyse dans la logique de formatage elle-même. Vous pouvez coller en toute sécurité des secrets de production, des identifiants de base de données ou des données personnelles dans cet outil sans que les données quittent votre machine.

Foire aux questions

JSON Formatter est-il gratuit ? Oui, JSON Formatter est entièrement gratuit sans limites d'utilisation. Les onglets Formater, Minifier, Validateur de schéma, Générateur de schéma et Vue arborescente sont tous disponibles sans frais. Les fonctionnalités premium des supporters de Glyph Widgets comme les préréglages enregistrés, l'historique de session et les notes d'outils sont disponibles pour les supporters, mais la fonctionnalité de formatage principale ne nécessite rien.

Fonctionne-t-il hors ligne ? Oui. Une fois la page chargée dans votre navigateur, toutes les opérations de formatage et de validation s'exécutent localement en JavaScript. Vous pouvez vous déconnecter d'Internet et continuer à utiliser l'outil sans aucune perte de fonctionnalité.

Mes données sont-elles sûres à coller ici ? Oui. Tout le traitement se fait dans votre navigateur. Le texte d'entrée n'est jamais envoyé à un serveur, enregistré ou stocké en dehors de votre session de navigateur. Vous pouvez formater en toute sécurité du JSON contenant des clés API, des mots de passe ou des données personnelles.

Quels formats JSON la réparation automatique gère-t-elle ? L'outil utilise la bibliothèque jsonrepair, qui gère les chaînes entre guillemets simples, les virgules finales dans les objets et les tableaux, les clés de propriété sans guillemets, les commentaires (// et / /), les crochets de fermeture manquants et plusieurs autres déviations courantes de la spécification JSON.

Quelles contraintes le Validateur de schéma prend-il en charge ? Le validateur prend en charge type, enum, required, properties, additionalProperties, minProperties, maxProperties, minLength, maxLength, pattern, format (email, uri, date, date-time, ipv4, ipv6, uuid), minimum, maximum, exclusiveMinimum, exclusiveMaximum, multipleOf, minItems, maxItems, uniqueItems et items.

Quels formats le Générateur de schéma détecte-t-il automatiquement ? Le générateur détecte les adresses email, les dates ISO (YYYY-MM-DD), les dates-heures ISO, les UUIDs et les URIs. Il fait également la distinction entre les types integer et number pour les valeurs numériques.

Puis-je valider un tableau au lieu d'un objet ? Oui. Le validateur de schéma et le générateur de schéma acceptent tous deux n'importe quelle valeur JSON valide au niveau racine — y compris les tableaux, les chaînes, les nombres et les booléens, pas seulement les objets.

Quel est le raccourci clavier pour formater ? Appuyez sur Cmd+Entrée sur macOS ou Ctrl+Entrée sur Windows et Linux pour déclencher le formatage. Appuyez sur Cmd+Shift+M ou Ctrl+Shift+M pour minifier. Ces raccourcis ne s'activent que lorsque l'onglet Formater/Minifier est actif.

L'outil peut-il gérer de très grands fichiers JSON ? L'outil stocke jusqu'à 10 000 caractères par entrée d'historique, mais le formatage lui-même n'a pas de limite intégrée au-delà de la mémoire du navigateur. Les très grands fichiers (plusieurs mégaoctets) seront formatés correctement, mais la zone de texte peut sembler lente sur les appareils bas de gamme.

Quel brouillon de schéma cible le schéma généré ? Le générateur produit des documents JSON Schema draft-07, identifiés par "$schema": "http://json-schema.org/draft-07/schema#" dans la sortie.

Outils connexes

XML Formatter — Formatez et validez des documents XML avec les mêmes contrôles d'indentation et la prise en charge de la minification.

YAML Formatter — Formatez des fichiers YAML et convertissez-les directement en sortie JSON avec une indentation configurable.

JSON Converter — Convertissez JSON vers et depuis CSV, XML, YAML et d'autres formats de données.

Essayez JSON Formatter maintenant : JSON Formatter