docs.json
vous permet de transformer une collection de fichiers Markdown en un site de documentation personnalisable et facile à parcourir. Ce fichier de configuration obligatoire contrôle le style, la navigation, les intégrations, et bien plus encore. Considérez‑le comme le plan de votre documentation.
Les paramètres définis dans docs.json
s’appliquent globalement à toutes les pages.
Configuration de votre docs.json
theme
, name
, colors.primary
et navigation
. Les autres champs sont facultatifs et vous pourrez les ajouter à mesure que vos besoins en documentation évoluent.
Pour une expérience d’édition optimale, incluez la référence de schéma en haut de votre fichier docs.json
. Cela active l’autocomplétion, la validation et des info-bulles utiles dans la plupart des éditeurs de code :
Report incorrect code
Copy
Ask AI
{
"$schema": "https://mintlify.com/docs.json",
"theme": "mint",
"name": "Votre Documentation",
"colors": {
"primary": "#ff0000"
},
"navigation": {
// Votre structure de navigation
}
// Le reste de votre configuration
}
Référence
docs.json
.
Personnalisation
Le thème de mise en page de votre site.L’un des suivants :
mint
, maple
, palm
, willow
, linden
, almond
, aspen
.Voir Thèmes pour plus d’informations.Le nom de votre projet, de votre organisation ou de votre produit.
Les couleurs utilisées dans votre documentation. Elles s’appliquent différemment selon les thèmes. Si vous ne fournissez qu’une couleur principale, elle sera utilisée pour tous les éléments colorés.
Show Couleurs
Show Couleurs
La couleur principale de votre documentation. Généralement utilisée pour mettre en évidence en mode clair, avec quelques variations selon le thème.Doit être un code hexadécimal commençant par
#
.La couleur utilisée pour la mise en évidence en mode sombre.Doit être un code hexadécimal commençant par
#
.La couleur utilisée pour les boutons et les états de survol en modes clair et sombre, avec quelques variations selon le thème.Doit être un code hexadécimal commençant par
#
.Description de votre site pour le SEO et l’indexation par l’IA.
Définissez votre logo pour les modes clair et sombre.
Show Logo
Show Logo
Chemin vers votre fichier de logo pour le mode clair. Incluez l’extension du fichier. Exemple :
/logo.png
Chemin vers votre fichier de logo pour le mode sombre. Incluez l’extension du fichier. Exemple :
/logo-dark.png
L’URL vers laquelle rediriger lors du clic sur le logo. Si elle n’est pas fournie, le logo renverra vers votre page d’accueil. Exemple :
https://mintlify.com
Chemin vers votre fichier favicon, y compris l’extension. Redimensionné automatiquement aux tailles de favicon appropriées.
Peut être un fichier unique ou des fichiers distincts pour les modes clair et sombre. Exemple :
/favicon.png
Personnalisation des vignettes pour les réseaux sociaux et les aperçus de page.
Configurations de style visuel.
Show Styling
Show Styling
Le style de l’« eyebrow » de la page. Choisissez
section
pour afficher le nom de la section ou breadcrumbs
pour afficher le chemin de navigation complet. Par défaut : section
.Configuration du thème des code blocks. Par défaut :
"system"
.Configuration simple :"system"
: correspond au mode actuel du site (clair ou sombre)"dark"
: utilise toujours le mode sombre
- Utilisez une chaîne pour spécifier un thème Shiki unique pour tous les code blocks
- Utilisez un objet pour spécifier des thèmes Shiki distincts pour les modes clair et sombre
Un nom de thème Shiki unique à utiliser pour les modes clair et sombre.
Report incorrect code
Copy
Ask AI
"styling": {
"codeblocks": {
"theme": "dracula"
}
}
Thèmes distincts pour les modes clair et sombre.
Paramètres de la bibliothèque d’icônes.
Show Icons
Show Icons
Bibliothèque d’icônes à utiliser dans toute votre documentation. Par défaut :
fontawesome
.Vous pouvez spécifier une URL vers une icône hébergée en externe, un chemin vers un fichier d’icône dans votre projet, ou du code SVG compatible JSX pour n’importe quelle icône individuelle, quelle que soit la configuration de la bibliothèque.
Configuration des polices pour votre documentation. La police par défaut est Inter.
Show Fonts
Show Fonts
Famille de polices, par exemple « Open Sans ».
Graisse (épaisseur) de la police, par exemple 400 ou 700. Les polices variables prennent en charge des valeurs précises comme 550.
URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts est chargé automatiquement lorsque vous indiquez un nom de
family
Google Font, donc aucune URL source n’est nécessaire.Format du fichier de police.
Remplacer les paramètres de police spécifiquement pour les titres.
Show Heading
Show Heading
Famille de polices, par exemple « Open Sans », « Playfair Display ».
Graisse (épaisseur) de la police, par exemple 400 ou 700. Les polices variables prennent en charge des valeurs précises comme 550.
URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts est chargé automatiquement lorsque vous indiquez un nom de
family
Google Font, donc aucune URL source n’est nécessaire.Format du fichier de police.
Remplacer les paramètres de police spécifiquement pour le corps du texte.
Show Body
Show Body
Famille de polices, par exemple « Open Sans », « Playfair Display ».
Graisse (épaisseur) de la police, par exemple 400 ou 700. Les polices variables prennent en charge des valeurs précises comme 550.
URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts est chargé automatiquement lorsque vous indiquez un nom de
family
Google Font, donc aucune URL source n’est nécessaire.Format du fichier de police.
Paramètres du bouton de bascule mode clair/sombre.
Show Appearance
Show Appearance
Mode de thème par défaut. Choisissez
system
pour correspondre aux réglages du système d’exploitation des utilisateurs, ou light
ou dark
pour imposer un mode spécifique. Par défaut : system
.Indique s’il faut masquer le bouton de bascule clair/sombre. Par défaut :
true
.Paramètres de couleur et de décoration d’arrière-plan.
Show Background
Show Background
Image d’arrière-plan de votre site. Peut être un fichier unique ou des fichiers distincts pour les modes light et sombre.
Décoration d’arrière-plan pour votre thème.
Couleurs d’arrière-plan personnalisées pour les modes light et sombre.
Show Color
Show Color
Structure
Éléments de la barre de navigation pointant vers des liens externes.
Show Navbar
Show Navbar
Liens à afficher dans la barre de navigation
Show Links
Show Links
Texte du lien.
Destination du lien. Doit être une URL externe valide.
L’icône à afficher.Options :
- nom de l’icône Font Awesome
- nom de l’icône Lucide
- code SVG (compatible JSX) entouré d’accolades
- URL vers une icône hébergée en externe
- chemin vers un fichier d’icône dans votre projet
- Convertissez votre SVG à l’aide du convertisseur SVGR.
- Collez votre code SVG dans le champ de saisie SVG.
- Copiez l’élément complet
<svg>...</svg>
depuis le champ de sortie JSX. - Entourez le code SVG compatible JSX avec des accolades :
icon={<svg ...> ... </svg>}
. - Ajustez
height
etwidth
si nécessaire.
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options :
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Bouton principal de la barre de navigation.
Show Primary
Show Primary
Style du bouton. Choisissez
button
pour un bouton standard avec un libellé ou github
pour un lien vers un référentiel GitHub avec une icône.Texte du bouton. S’applique uniquement lorsque
type
est button
.Destination du bouton. Doit être une URL externe. Si
type
est github
, il doit s’agir de l’URL d’un référentiel GitHub.La structure de navigation de votre contenu.
Show Navigation
Show Navigation
Éléments de navigation globaux qui apparaissent sur toutes les pages et sections.
Show Global
Show Global
Configuration du sélecteur de langue pour les sites localisés.
Show Langues
Show Langues
language
"en" | "cn" | "zh" | "zh-Hans" | "zh-Hant" | "es" | "fr" | "ja" | "jp" | "pt" | "pt-BR" | "de" | "ko" | "it" | "ru" | "id" | "ar" | "tr"
required
Code de langue au format ISO 639-1.
Indique s’il s’agit de la langue par défaut.
Indique s’il faut masquer cette langue par défaut.
Un chemin valide ou un lien externe vers cette version de votre documentation.
Configuration du sélecteur de versions pour les sites multiversions.
Onglets de navigation de premier niveau pour organiser les sections principales.
Show Tabs
Show Tabs
Nom d’affichage de l’onglet.Longueur minimale : 1
L’icône à afficher.Options :
- nom de l’icône Font Awesome
- nom de l’icône Lucide
- code SVG (compatible JSX) entouré d’accolades
- URL vers une icône hébergée en externe
- chemin vers un fichier d’icône dans votre projet
- Convertissez votre SVG à l’aide du convertisseur SVGR.
- Collez votre code SVG dans le champ de saisie SVG.
- Copiez l’élément complet
<svg>...</svg>
depuis le champ de sortie JSX. - Entourez le code SVG compatible JSX avec des accolades :
icon={<svg ...> ... </svg>}
. - Ajustez
height
etwidth
si nécessaire.
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options :
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Indique s’il faut masquer cet onglet par défaut.
URL ou chemin de destination de l’onglet.
Liens d’ancrage mis en avant dans la navigation de la barre latérale.
Show Ancres
Show Ancres
Nom affiché de l’ancre.Longueur minimale : 1
L’icône à afficher.Options :
- nom de l’icône Font Awesome
- nom de l’icône Lucide
- code SVG (compatible JSX) entouré d’accolades
- URL vers une icône hébergée en externe
- chemin vers un fichier d’icône dans votre projet
- Convertissez votre SVG à l’aide du convertisseur SVGR.
- Collez votre code SVG dans le champ de saisie SVG.
- Copiez l’élément complet
<svg>...</svg>
depuis le champ de sortie JSX. - Entourez le code SVG compatible JSX avec des accolades :
icon={<svg ...> ... </svg>}
. - Ajustez
height
etwidth
si nécessaire.
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options :
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Couleurs personnalisées de l’ancre.
Indique s’il faut masquer cette ancre par défaut.
URL ou chemin de destination de l’ancre.
Menus déroulants pour organiser du contenu connexe.
Show Menus déroulants
Show Menus déroulants
Nom d’affichage du menu déroulant.Longueur minimale : 1
L’icône à afficher.Options :
- nom de l’icône Font Awesome
- nom de l’icône Lucide
- code SVG (compatible JSX) entouré d’accolades
- URL vers une icône hébergée en externe
- chemin vers un fichier d’icône dans votre projet
- Convertissez votre SVG à l’aide du convertisseur SVGR.
- Collez votre code SVG dans le champ de saisie SVG.
- Copiez l’élément complet
<svg>...</svg>
depuis le champ de sortie JSX. - Entourez le code SVG compatible JSX avec des accolades :
icon={<svg ...> ... </svg>}
. - Ajustez
height
etwidth
si nécessaire.
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options :
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Indique s’il faut masquer ce menu déroulant par défaut.
URL ou chemin de destination du menu déroulant.
Produits pour organiser le contenu en sections.
Show Produits
Show Produits
Nom d’affichage du produit.
Description du produit.
L’icône à afficher.Options :
- nom de l’icône Font Awesome
- nom de l’icône Lucide
- code SVG (compatible JSX) entouré d’accolades
- URL vers une icône hébergée en externe
- chemin vers un fichier d’icône dans votre projet
- Convertissez votre SVG à l’aide du convertisseur SVGR.
- Collez votre code SVG dans le champ de saisie SVG.
- Copiez l’élément complet
<svg>...</svg>
depuis le champ de sortie JSX. - Entourez le code SVG compatible JSX avec des accolades :
icon={<svg ...> ... </svg>}
. - Ajustez
height
etwidth
si nécessaire.
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options :
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Sélecteur de langue pour les sites multilingues.
Listes déroulantes pour regrouper du contenu lié.
Paramètres d’interaction utilisateur pour les éléments de navigation.
Show Interaction
Show Interaction
Contrôle le comportement de navigation automatique lors de la sélection des groupes de navigation. Définissez sur
true
pour forcer la navigation vers la première page lorsqu’un groupe de navigation est développé. Définissez sur false
pour empêcher la navigation et uniquement développer ou réduire le groupe. Laissez la valeur non définie pour utiliser le comportement par défaut du thème.Contenu du pied de page et liens vers les réseaux sociaux.
Show Footer
Show Footer
Profils de réseaux sociaux à afficher dans le pied de page. Chaque key est un nom de plateforme et chaque value est l’URL de votre profil. Par exemple :Noms de propriétés valides :
Report incorrect code
Copy
Ask AI
{
"x": "https://x.com/mintlify"
}
x
, website
, facebook
, youtube
, discord
, slack
, github
, linkedin
, instagram
, hacker-news
, medium
, telegram
, twitter
, x-twitter
, earth-americas
, bluesky
, threads
, reddit
, podcast
Bannière de site affichée en haut des pages.
Show Banner
Show Banner
Contenu de la bannière. Prend en charge le texte brut et le formatage Markdown. Par exemple :
Report incorrect code
Copy
Ask AI
{
"content": "🚀 La bannière est en ligne ! [En savoir plus](mintlify.com)"
}
Indique si les utilisateurs peuvent fermer la bannière. Valeur par défaut :
false
.Redirections pour les pages déplacées, renommées ou supprimées.
Menu contextuel pour du contenu optimisé par l’IA et des intégrations.
Show Contextual
Show Contextual
options
array of "copy" | "view" | "chatgpt" | "claude" | "perplexity" | "mcp" | "cursor" | "vscode"
required
Actions disponibles dans le menu contextuel. La première option apparaît par défaut.
copy
: Copier la page actuelle en Markdown dans le presse-papiers.view
: Afficher la page actuelle en Markdown dans un nouvel onglet.chatgpt
: Envoyer le contenu de la page actuelle à ChatGPT.claude
: Envoyer le contenu de la page actuelle à Claude.perplexity
: Envoyer le contenu de la page actuelle à Perplexity.mcp
: Copie l’URL de votre serveur MCP dans le presse-papiers.cursor
: Installe votre serveur MCP hébergé dans Cursor.vscode
: Installe votre serveur MCP hébergé dans VSCode.

Le menu contextuel est disponible uniquement sur les déploiements de prévisualisation et de production.
Configuration d’API
Paramètres de la documentation d’API et du bac à sable interactif.
Show Api
Show Api
Fichiers de spécification OpenAPI pour générer la documentation d’API. Peut être une seule URL/un seul chemin ou un tableau d’URL/chemins.
Fichiers de spécification AsyncAPI pour générer la documentation d’API. Peut être une seule URL/un seul chemin ou un tableau d’URL/chemins.
Paramètres d’affichage des paramètres d’API.
Show Params
Show Params
Indique s’il faut développer tous les paramètres par défaut. Valeur par défaut :
closed
.Configuration des exemples d’API générés automatiquement.
Show Examples
Show Examples
Langages des extraits d’API générés automatiquement
Indique s’il faut afficher les paramètres optionnels dans les exemples d’API. Valeur par défaut :
all
.Indique s’il faut préremplir le bac à sable d’API avec des données issues des exemples de schéma. Lorsqu’elle est activée, l’interface remplit automatiquement les champs de requête avec des valeurs d’exemple tirées de votre spécification OpenAPI. Valeur par défaut :
false
.Configuration des pages d’API générées à partir de fichiers
MDX
.Show Mdx
Show Mdx
Configuration du serveur pour les requêtes d’API.
SEO et recherche
Configurations d’indexation pour le SEO.
Show Seo
Show Seo
Balises meta ajoutées à chaque page. Doit être une paire key-value valide. Voir la référence des balises meta courantes pour les options.
Indiquez quelles pages les moteurs de recherche doivent indexer. Choisissez
navigable
pour indexer uniquement les pages présentes dans la navigation de votre docs.json
, ou all
pour indexer chaque page. Valeur par défaut : navigable
.Paramètres d’affichage de la recherche.
Show Search
Show Search
Texte d’espace réservé affiché dans la barre de recherche.
Intégrations
Intégrations tierces.
Show Intégrations
Show Intégrations
Intégration à Amplitude Analytics.
Show Amplitude
Show Amplitude
Votre clé API Amplitude.
Intégration d’enrichissement de données Clearbit.
Show Clearbit
Show Clearbit
Votre clé d’API Clearbit.
Intégration Fathom Analytics.
Show Fathom
Show Fathom
L’identifiant de site Fathom.
Intégration du chat Front.
Show Frontchat
Show Frontchat
Votre ID de snippet du chat Front.Longueur minimale : 6
Intégration à Google Analytics 4.
Show Ga4
Show Ga4
Votre identifiant de mesure Google Analytics 4.Doit correspondre au modèle : ^G
Intégration à Google Tag Manager.
Show Gtm
Show Gtm
Votre identifiant de balise Google Tag Manager.Doit correspondre au modèle : ^G
Intégration d’Intercom.
Show Intercom
Show Intercom
L’ID d’application Intercom.Longueur minimale : 6
Intégration Koala.
Show Koala
Show Koala
Votre clé d’API publique Koala.Longueur minimale : 2
Intégration LogRocket.
Show LogRocket
Show LogRocket
Votre ID d’application LogRocket.
Intégration à Mixpanel.
Show Mixpanel
Show Mixpanel
Votre jeton de projet Mixpanel.
Intégration à Osano.
Show Osano
Show Osano
La source de votre script Osano.
Paramètres de télémétrie.
Show Télémétrie
Show Télémétrie
Indique s’il faut activer la télémétrie.
Erreurs
Paramètres de gestion des erreurs.
Show Erreurs
Show Erreurs
Gestion de l’erreur 404 « Page non trouvée ».
Exemples
- Exemple simple
- Exemple d’API interactif
- Exemple multilingue
docs.json
Report incorrect code
Copy
Ask AI
{
"$schema": "https://mintlify.com/docs.json",
"theme": "maple",
"name": "Example Co.",
"description": "Example Co. est une entreprise qui fournit du contenu d'exemple et du texte de remplissage.",
"colors": {
"primary": "#3B82F6",
"light": "#F8FAFC",
"dark": "#0F172A"
},
"navigation": {
"dropdowns": [
{
"dropdown": "Documentation",
"icon": "book",
"description": "Comment utiliser le produit Example Co.",
"groups": [
{
"group": "Prise en main",
"pages": [
"index",
"quickstart"
]
},
{
"group": "Personnalisation",
"pages": [
"settings",
"users",
"features"
]
},
{
"group": "Facturation",
"pages": [
"billing/overview",
"billing/payments",
"billing/subscriptions"
]
}
]
},
{
"dropdown": "Journal des modifications",
"icon": "history",
"description": "Mises à jour et modifications",
"pages": [
"changelog"
]
}
]
},
"logo": {
"light": "/logo-light.svg",
"dark": "/logo-dark.svg",
"href": "https://example.com"
},
"navbar": {
"links": [
{
"label": "Communauté",
"href": "https://example.com/community"
}
],
"primary": {
"type": "button",
"label": "Commencer",
"href": "https://example.com/start"
}
},
"footer": {
"socials": {
"x": "https://x.com/example",
"linkedin": "https://www.linkedin.com/company/example",
"github": "https://github.com/example",
"slack": "https://example.com/community"
},
"links": [
{
"header": "Ressources",
"items": [
{
"label": "Clients",
"href": "https://example.com/customers"
},
{
"label": "Entreprise",
"href": "https://example.com/enterprise"
},
{
"label": "Demander un aperçu",
"href": "https://example.com/preview"
}
]
},
{
"header": "Société",
"items": [
{
"label": "Carrières",
"href": "https://example.com/careers"
},
{
"label": "Blog",
"href": "https://example.com/blog"
},
{
"label": "Politique de confidentialité",
"href": "https://example.com/legal/privacy"
}
]
}
]
},
"integrations": {
"ga4": {
"measurementId": "G-XXXXXXXXXX"
},
"koala": {
"publicApiKey": "pk_example_key_123"
},
"telemetry": {
"enabled": true
},
"cookies": {
"key": "example_cookie_key",
"value": "example_cookie_value"
}
},
"contextual": {
"options": [
"copy",
"view",
"chatgpt",
"claude"
]
},
"errors": {
"404": {
"redirect": false,
"title": "Page introuvable",
"description": "Qu'est-il donc **arrivé** à cette _page_ ?"
}
}
}
Mise à niveau depuis mint.json
mint.json
obsolète, suivez ces étapes pour passer à docs.json
.
1
Installer ou mettre à jour l’interface en ligne de commande (CLI)
Si vous n’avez pas encore installé la CLI, installez-la maintenant :Si vous avez déjà installé la CLI, assurez-vous qu’elle est à jour :
Report incorrect code
Copy
Ask AI
npm i -g mint
Report incorrect code
Copy
Ask AI
mint update
2
Créer votre fichier docs.json
Dans votre référentiel de documentation, exécutez :Cette commande va créer un fichier
Report incorrect code
Copy
Ask AI
mint upgrade
docs.json
à partir de votre mint.json
existant. Passez en revue le fichier généré pour vous assurer que tous les paramètres sont corrects.3
Supprimer votre fichier mint.json
Après avoir vérifié que votre
docs.json
est correctement configuré, vous pouvez supprimer en toute sécurité votre ancien fichier mint.json
.