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 :
{
"$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
mint, maple, palm, willow, linden, almond, aspen.Voir Thèmes pour plus d’informations.Afficher Couleurs
Afficher Couleurs
#.#.#.Afficher Logo
Afficher Logo
/logo.png/logo-dark.pnghttps://mintlify.com/favicon.pngAfficher Styling
Afficher Styling
section pour afficher le nom de la section ou breadcrumbs pour afficher le chemin de navigation complet. La valeur par défaut est section."system".Configuration simple :"system": correspond au mode actuel du site (clair ou sombre)"dark": toujours utiliser 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
"styling": {
"codeblocks": {
"theme": "dracula"
}
}
Afficher Icons
Afficher Icons
fontawesome.Afficher Polices
Afficher Polices
- URL d’une police hébergée, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
- Chemin vers un fichier de police local, par exemple
/fonts/Hubot-Sans.woff2.
family Google Font ; aucune URL source n’est donc nécessaire.source.Afficher Titres
Afficher Titres
- URL d’une police hébergée, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
- Chemin vers un fichier de police local, par exemple
/fonts/Hubot-Sans.woff2.
family Google Font ; aucune URL source n’est donc nécessaire.source.Afficher Corps du texte
Afficher Corps du texte
- URL d’une police hébergée, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
- Chemin vers un fichier de police local, par exemple
/fonts/Hubot-Sans.woff2.
family Google Font ; aucune URL source n’est donc nécessaire.source.Afficher Apparence
Afficher Apparence
system pour correspondre aux réglages de l’OS des utilisateurs, ou light/dark pour imposer un mode spécifique. Valeur par défaut : system.true.Afficher Arrière-plan
Afficher Arrière-plan
Afficher Couleur
Afficher Couleur
Structure
Afficher Navbar
Afficher Navbar
Afficher Links
Afficher Links
- 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
heightetwidthsi nécessaire.
regular, solid, light, thin, sharp-solid, duotone, brands.Afficher Primary
Afficher Primary
button pour un bouton standard avec un libellé ou github pour un lien vers un référentiel GitHub avec icône.type est button.type est github, elle doit être l’URL d’un référentiel GitHub.Afficher Navigation
Afficher Navigation
Afficher Global
Afficher Global
Afficher Langues
Afficher Langues
Afficher Versions
Afficher Versions
Afficher Tabs
Afficher Tabs
- 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
heightetwidthsi nécessaire.
regular, solid, light, thin, sharp-solid, duotone, brands.Afficher Ancres
Afficher Ancres
- 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
heightetwidthsi nécessaire.
regular, solid, light, thin, sharp-solid, duotone, brands.Afficher Couleur
Afficher Couleur
Afficher Menus déroulants
Afficher Menus déroulants
- 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
heightetwidthsi nécessaire.
regular, solid, light, thin, sharp-solid, duotone, brands.Afficher Produits
Afficher Produits
- 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
heightetwidthsi nécessaire.
regular, solid, light, thin, sharp-solid, duotone, brands.Afficher Interaction
Afficher Interaction
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.Afficher Footer
Afficher Footer
{
"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, podcastAfficher Banner
Afficher Banner
{
"content": "🚀 La bannière est en ligne ! [En savoir plus](mintlify.com)"
}
false.Afficher Contextual
Afficher Contextual
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.

Configurations d’API
Afficher Api
Afficher Api
Afficher Params
Afficher Params
closed.Afficher Examples
Afficher Examples
all.false.MDX.Afficher Mdx
Afficher Mdx
SEO et recherche
Afficher Seo
Afficher Seo
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.Afficher Search
Afficher Search
Intégrations
Afficher Intégrations
Afficher Intégrations
Afficher Amplitude
Afficher Amplitude
Afficher Clearbit
Afficher Clearbit
Afficher Fathom
Afficher Fathom
Afficher Frontchat
Afficher Frontchat
Afficher Ga4
Afficher Ga4
Afficher Gtm
Afficher Gtm
Afficher Intercom
Afficher Intercom
Afficher LogRocket
Afficher LogRocket
Afficher Mixpanel
Afficher Mixpanel
Afficher Osano
Afficher Osano
Afficher Télémétrie
Afficher Télémétrie
Erreurs
Afficher Erreurs
Afficher Erreurs
Exemples
- Exemple de base
- Exemple d’API interactif
- Exemple multilingue
{
"$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.
Installer ou mettre à jour l’interface en ligne de commande (CLI)
npm i -g mint
mint update
Créer votre fichier docs.json
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.Supprimer votre fichier mint.json
docs.json est correctement configuré, vous pouvez supprimer en toute sécurité votre ancien fichier mint.json.