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, navigation, integrations y más. Piénsalo como el plano de tu documentación.
Los ajustes en docs.json
se aplican 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:
Report incorrect code
Copy
Ask AI
{
"$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
El tema de diseño de tu sitio.Una de las siguientes opciones:
mint
, maple
, palm
, willow
, linden
, almond
, aspen
.Consulta Temas para obtener más información.El nombre de tu proyecto, organización o producto.
Los colores utilizados en tu documentación. Los colores se aplican de forma diferente según el tema. Si solo proporcionas un color primario, se usará para todos los elementos relacionados con el color.
Show Colors
Show Colors
El color primario de tu documentación. Generalmente se usa para resaltar en el modo claro, con alguna variación según el tema.Debe ser un código hexadecimal que comience con
#
.El color utilizado para resaltar en el modo oscuro.Debe ser un código hexadecimal que comience con
#
.El color utilizado para botones y estados hover en los modos claro y oscuro, con alguna variación según el tema.Debe ser un código hexadecimal que comience con
#
.Descripción de tu sitio para SEO e indexación por IA.
Configura tu logotipo para los modos claro y oscuro.
Show Logo
Show Logo
Ruta a tu archivo de logotipo para el modo claro. Incluye la extensión del archivo. Ejemplo:
/logo.png
Ruta a tu archivo de logotipo para el modo oscuro. Incluye la extensión del archivo. Ejemplo:
/logo-dark.png
La URL a la que redirigir al hacer clic en el logotipo. Si no se proporciona, el logotipo enlazará a tu página de inicio. Ejemplo:
https://mintlify.com
Ruta a tu archivo de favicon, incluida la extensión. Se redimensiona automáticamente a los tamaños de favicon apropiados.
Puede ser un archivo único o archivos separados para los modos claro y oscuro. Ejemplo:
/favicon.png
Personalización de miniaturas para redes sociales y vistas previas de página.
Configuraciones de estilo visual.
Show Styling
Show Styling
El estilo del “eyebrow” de la página. Elige
section
para mostrar el nombre de la sección o breadcrumbs
para mostrar la ruta completa de navegación. De forma predeterminada es section
.Configuración del tema de los bloques de código. De forma predeterminada es
"system"
.Configuración simple:"system"
: Coincidir con el modo actual del sitio (claro u oscuro)"dark"
: Usar 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
Un único nombre de tema de Shiki para usar tanto en modo claro como oscuro.
Report incorrect code
Copy
Ask AI
"styling": {
"codeblocks": {
"theme": "dracula"
}
}
Temas separados para los modos claro y oscuro.
Configuración de la biblioteca de iconos.
Show Icons
Show Icons
Biblioteca de iconos para usar en toda tu documentación. De forma predeterminada es
fontawesome
.Puedes especificar una URL a un icono alojado externamente, la ruta a un archivo de icono en tu proyecto o código SVG compatible con JSX para cualquier icono individual, independientemente de la configuración de la biblioteca.
Configuración tipográfica para tu documentación. La fuente predeterminada es Inter.
Show Fuentes
Show Fuentes
Familia tipográfica, por ejemplo, “Open Sans”.
Peso tipográfico, como 400 o 700. Las fuentes variables admiten pesos precisos como 550.
URL del archivo de tu fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts se cargan automáticamente cuando especificas un nombre de
family
de Google Fonts, por lo que no se necesita una URL de fuente.Formato del archivo de fuente.
Sobrescribe la configuración de la fuente específicamente para los encabezados.
Show Encabezado
Show Encabezado
Familia tipográfica, por ejemplo, “Open Sans”, “Playfair Display”.
Peso tipográfico, como 400 o 700. Las fuentes variables admiten pesos precisos como 550.
URL del archivo de tu fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts se cargan automáticamente cuando especificas un nombre de
family
de Google Fonts, por lo que no se necesita una URL de fuente.Formato del archivo de fuente.
Sobrescribe la configuración de la fuente específicamente para el cuerpo del texto.
Show Cuerpo
Show Cuerpo
Familia tipográfica, por ejemplo, “Open Sans”, “Playfair Display”.
Peso tipográfico, como 400 o 700. Las fuentes variables admiten pesos precisos como 550.
URL del archivo de tu fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Google Fonts se cargan automáticamente cuando especificas un nombre de
family
de Google Fonts, por lo que no se necesita una URL de fuente.Formato del archivo de fuente.
Configuración del conmutador de modo claro/oscuro.
Show Apariencia
Show Apariencia
Modo de tema predeterminado. Elige
system
para ajustarlo a la configuración del sistema operativo del usuario, o light
o dark
para forzar un modo específico. De manera predeterminada es system
.Indica si se debe ocultar el conmutador de modo claro/oscuro. De manera predeterminada es
true
.Configuración del color y la decoración del fondo.
Show Background
Show Background
Imagen de fondo para tu sitio. Puede ser un único archivo o archivos separados para los modos light y dark.
Decoración de fondo para tu tema.
Colores de fondo personalizados para los modos light y dark.
Estructura
Elementos de la barra de navegación que apuntan a enlaces externos.
Show Navbar
Show Navbar
Enlaces que se mostrarán en la barra de navegación.
Show Enlaces
Show Enlaces
Texto del enlace.
Destino del enlace. Debe ser una URL externa válida.
El icono que se mostrará.Opciones:
- 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
height
ywidth
según sea necesario.
El estilo de icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Botón principal de la barra de navegación.
Show Principal
Show Principal
Estilo del botón. Elige
button
para un botón estándar con label o github
para un enlace a un repositorio de GitHub con icon.Texto del botón. Solo aplica cuando
type
es button
.Destino del botón. Debe ser una URL externa. Si
type
es github
, debe ser la URL de un repositorio de GitHub.La estructura de navegación de tu contenido.
Show Navegación
Show Navegación
Elementos de navegación globales que aparecen en todas las páginas y secciones.
Show Global
Show Global
Configuración del selector de idioma para sitios localizados.
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
Código de idioma en formato ISO 639-1
Indica si es el idioma predeterminado.
Indica si se debe ocultar esta opción de idioma de forma predeterminada.
Una ruta válida o un enlace externo a la versión de tu documentación en este idioma.
Configuración del selector de versiones para sitios con múltiples versiones.
Pestañas de navegación de nivel superior para organizar secciones principales.
Show Tabs
Show Tabs
Nombre visible de la Tab.Longitud mínima: 1
El icono que se mostrará.Opciones:
- 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
height
ywidth
según sea necesario.
El estilo de icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Indica si esta Tab se oculta de forma predeterminada.
URL o ruta al destino de la Tab.
Enlaces ancla que aparecen de forma destacada en la navigation de la barra lateral.
Show Anchors
Show Anchors
Nombre para mostrar del ancla.Longitud mínima: 1
El icono que se mostrará.Opciones:
- 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
height
ywidth
según sea necesario.
El estilo de icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Colores personalizados para el ancla.
Indica si se debe ocultar este ancla de forma predeterminada.
URL o ruta de destino del ancla.
Menús desplegables para organizar contenido relacionado.
Show Menús desplegables
Show Menús desplegables
Nombre visible del menú desplegable.Longitud mínima: 1
El icono que se mostrará.Opciones:
- 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
height
ywidth
según sea necesario.
El estilo de icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Indica si este menú desplegable se oculta de forma predeterminada.
URL o ruta de destino del menú desplegable.
Productos para organizar el contenido en secciones.
Show Products
Show Products
Nombre visible del producto.
Descripción del producto.
El icono que se mostrará.Opciones:
- 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
height
ywidth
según sea necesario.
El estilo de icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.Selector de idiomas para sitios multilingües.
Menús desplegables para agrupar contenido relacionado.
Configuración de interacción del usuario para los elementos de navegación.
Show Interacción
Show Interacción
Controla el comportamiento de navegación automática al seleccionar grupos de navegación. Establece
true
para forzar la navegación a la primera página cuando se expanda un grupo de navegación. Establece false
para evitar la navegación y solo expandir o contraer el grupo. Déjalo sin definir para usar el comportamiento predeterminado del tema.Contenido del pie de página y enlaces a redes sociales.
Show Pie de página
Show Pie de página
Perfiles de redes sociales para mostrar en el pie de página. Cada key es el nombre de una plataforma y cada value es la URL de tu perfil. Por ejemplo:Nombres de propiedades válidos:
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
Banner del sitio mostrado en la parte superior de las páginas.
Show Banner
Show Banner
El contenido del banner. Admite texto sin formato y formato Markdown. Por ejemplo:
Report incorrect code
Copy
Ask AI
{
"content": "🚀 ¡El banner está activo! [Más información](mintlify.com)"
}
Indica si los usuarios pueden descartar el banner. De forma predeterminada es
false
.Redirecciones para páginas movidas, renombradas o eliminadas.
Menú contextual para contenido optimizado con IA e integraciones.
Show Contextual
Show Contextual
options
array of "copy" | "view" | "chatgpt" | "claude" | "perplexity" | "mcp" | "cursor" | "vscode"
required
Acciones disponibles en el menú contextual. La primera opción aparece como predeterminada.
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.

El menú contextual solo está disponible en implementaciones de vista previa y de producción.
Configuraciones de la API
Configuración de la documentación de la API y del área de pruebas interactiva.
Show Api
Show Api
Archivos de especificación OpenAPI para generar la documentación de la API. Puede ser una única URL/ruta o una matriz de URL/rutas.
Archivos de especificación AsyncAPI para generar la documentación de la API. Puede ser una única URL/ruta o una matriz de URL/rutas.
Configuración de visualización de los parámetros de la API.
Show Params
Show Params
Indica si se expanden todos los parámetros de forma predeterminada. El valor predeterminado es
closed
.Configuración del área de pruebas de la API.
Configuración de los ejemplos de API generados automáticamente.
Show Examples
Show Examples
Lenguajes de ejemplo para los fragmentos de API generados automáticamente
Indica si se muestran los parámetros opcionales en los ejemplos de la API. El valor predeterminado es
all
.Indica si se precarga el área de pruebas de la API con datos de ejemplos de esquemas. Cuando está habilitado, el área de pruebas completa automáticamente los campos de la solicitud con valores de ejemplo de tu especificación OpenAPI. El valor predeterminado es
false
.Configuración para páginas de API generadas a partir de archivos
MDX
.Show Mdx
Show Mdx
Configuración del servidor para solicitudes de API.
SEO y búsqueda
Configuraciones de indexación para SEO.
Show SEO
Show SEO
Metatags añadidos a cada página. Debe ser un par key-value válido. Consulta la referencia de metatags comunes para ver las opciones.
Especifica qué páginas deben indexar los motores de búsqueda. Elige
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 manera predeterminada, es navigable
.Configuraciones de visualización de la búsqueda.
Show Search
Show Search
Texto de marcador de posición que se muestra en la barra de búsqueda.
Integraciones
Integraciones de terceros.
Show Integraciones
Show Integraciones
Integración con Amplitude Analytics.
Show Amplitude
Show Amplitude
Tu API key de Amplitude.
Integración de enriquecimiento de datos de Clearbit.
Show Clearbit
Show Clearbit
Tu clave de API de Clearbit.
Integración con Fathom Analytics.
Show Fathom
Show Fathom
Tu ID del sitio en Fathom.
Integración de Front Chat.
Show Frontchat
Show Frontchat
Tu ID del fragmento de Front Chat.Longitud mínima: 6
Integración con Google Analytics 4.
Show Ga4
Show Ga4
Tu ID de medición de Google Analytics 4.Debe coincidir con el patrón: ^G
Integración con Google Tag Manager.
Show Gtm
Show Gtm
Tu ID de Google Tag Manager.Debe coincidir con el patrón: ^G
Integración con Intercom.
Show Intercom
Show Intercom
Tu ID de la aplicación de Intercom.Longitud mínima: 6
Integración con Koala.
Show Koala
Show Koala
Tu clave de API pública de Koala.Longitud mínima: 2
Integración con LogRocket.
Show LogRocket
Show LogRocket
Tu ID de la app de LogRocket.
Integración con Mixpanel.
Show Mixpanel
Show Mixpanel
Tu token del proyecto de Mixpanel.
Integración con Osano.
Show Osano
Show Osano
El origen del script de Osano.
Configuración de telemetría.
Show Telemetría
Show Telemetría
Indica si se habilita la telemetría.
Errores
Configuración del manejo de errores.
Show Errores
Show Errores
Manejo del error 404 “Página no encontrada”.
Ejemplos
- Ejemplo básico
- Ejemplo de API interactivo
- Ejemplo multilingüe
docs.json
Report incorrect code
Copy
Ask AI
{
"$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": "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"
},
"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": "No se puede encontrar",
"description": "¿Qué **pasó** con esta _página_?"
}
}
}
Actualización desde mint.json
mint.json
en desuso, sigue estos pasos para actualizar a docs.json
.
1
Instala o actualiza la CLI
Si aún no has instalado la CLI, instálala ahora:Si ya tienes la CLI instalada, asegúrate de que esté actualizada:
Report incorrect code
Copy
Ask AI
npm i -g mint
Report incorrect code
Copy
Ask AI
mint update
2
Crea tu archivo docs.json
En tu repositorio de documentación, ejecuta:Este comando creará un archivo
Report incorrect code
Copy
Ask AI
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.3
Elimina tu archivo mint.json
Después de verificar que tu
docs.json
esté configurado correctamente, puedes eliminar de forma segura tu antiguo archivo mint.json
.