docs.json
ermöglicht es dir, eine Sammlung von Markdown-Dateien in eine navigierbare, individuell angepasste Dokumentationswebsite zu verwandeln. Diese erforderliche Konfigurationsdatei steuert Styling, Navigation, Integrationen und mehr. Denk daran als den Bauplan für deine Dokumentation.
Einstellungen in docs.json
gelten global für alle Seiten.
Einrichten Ihrer docs.json
theme
, name
, colors.primary
und navigation
angeben. Alle anderen Felder sind optional und können hinzugefügt werden, wenn der Bedarf Ihrer Dokumentation wächst.
Für das beste Bearbeitungserlebnis fügen Sie die Schema-Referenz oben in Ihrer docs.json
-Datei ein. Dadurch werden Autovervollständigung, Validierung und hilfreiche Tooltips in den meisten Code-Editoren aktiviert:
Copy
Ask AI
{
"$schema": "https://mintlify.com/docs.json",
"theme": "mint",
"name": "Your Docs",
"colors": {
"primary": "#ff0000"
},
"navigation": {
// Ihre Navigationsstruktur
}
// Der Rest Ihrer Konfiguration
}
Referenz
docs.json
.
Anpassung
Das Layout-Theme Ihrer Site.Eines der folgenden:
mint
, maple
, palm
, willow
, linden
, almond
, aspen
.Siehe Themes für weitere Informationen.Der Name Ihres Projekts, Ihrer Organisation oder Ihres Produkts.
Die in Ihrer Dokumentation verwendeten Farben. Farben werden je nach Theme unterschiedlich angewendet. Wenn Sie nur eine Primärfarbe angeben, wird sie für alle Farbelemente verwendet.
Show Colors
Show Colors
Die Primärfarbe für Ihre Dokumentation. Wird im Allgemeinen im hellen Modus zur Hervorhebung verwendet, mit einigen Variationen je nach Theme.Muss ein Hex-Code sein, der mit
#
beginnt.Die Farbe, die im dunklen Modus zur Hervorhebung verwendet wird.Muss ein Hex-Code sein, der mit
#
beginnt.Die Farbe für Buttons und Hover-Zustände in hellem wie dunklem Modus, mit einigen Variationen je nach Theme.Muss ein Hex-Code sein, der mit
#
beginnt.Beschreibung Ihrer Site für SEO und KI-Indexierung.
Ihr Logo für den hellen und den dunklen Modus.
Show Logo
Show Logo
Pfad zu Ihrer Logo-Datei für den hellen Modus. Geben Sie die Dateierweiterung an. Beispiel:
/logo.png
Pfad zu Ihrer Logo-Datei für den dunklen Modus. Geben Sie die Dateierweiterung an. Beispiel:
/logo-dark.png
Die URL, zu der beim Klicken auf das Logo weitergeleitet wird. Wenn nicht angegeben, verlinkt das Logo auf Ihre Startseite. Beispiel:
https://mintlify.com
Pfad zu Ihrer Favicon-Datei einschließlich Dateierweiterung. Wird automatisch auf passende Favicon-Größen skaliert.
Kann eine einzelne Datei oder separate Dateien für hellen und dunklen Modus sein. Beispiel:
/favicon.png
Thumbnail-Anpassung für soziale Medien und Seitenvorschauen.
Konfigurationen für das visuelle Styling.
Show Styling
Show Styling
Der Stil der Seiten-Kopfleiste. Wählen Sie
section
, um den Abschnittsnamen anzuzeigen, oder breadcrumbs
, um den vollständigen Navigationspfad anzuzeigen. Standard ist section
.Das Theme der Codeblöcke. Wählen Sie
system
, um dem Site-Theme zu folgen, oder dark
, um Codeblöcke immer dunkel darzustellen. Standard ist system
.Einstellungen für die Icon-Bibliothek.
Show Icons
Show Icons
Icon-Bibliothek, die in Ihrer Dokumentation verwendet wird. Standardmäßig
fontawesome
.Unabhängig von der Bibliothekseinstellung können Sie für jedes einzelne Icon eine URL zu einem extern gehosteten Icon, einen Pfad zu einer Icon-Datei in Ihrem Projekt oder JSX-kompatiblen SVG-Code angeben.
Schriftkonfiguration für Ihre Dokumentation. Die Standardschrift ist Inter.
Show Fonts
Show Fonts
Schriftfamilie, z. B. „Open Sans“, „Playfair Display“.
Schriftstärke, z. B. 400 oder 700. Variable Fonts unterstützen präzise Stärken wie 550.
URL zur Schriftquelle, z. B. https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts werden automatisch geladen, wenn Sie einen Google-Font-
family
-Namen angeben; eine Quell-URL ist dann nicht erforderlich.Schriftdateiformat.
Schrifteinstellungen speziell für Überschriften überschreiben.
Show Heading
Show Heading
Schriftfamilie, z. B. „Open Sans“, „Playfair Display“.
Schriftstärke, z. B. 400 oder 700. Variable Fonts unterstützen präzise Stärken wie 550.
URL zur Schriftquelle, z. B. https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts werden automatisch geladen, wenn Sie einen Google-Font-
family
-Namen angeben; eine Quell-URL ist dann nicht erforderlich.Schriftdateiformat.
Schrifteinstellungen speziell für Fließtext überschreiben.
Show Body
Show Body
Schriftfamilie, z. B. „Open Sans“, „Playfair Display“.
Schriftstärke, z. B. 400 oder 700. Variable Fonts unterstützen präzise Stärken wie 550.
URL zur Schriftquelle, z. B. https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts werden automatisch geladen, wenn Sie einen Google-Font-
family
-Namen angeben; eine Quell-URL ist dann nicht erforderlich.Schriftdateiformat.
Einstellungen für den Umschalter Hell-/Dunkelmodus.
Show Appearance
Show Appearance
Standard-Designmodus. Wählen Sie
system
, um die Betriebssystemeinstellungen der Nutzer zu übernehmen, oder light
bzw. dark
, um einen bestimmten Modus zu erzwingen. Standardmäßig system
.Ob der Umschalter für den Hell-/Dunkelmodus ausgeblendet wird. Standardmäßig
true
.Einstellungen für Hintergrundfarbe und -dekoration.
Show Hintergrund
Show Hintergrund
Hintergrundbild für Ihre Website. Kann eine einzelne Datei oder separate Dateien für den hellen und den dunklen Modus sein.
Hintergrunddekoration für Ihr Theme.
Benutzerdefinierte Hintergrundfarben für den hellen und den dunklen Modus.
Struktur
Elemente der Navigationsleiste.
Show Navbar
Show Navbar
Links, die in der Navigationsleiste angezeigt werden.
Show Links
Show Links
Text des Links.
URL oder Pfad des Linkziels.
Das anzuzeigende Icon.Optionen:
- Name eines Font Awesome-Icons
- Name eines Lucide-Icons
- JSX-kompatibler SVG-Code in geschweiften Klammern
- URL zu einem extern gehosteten Icon
- Pfad zu einer Icon-Datei in deinem Projekt
- Konvertiere dein SVG mit dem SVGR-Konverter.
- Füge deinen SVG-Code in das SVG-Eingabefeld ein.
- Kopiere das vollständige
<svg>...</svg>
-Element aus dem JSX-Ausgabefeld. - Umschließe den JSX-kompatiblen SVG-Code mit geschweiften Klammern:
icon={<svg ...> ... </svg>}
. - Passe
height
undwidth
nach Bedarf an.
Der Iconstil von Font Awesome. Wird nur mit Font Awesome-Icons verwendet.Optionen:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Primäre Schaltfläche in der Navigationsleiste.
Show Primary
Show Primary
Schaltflächenstil. Wähle „button“ für eine Standardschaltfläche mit Beschriftung oder „github“ für einen Link zu einem GitHub-Repository mit Icon.
Schaltflächentext. Gilt nur, wenn
type
„button“ ist.Ziel der Schaltfläche. Muss ein gültiger Pfad oder eine externe URL sein. Wenn
type
„github“ ist, muss es eine GitHub-Repository-URL sein.Die Navigationsstruktur Ihrer Inhalte.
Show Navigation
Show Navigation
Globale Navigationselemente, die auf allen Seiten und in allen Abschnitten erscheinen.
Show Global
Show Global
Sprachumschalter-Konfiguration für lokalisierte Websites.
Show Languages
Show Languages
language
"en" | "cn" | "zh" | "zh-Hans" | "zh-Hant" | "es" | "fr" | "ja" | "jp" | "pt" | "pt-BR" | "de" | "ko" | "it" | "ru" | "id" | "ar" | "tr"
required
Sprachcode im ISO-639-1-Format
Ob dies die Standardsprache ist.
Ob diese Sprachoption standardmäßig verborgen ist.
Ein gültiger Pfad oder externer Link zur Sprachversion Ihrer Dokumentation.
Konfiguration des Versionsumschalters für Websites mit mehreren Versionen.
Registerkarten auf oberster Ebene zur Organisation der Hauptbereiche.
Show Tabs
Show Tabs
Anzeigename der Registerkarte.Mindestlänge: 1
Das anzuzeigende Icon.Optionen:
- Name eines Font Awesome-Icons
- Name eines Lucide-Icons
- JSX-kompatibler SVG-Code in geschweiften Klammern
- URL zu einem extern gehosteten Icon
- Pfad zu einer Icon-Datei in deinem Projekt
- Konvertiere dein SVG mit dem SVGR-Konverter.
- Füge deinen SVG-Code in das SVG-Eingabefeld ein.
- Kopiere das vollständige
<svg>...</svg>
-Element aus dem JSX-Ausgabefeld. - Umschließe den JSX-kompatiblen SVG-Code mit geschweiften Klammern:
icon={<svg ...> ... </svg>}
. - Passe
height
undwidth
nach Bedarf an.
Der Iconstil von Font Awesome. Wird nur mit Font Awesome-Icons verwendet.Optionen:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Ob diese Registerkarte standardmäßig ausgeblendet ist.
URL oder Pfad des Ziels der Registerkarte.
Verankerte Links, die in der Seitenleiste prominent angezeigt werden.
Show Anchors
Show Anchors
Anzeigename des Ankers.Mindestlänge: 1
Das anzuzeigende Icon.Optionen:
- Name eines Font Awesome-Icons
- Name eines Lucide-Icons
- JSX-kompatibler SVG-Code in geschweiften Klammern
- URL zu einem extern gehosteten Icon
- Pfad zu einer Icon-Datei in deinem Projekt
- Konvertiere dein SVG mit dem SVGR-Konverter.
- Füge deinen SVG-Code in das SVG-Eingabefeld ein.
- Kopiere das vollständige
<svg>...</svg>
-Element aus dem JSX-Ausgabefeld. - Umschließe den JSX-kompatiblen SVG-Code mit geschweiften Klammern:
icon={<svg ...> ... </svg>}
. - Passe
height
undwidth
nach Bedarf an.
Der Iconstil von Font Awesome. Wird nur mit Font Awesome-Icons verwendet.Optionen:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Benutzerdefinierte Farben für den Anker.
Gibt an, ob dieser Anker standardmäßig ausgeblendet wird.
URL oder Pfad für das Ziel des Ankers.
Dropdown-Menüs zur Organisation verwandter Inhalte.
Show Dropdowns
Show Dropdowns
Anzeigename des Dropdown-Menüs.Mindestlänge: 1
Das anzuzeigende Icon.Optionen:
- Name eines Font Awesome-Icons
- Name eines Lucide-Icons
- JSX-kompatibler SVG-Code in geschweiften Klammern
- URL zu einem extern gehosteten Icon
- Pfad zu einer Icon-Datei in deinem Projekt
- Konvertiere dein SVG mit dem SVGR-Konverter.
- Füge deinen SVG-Code in das SVG-Eingabefeld ein.
- Kopiere das vollständige
<svg>...</svg>
-Element aus dem JSX-Ausgabefeld. - Umschließe den JSX-kompatiblen SVG-Code mit geschweiften Klammern:
icon={<svg ...> ... </svg>}
. - Passe
height
undwidth
nach Bedarf an.
Der Iconstil von Font Awesome. Wird nur mit Font Awesome-Icons verwendet.Optionen:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Ob dieses Dropdown-Menü standardmäßig ausgeblendet ist.
URL oder Pfad des Ziels für das Dropdown-Menü.
Sprachumschalter für mehrsprachige Sites.
Einstellungen für die Benutzerinteraktion bei Navigationselementen.
Show Interaktion
Show Interaktion
Steuert das automatische Navigationsverhalten beim Auswählen von Navigationsgruppen. Auf
true
setzen, um beim Erweitern einer Navigationsgruppe die Navigation zur ersten Seite zu erzwingen. Auf false
setzen, um die Navigation zu verhindern und nur die Gruppe ein- oder auszuklappen. Nicht setzen, um das Standardverhalten des Themes zu verwenden.Footer-Inhalt und Social-Media-Links.
Show Footer
Show Footer
Social-Media-Profile, die im Footer angezeigt werden sollen. Jeder Schlüssel ist ein Plattformname, jeder Wert ist die URL zu Ihrem Profil. Zum Beispiel:Gültige Eigenschaftsnamen:
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
Websiteweiter Banner, der oben auf den Seiten angezeigt wird.
Weiterleitungen für verschobene, umbenannte oder gelöschte Seiten.
Kontextmenü für KI-optimierte Inhalte und Integrationen.
Show Kontextuell
Show Kontextuell
options
array of "copy" | "view" | "chatgpt" | "claude" | "perplexity" | "mcp" | "cursor" | "vscode"
required
Aktionen, die im Kontextmenü verfügbar sind. Die erste Option erscheint als Standard.
copy
: Kopiert die aktuelle Seite als Markdown in die Zwischenablage.view
: Zeigt die aktuelle Seite als Markdown in einem neuen Tab an.chatgpt
: Sendet den aktuellen Seiteninhalt an ChatGPT.claude
: Sendet den aktuellen Seiteninhalt an Claude.perplexity
: Sendet den aktuellen Seiteninhalt an Perplexity.mcp
: Kopiert Ihre MCP-Server-URL in die Zwischenablage.cursor
: Installiert Ihren gehosteten MCP-Server in Cursor.vscode
: Installiert Ihren gehosteten MCP-Server in VSCode.

Das Kontextmenü ist nur in Vorschau- und Produktionsbereitstellungen verfügbar.
API-Konfigurationen
Einstellungen für API-Dokumentation und interaktive Spielwiese.
Show Api
Show Api
OpenAPI-Spezifikationsdateien zur Generierung der API-Dokumentation. Kann eine einzelne URL/ein einzelner Pfad oder ein Array von URLs/Pfaden sein.
AsyncAPI-Spezifikationsdateien zur Generierung der API-Dokumentation. Kann eine einzelne URL/ein einzelner Pfad oder ein Array von URLs/Pfaden sein.
Anzeigeeinstellungen für API-Parameter.
Show Params
Show Params
Ob standardmäßig alle Parameter aufgeklappt sind. Standard:
closed
.Konfigurationen für aus
MDX
-Dateien generierte API-Seiten.SEO und Suche
SEO-Indexierungskonfigurationen.
Show SEO
Show SEO
Meta-Tags, die zu jeder Seite hinzugefügt werden. Muss ein gültiges Schlüssel-Wert-Paar sein. Siehe Referenz gängiger Meta-Tags für Optionen.
Legen Sie fest, welche Seiten von Suchmaschinen indexiert werden sollen. Wählen Sie
navigable
, um nur Seiten zu indexieren, die in Ihrer docs.json
-Navigation enthalten sind, oder all
, um alle Seiten zu indexieren. Standardmäßig navigable
.Anzeigeeinstellungen für die Suche.
Show Search
Show Search
Platzhaltertext, der in der Suchleiste angezeigt wird.
Integrationen
Integrationen von Drittanbietern.
Show Integrations
Show Integrations
Amplitude-Analytics-Integration.
Show Amplitude
Show Amplitude
Ihr Amplitude-API-Schlüssel.
Integration für Clearbit-Datenanreicherung.
Show Clearbit
Show Clearbit
Ihr Clearbit-API-Schlüssel.
Front-Chat-Integration.
Show Frontchat
Show Frontchat
Ihre Front-Chat-Snippet-ID.Mindestlänge: 6
Google-Analytics-4-Integration.
Show Ga4
Show Ga4
Ihre Google-Analytics-4-Mess-ID.Muss dem Muster entsprechen: ^G
Google-Tag-Manager-Integration.
Show Gtm
Show Gtm
Ihre Google-Tag-Manager-Tag-ID.Muss dem Muster entsprechen: ^G
Intercom-Integration.
Show Intercom
Show Intercom
Ihre Intercom-App-ID.Mindestlänge: 6
Koala-Integration.
Show Koala
Show Koala
Ihr öffentlicher Koala-API-Schlüssel.Mindestlänge: 2
Mixpanel-Integration.
Show Mixpanel
Show Mixpanel
Ihr Mixpanel-Projekttoken.
Telemetrie-Einstellungen.
Show Telemetrie
Show Telemetrie
Legt fest, ob die Telemetrie aktiviert wird.
Fehler
Einstellungen für die Fehlerbehandlung.
Show Errors
Show Errors
Behandlung des 404-Fehlers „Seite nicht gefunden“.
Beispiele
docs.json
Copy
Ask AI
{
"$schema": "https://mintlify.com/docs.json",
"theme": "maple",
"name": "Example Co.",
"description": "Example Co. ist ein Unternehmen, das Beispielinhalte und Platzhaltertext bereitstellt.",
"colors": {
"primary": "#3B82F6",
"light": "#F8FAFC",
"dark": "#0F172A"
},
"navigation": {
"dropdowns": [
{
"dropdown": "Dokumentation",
"icon": "book",
"description": "So verwenden Sie das Produkt von Example Co.",
"groups": [
{
"group": "Erste Schritte",
"pages": [
"index",
"quickstart"
]
},
{
"group": "Anpassung",
"pages": [
"settings",
"users",
"features"
]
},
{
"group": "Abrechnung",
"pages": [
"billing/overview",
"billing/payments",
"billing/subscriptions"
]
}
]
},
{
"dropdown": "Änderungsprotokoll",
"icon": "history",
"description": "Updates und Änderungen",
"pages": [
"changelog"
]
}
]
},
"logo": {
"light": "/logo-light.svg",
"dark": "/logo-dark.svg",
"href": "https://example.com"
},
"navbar": {
"links": [
{
"label": "Community",
"href": "https://example.com/community"
}
],
"primary": {
"type": "button",
"label": "Loslegen",
"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": "Ressourcen",
"items": [
{
"label": "Kunden",
"href": "https://example.com/customers"
},
{
"label": "Enterprise",
"href": "https://example.com/enterprise"
},
{
"label": "Vorschau anfordern",
"href": "https://example.com/preview"
}
]
},
{
"header": "Unternehmen",
"items": [
{
"label": "Karriere",
"href": "https://example.com/careers"
},
{
"label": "Blog",
"href": "https://example.com/blog"
},
{
"label": "Datenschutzerklärung",
"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": "Nicht gefunden",
"description": "Was ist nur mit dieser **Seite** _passiert_?"
}
}
}
Upgrade von mint.json
mint.json
verwendet, folgen Sie diesen Schritten, um auf docs.json
zu aktualisieren.
1
CLI installieren oder aktualisieren
Wenn Sie die CLI noch nicht installiert haben, installieren Sie sie jetzt:Wenn die CLI bereits installiert ist, stellen Sie sicher, dass sie aktuell ist:
Copy
Ask AI
npm i -g mint
Copy
Ask AI
mint update
2
docs.json-Datei erstellen
Führen Sie in Ihrem Docs-Repository Folgendes aus:Dieser Befehl erstellt aus Ihrer vorhandenen
Copy
Ask AI
mint upgrade
mint.json
eine docs.json
-Datei. Überprüfen Sie die generierte Datei, um sicherzustellen, dass alle Einstellungen korrekt sind.3
mint.json-Datei löschen
Nachdem Sie überprüft haben, dass Ihre
docs.json
korrekt konfiguriert ist, können Sie die alte mint.json
-Datei sicher löschen.