docs.json te permite convertir una colección de archivos Markdown en un sitio de documentación navegable y personalizado. Este archivo de configuración obligatorio controla el estilo, la navigation, las integraciones y más. Piénsalo como el plano de tu documentación.
La configuración en docs.json se aplica globalmente a todas las páginas.
Configurar tu docs.json
theme, name, colors.primary y navigation. Los demás campos son opcionales y puedes añadirlos a medida que crezcan las necesidades de tu documentación.
Para obtener la mejor experiencia de edición, incluye la referencia del esquema en la parte superior de tu archivo docs.json. Esto habilita el autocompletado, la validación y sugerencias útiles en la mayoría de los editores de código:
{
"$schema": "https://mintlify.com/docs.json",
"theme": "mint",
"name": "Tu Documentación",
"colors": {
"primary": "#ff0000"
},
"navigation": {
// Tu estructura de navegación
}
// El resto de tu configuración
}
Referencia
docs.json.
Personalización
mint, maple, palm, willow, linden, almond, aspen.Consulta Temas para más información.Mostrar Colors
Mostrar Colors
#.#.#.Mostrar Logo
Mostrar Logo
/logo.png/logo-dark.pnghttps://mintlify.com/favicon.pngMostrar Thumbnails
Mostrar Thumbnails
colors.Mostrar Fonts
Mostrar Fonts
Mostrar Estilo
Mostrar Estilo
section para mostrar el nombre de la sección o breadcrumbs para mostrar la ruta de navegación completa. El valor predeterminado es section.- Establécelo en
truepara forzar la carga de las hojas de estilo de LaTeX cuando la detección automática no reconozca tus expresiones matemáticas. - Establécelo en
falsepara evitar cargar las hojas de estilo de LaTeX y mejorar el rendimiento si no usas expresiones matemáticas pero tienes contenido que activa una detección de falso positivo.
"system".Configuración simple:"system": Se ajusta al modo actual del sitio (claro u oscuro)"dark": Usa siempre el modo oscuro
- Usa una cadena para especificar un único tema de Shiki para todos los bloques de código
- Usa un objeto para especificar temas de Shiki separados para los modos claro y oscuro
"styling": {
"codeblocks": {
"theme": "dracula"
}
}
Mostrar Iconos
Mostrar Iconos
fontawesome.Mostrar Fuentes
Mostrar Fuentes
- URL a una fuente alojada, como https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
- Ruta a un archivo de fuente local, como
/fonts/Hubot-Sans.woff2.
family de Google Fonts, por lo que no necesitas una URL de source.source.Mostrar Encabezado
Mostrar Encabezado
- URL a una fuente alojada, como https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
- Ruta a un archivo de fuente local, como
/fonts/Hubot-Sans.woff2.
family de Google Fonts, por lo que no necesitas una URL de source.source.Mostrar Cuerpo
Mostrar Cuerpo
- URL a una fuente alojada, como https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
- Ruta a un archivo de fuente local, como
/fonts/Hubot-Sans.woff2.
family de Google Fonts, por lo que no necesitas una URL de source.source.Mostrar Apariencia
Mostrar Apariencia
system para ajustarse a la configuración del sistema operativo del usuario, o light o dark para forzar un modo específico. El valor predeterminado es system.true.Mostrar Background
Mostrar Background
Estructura
Mostrar Navbar
Mostrar Navbar
Mostrar Links
Mostrar Links
- Nombre del icono de Font Awesome
- Nombre del icono de Lucide
- Código SVG (compatible con JSX) envuelto entre llaves
- URL a un icono alojado externamente
- Ruta a un archivo de icono en tu proyecto
- Convierte tu SVG usando el convertidor SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
regular, solid, light, thin, sharp-solid, duotone, brands.Mostrar Primary
Mostrar Primary
button para un botón estándar con label o github para un enlace a un repositorio de GitHub con icon.type es button.type es github, debe ser la URL de un repositorio de GitHub.Mostrar Navegación
Mostrar Navegación
Mostrar Global
Mostrar Global
Mostrar Idiomas
Mostrar Idiomas
Mostrar Versions
Mostrar Versions
Mostrar Tabs
Mostrar Tabs
- Nombre del icono de Font Awesome
- Nombre del icono de Lucide
- Código SVG (compatible con JSX) envuelto entre llaves
- URL a un icono alojado externamente
- Ruta a un archivo de icono en tu proyecto
- Convierte tu SVG usando el convertidor SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
regular, solid, light, thin, sharp-solid, duotone, brands.Mostrar Anclas
Mostrar Anclas
- Nombre del icono de Font Awesome
- Nombre del icono de Lucide
- Código SVG (compatible con JSX) envuelto entre llaves
- URL a un icono alojado externamente
- Ruta a un archivo de icono en tu proyecto
- Convierte tu SVG usando el convertidor SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
regular, solid, light, thin, sharp-solid, duotone, brands.Mostrar Desplegables
Mostrar Desplegables
- Nombre del icono de Font Awesome
- Nombre del icono de Lucide
- Código SVG (compatible con JSX) envuelto entre llaves
- URL a un icono alojado externamente
- Ruta a un archivo de icono en tu proyecto
- Convierte tu SVG usando el convertidor SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
regular, solid, light, thin, sharp-solid, duotone, brands.Mostrar Productos
Mostrar Productos
- Nombre del icono de Font Awesome
- Nombre del icono de Lucide
- Código SVG (compatible con JSX) envuelto entre llaves
- URL a un icono alojado externamente
- Ruta a un archivo de icono en tu proyecto
- Convierte tu SVG usando el convertidor SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
regular, solid, light, thin, sharp-solid, duotone, brands.Mostrar Interacción
Mostrar Interacción
true para forzar la navegación a la primera página cuando se expande un grupo de navegación. Establécelo en false para evitar la navegación y solo expandir o contraer el grupo. Déjalo sin establecer para usar el comportamiento predeterminado del tema.Mostrar Metadatos
Mostrar Metadatos
false.Mostrar Pie de página
Mostrar Pie de página
{
"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, podcastMostrar Banner
Mostrar Banner
{
"content": "🚀 Banner is live! [Learn more](mintlify.com)"
}
false.Mostrar Contextual
Mostrar Contextual
copy: Copia la página actual como Markdown en el portapapeles.view: Muestra la página actual como Markdown en una nueva pestaña.chatgpt: Envía el contenido de la página actual a ChatGPT.claude: Envía el contenido de la página actual a Claude.perplexity: Envía el contenido de la página actual a Perplexity.mcp: Copia la URL de tu servidor MCP en el portapapeles.cursor: Instala tu servidor MCP alojado en Cursor.vscode: Instala tu servidor MCP alojado en VSCode.

Configuraciones de la API
Mostrar Api
Mostrar Api
Mostrar Params
Mostrar Params
closed.Mostrar Examples
Mostrar Examples
bash(se muestra como cURL)gojavajavascriptnode(se muestra como Node.js)phppowershellpythonrubyswift
curl, golang, js, nodejs, rb, sh.all.false.Mostrar Mdx
Mostrar Mdx
SEO y búsqueda
Mostrar SEO
Mostrar SEO
navigable para indexar solo las páginas que están en la navigation de tu docs.json o elige all para indexar todas las páginas. De forma predeterminada, es navigable.Mostrar Search
Mostrar Search
Integraciones
Mostrar Integraciones
Mostrar Integraciones
Mostrar Amplitude
Mostrar Amplitude
Mostrar Clearbit
Mostrar Clearbit
Mostrar Fathom
Mostrar Fathom
Mostrar Frontchat
Mostrar Frontchat
Mostrar Ga4
Mostrar Ga4
Mostrar Gtm
Mostrar Gtm
Mostrar Heap
Mostrar Heap
Mostrar Intercom
Mostrar Intercom
Mostrar LogRocket
Mostrar LogRocket
Mostrar Mixpanel
Mostrar Mixpanel
Mostrar Osano
Mostrar Osano
Mostrar Telemetría
Mostrar Telemetría
false, las funcionalidades de comentarios también se desactivan y no se muestran en las páginas de tu documentación.Errores
Mostrar Errores
Mostrar Errores
Ejemplos
- Ejemplo básico
- Ejemplo de API interactivo
- Ejemplo multilingüe
{
"$schema": "https://mintlify.com/docs.json",
"theme": "maple",
"name": "Example Co.",
"description": "Example Co. es una empresa que proporciona contenido de ejemplo y texto de marcador de posición.",
"colors": {
"primary": "#3B82F6",
"light": "#F8FAFC",
"dark": "#0F172A"
},
"navigation": {
"dropdowns": [
{
"dropdown": "Documentación",
"icon": "book",
"description": "Cómo usar el producto de Example Co.",
"groups": [
{
"group": "Primeros pasos",
"pages": [
"index",
"quickstart"
]
},
{
"group": "Personalización",
"pages": [
"settings",
"users",
"features"
]
},
{
"group": "Facturación",
"pages": [
"billing/overview",
"billing/payments",
"billing/subscriptions"
]
}
]
},
{
"dropdown": "Registro de cambios",
"icon": "history",
"description": "Actualizaciones y cambios",
"pages": [
"changelog"
]
}
]
},
"logo": {
"light": "/logo-light.svg",
"dark": "/logo-dark.svg",
"href": "https://example.com"
},
"navbar": {
"links": [
{
"label": "Comunidad",
"href": "https://example.com/community"
}
],
"primary": {
"type": "button",
"label": "Comenzar",
"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": "Recursos",
"items": [
{
"label": "Clientes",
"href": "https://example.com/customers"
},
{
"label": "Empresarial",
"href": "https://example.com/enterprise"
},
{
"label": "Solicitar vista previa",
"href": "https://example.com/preview"
}
]
},
{
"header": "Empresa",
"items": [
{
"label": "Empleos",
"href": "https://example.com/careers"
},
{
"label": "Blog",
"href": "https://example.com/blog"
},
{
"label": "Política de privacidad",
"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": "No se puede encontrar",
"description": "¿Qué **pasó** con esta _página_?"
}
}
}
Actualizar desde mint.json
mint.json, sigue estos pasos para actualizar a docs.json.
Instala o actualiza la CLI
npm i -g mint
mint update
Crea tu archivo docs.json
mint upgrade
docs.json a partir de tu mint.json existente. Revisa el archivo generado para asegurarte de que toda la configuración sea correcta.Elimina tu archivo mint.json
docs.json esté configurado correctamente, puedes eliminar de forma segura tu antiguo archivo mint.json.