docs.json
vous permet de transformer une collection de fichiers Markdown en un site de documentation navigable et personnalisé. Ce fichier de configuration requis contrôle le style, la navigation, les integrations, et plus encore. Considérez-le comme le plan de votre documentation.
Les paramètres de 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 sont appliquées 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 la mise en avant 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 avant 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 non renseigné, le logo renverra vers votre page d’accueil. Exemple :
https://mintlify.com
Chemin vers votre fichier favicon, y compris l’extension du fichier. 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. La valeur par défaut est section
.Configuration du thème des code blocks. La valeur par défaut est
"system"
.Configuration simple :"system"
: fait correspondre le mode actuel du site (clair ou sombre)"dark"
: utilise toujours le mode sombre
- Utilisez une chaîne pour spécifier un seul thème Shiki pour tous les code blocks
- Utilisez un objet pour spécifier des thèmes Shiki distincts pour les modes clair et sombre
Un seul nom de thème Shiki à 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. La valeur par défaut est
fontawesome
.Vous pouvez spécifier une URL pointant 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 toute icône individuelle, indépendamment du paramètre de bibliothèque.
Configuration de la police pour les titres de votre documentation. La police par défaut varie selon le thème.
Show Fonts
Show Fonts
Famille de polices, comme « Open Sans ».
Graisse de police, par exemple 400 ou 700. Les polices variables prennent en charge des graisses 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 sont chargées automatiquement lorsque vous spécifiez un nom de
family
Google Fonts, aucune URL source n’est donc nécessaire.Format de fichier de police.
Paramètres de l’interrupteur de mode clair/sombre.
Show Appearance
Show Appearance
Mode de thème par défaut. Choisissez
system
pour s’aligner sur les réglages du système d’exploitation des utilisateurs, ou light
/dark
pour imposer un mode spécifique. La valeur par défaut est system
.Indique s’il faut masquer l’interrupteur de mode clair/sombre. La valeur par défaut est
true
.Paramètres de couleur et de décoration de l’arrière-plan.
Show Arrière-plan
Show Arrière-plan
Image d’arrière-plan de votre site. Peut être un fichier unique ou des fichiers distincts pour les modes light et dark.
Décoration d’arrière-plan de votre thème.
Couleurs d’arrière-plan personnalisées pour les modes light et dark.
Show Couleur
Show Couleur
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.
Cible 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 dans 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 icône.Texte du bouton. S’applique uniquement lorsque
type
est button
.Cible du bouton. Doit être une URL externe. Si
type
est github
, elle doit être 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 ou un lien externe valide vers la version de votre documentation dans cette langue.
Configuration du sélecteur de versions pour les sites multiversions.
Show Versions
Show Versions
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 qui apparaissent en évidence 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 si cette ancre doit être masquée par défaut.
URL ou chemin de destination de l’ancre.
Menus déroulants pour organiser du contenu associé.
Show Menus déroulants
Show Menus déroulants
Nom affiché 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 si ce menu déroulant doit être masqué par défaut.
URL ou chemin de destination du menu déroulant.
Produits pour organiser le contenu en sections.
Show Produits
Show Produits
Nom affiché 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.
Menus déroulants pour regrouper du contenu connexe.
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 de 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 seulement développer ou réduire le groupe. Laissez non défini 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 sur l’ensemble du site affichée en haut des pages.
Show Banner
Show Banner
Contenu de la bannière. Prend en charge le texte brut et la mise en forme 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. Par défaut :
false
.Redirections pour les pages déplacées, renommées ou supprimées.
Menu contextuel pour le contenu optimisé par l’IA et les 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 aperçus et les déploiements de production.
Configurations 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
.Paramètres pour les exemples d’API générés automatiquement.
Show Examples
Show Examples
Langages d’exemple pour les 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. Lorsque cette option est activée, le bac à sable remplit automatiquement les champs de requête avec des valeurs d’exemple provenant de votre spécification OpenAPI. Valeur par défaut :
false
.Paramètres pour les 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. Consultez la référence des balises meta courantes pour les options.
Indiquez quelles pages doivent être indexées par les moteurs de recherche. Choisissez
navigable
pour indexer uniquement les pages présentes dans la navigation de votre docs.json
, ou all
pour indexer toutes les pages. 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 des données Clearbit.
Show Clearbit
Show Clearbit
Votre clé API Clearbit.
Intégration à Fathom Analytics.
Show Fathom
Show Fathom
Votre ID de site Fathom.
Intégration du chat Front.
Show Frontchat
Show Frontchat
Votre identifiant de snippet Front chat.Longueur minimale : 6
Intégration à Google Analytics 4.
Show Ga4
Show Ga4
Votre identifiant de mesure Google Analytics 4.Doit correspondre au motif : ^G
Intégration de Google Tag Manager.
Show Gtm
Show Gtm
Votre identifiant de balise Google Tag Manager.Doit correspondre au motif : ^G
Intégration à Intercom.
Show Intercom
Show Intercom
L’ID d’application Intercom.Longueur minimale : 6
Intégration de 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 si la télémétrie est activée.
Erreurs
Paramètres de gestion des erreurs.
Show Erreurs
Show Erreurs
Gestion de l’erreur 404 « Page non trouvée ».
Exemples
- Exemple de base
- 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 substitution.",
"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": "Entreprise",
"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"
},
"telemetry": {
"enabled": true
},
"cookies": {
"key": "example_cookie_key",
"value": "example_cookie_value"
}
},
"contextual": {
"options": [
"copy",
"view",
"chatgpt",
"claude"
]
},
"errors": {
"404": {
"redirect": false,
"title": "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 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 crée 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
.