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 intégrations, et plus encore. Pensez-y comme au 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 au fil de l’évolution de vos besoins en matière de documentation.
Pour une expérience d’édition optimale, ajoutez la référence de schéma en haut de votre fichier docs.json
. Cela permet l’autocomplétion, la validation et l’affichage d’infobulles 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 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.
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 d’un clic sur le logo. Si aucun lien n’est fourni, le logo renverra vers votre page d’accueil. Exemple :
https://mintlify.com
Chemin vers votre fichier favicon, extension incluse. 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. Valeur par défaut : section
.Configuration du thème des code blocks. Valeur par défaut :
"system"
.Configuration simple :"system"
: faire correspondre le mode actuel du site (clair ou sombre)"dark"
: toujours utiliser 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 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 l’ensemble de votre documentation. Valeur 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, indépendamment du réglage de la bibliothèque.
Configuration des polices pour votre documentation. La police par défaut est Inter.
Show Polices
Show Polices
Famille de polices, par exemple « Open Sans ».
Graisse/épaisseur de la police, par exemple 400 ou 700. Les polices variables permettent 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 sont chargées automatiquement lorsque vous indiquez un nom de
family
Google Fonts, 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 Titres
Show Titres
Famille de polices, par exemple « Open Sans », « Playfair Display ».
Graisse/épaisseur de la police, par exemple 400 ou 700. Les polices variables permettent 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 sont chargées automatiquement lorsque vous indiquez un nom de
family
Google Fonts, donc aucune URL source n’est nécessaire.Format du fichier de police.
Remplacer les paramètres de police spécifiquement pour le texte courant.
Show Texte courant
Show Texte courant
Famille de polices, par exemple « Open Sans », « Playfair Display ».
Graisse/épaisseur de la police, par exemple 400 ou 700. Les polices variables permettent 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 sont chargées automatiquement lorsque vous indiquez un nom de
family
Google Fonts, donc aucune URL source n’est nécessaire.Format du fichier de police.
Paramètres de l’option de mode clair/sombre.
Show Apparence
Show Apparence
Mode de thème par défaut. Choisissez
system
pour respecter les réglages du système d’exploitation de l’utilisateur, ou light
/dark
pour imposer un mode spécifique. Par défaut, system
.Indique s’il faut masquer l’interrupteur de mode clair/sombre. Par défaut,
true
.Paramètres de couleur et de décoration d’arrière-plan.
Show Arrière-plan
Show Arrière-plan
Image d’arrière-plan pour votre site. Peut être un fichier unique ou des fichiers distincts pour les modes clair et sombre.
Décoration d’arrière-plan pour votre thème.
Couleurs d’arrière-plan personnalisées pour les modes clair et sombre.
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 de la barre de navigation.
Show Primary
Show Primary
Style du bouton. Choisissez
button
pour un bouton standard avec un label ou github
pour un lien vers un référentiel GitHub avec icon.Texte du bouton. S’applique uniquement lorsque
type
est button
.Cible 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 ou un lien externe valide vers la version de votre documentation dans cette langue.
Configuration du sélecteur de version pour les sites multi‑versions.
Show Versions
Show Versions
Onglets de navigation de premier niveau pour organiser les sections principales.
Show Tabs
Show Tabs
Nom affiché 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 si cet onglet est masqué par défaut.
URL ou chemin vers la destination de l’onglet.
Des liens d’ancrage qui apparaissent de manière bien visible dans la navigation de la barre latérale.
Show Ancres
Show Ancres
Nom d’affichage 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.
Show Couleur
Show Couleur
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 connexe.
Show Dropdowns
Show Dropdowns
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.
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 l’ouverture de 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 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
Bandeau de site affiché en haut des pages.
Show Banner
Show Banner
Contenu du bandeau. Prend en charge le texte brut et la mise en forme Markdown. Par exemple :
Report incorrect code
Copy
Ask AI
{
"content": "🚀 Le bandeau est en ligne ! [En savoir plus](mintlify.com)"
}
Indique si les utilisateurs peuvent fermer le bandeau. 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 aperçus et les déploiements de production.
Configurations de l’API
Paramètres de la documentation de l’API et du bac à sable interactif.
Show Api
Show Api
Fichiers de spécification OpenAPI pour générer la documentation de l’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 de l’API. Peut être une seule URL/un seul chemin ou un tableau d’URL/chemins.
Paramètres d’affichage des paramètres de l’API.
Show Params
Show Params
Indique s’il faut développer tous les paramètres par défaut. Par défaut :
closed
.Configurations 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 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 connaître les options.
Indique 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é API Clearbit.
Intégration Fathom Analytics.
Show Fathom
Show Fathom
L’ID de votre site Fathom.
Intégration de Front Chat.
Show Frontchat
Show Frontchat
Votre identifiant de snippet Front Chat.Longueur minimale : 6
Intégration à Google Analytics 4.
Show Ga4
Show Ga4
Votre ID 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 motif : ^G
Intégration Intercom.
Show Intercom
Show Intercom
Votre ID d’app Intercom.Longueur minimale : 6
Intégration Koala.
Show Koala
Show Koala
Votre clé API publique Koala.Longueur minimale : 2
Intégration LogRocket.
Show LogRocket
Show LogRocket
L’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 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": "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"
},
"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": "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 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 vérifier 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
.