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.
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:
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.Uno de los siguientes:
mint, maple, palm, willow, linden, almond, aspen.Consulta Temas para más información.El nombre de tu proyecto, organización o producto.
Los colores que se usan en tu documentación. Los colores se aplican de forma diferente según el tema. Si solo proporcionas un color principal, se usará para todos los elementos de color.
Mostrar Colors
Mostrar Colors
El color principal de tu documentación. Generalmente se usa para el énfasis en el modo claro, con cierta variación según el tema.Debe ser un código hexadecimal que comience con
#.El color utilizado para el énfasis en el modo oscuro.Debe ser un código hexadecimal que comience con
#.El color utilizado para los botones y los estados hover en los modos claro y oscuro, con cierta 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.
Mostrar Logo
Mostrar Logo
Ruta al archivo de tu logotipo para el modo claro. Incluye la extensión del archivo. Ejemplo:
/logo.pngRuta al archivo de tu logotipo para el modo oscuro. Incluye la extensión del archivo. Ejemplo:
/logo-dark.pngLa 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.comRuta a tu archivo de favicon, incluida la extensión del archivo. Se redimensiona automáticamente a los tamaños de favicon apropiados. Puede ser un único archivo o archivos separados para los modos claro y oscuro. Ejemplo:
/favicon.pngPersonalización de miniaturas para redes sociales y vistas previas de páginas.
Configuraciones de estilo visual.
Mostrar Styling
Mostrar Styling
Estilo del eyebrow de la página. Elige
section para mostrar el nombre de la sección o breadcrumbs para mostrar la ruta de navegación completa. De manera predeterminada es section.Configuración del tema de los bloques de código. De manera predeterminada es
"system".Configuración simple:"system": Coincide con el 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 distintos para los modos claro y oscuro
Un único nombre de tema de Shiki para usar en modos claro y oscuro.
Report incorrect code
Copy
Ask AI
"styling": {
"codeblocks": {
"theme": "dracula"
}
}
Temas independientes para los modos claro y oscuro.
Configuración de la biblioteca de iconos.
Mostrar Icons
Mostrar Icons
Biblioteca de iconos que se usará en toda tu documentación. De manera predeterminada es
fontawesome.Puedes especificar una URL a un icono alojado externamente, una 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.
Configura fuentes personalizadas para tu documentación. La fuente predeterminada varía según el tema.
Mostrar Fuentes
Mostrar Fuentes
Familia tipográfica, como “Open Sans”. Se admiten nombres de familia de Google Fonts.
Peso de la fuente, como 400 o 700. Las fuentes variables admiten pesos precisos como 550.
Uno de:
- 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.Formato del archivo de fuente. Obligatorio cuando se usa el campo
source.Sobrescribe la configuración de fuente específicamente para los encabezados.
Mostrar Encabezado
Mostrar Encabezado
Familia tipográfica, como “Open Sans”, “Playfair Display”. Se admiten nombres de familia de Google Fonts.
Peso de la fuente, como 400, 700. Las fuentes variables admiten pesos precisos como 550.
Uno de:
- 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.Formato del archivo de fuente. Obligatorio cuando se usa el campo
source.Sobrescribe la configuración de fuente específicamente para el texto del cuerpo.
Mostrar Cuerpo
Mostrar Cuerpo
Familia tipográfica, como “Open Sans”, “Playfair Display”. Se admiten nombres de familia de Google Fonts.
Peso de la fuente, como 400, 700. Las fuentes variables admiten pesos precisos como 550.
Uno de:
- 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.Formato del archivo de fuente. Obligatorio cuando se usa el campo
source.Configuración del selector de modo claro/oscuro.
Mostrar Apariencia
Mostrar Apariencia
Modo de tema predeterminado. Elige
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.Si se debe ocultar el selector de modo claro/oscuro. El valor predeterminado es
true.Configuración del color y la decoración del fondo.
Mostrar Background
Mostrar Background
Imagen de fondo para tu sitio. Puede ser un único archivo o archivos separados para los modos claro y oscuro.
Decoración de fondo para tu tema.
Colores de fondo personalizados para los modos claro y oscuro.
Estructura
Elementos de la barra de navegación con enlaces externos.
Mostrar Navbar
Mostrar Navbar
Enlaces que se mostrarán en la barra de navegación.
Mostrar Links
Mostrar Links
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
heightywidthsegú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 en la barra de navegación.
Mostrar Primary
Mostrar Primary
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.
Mostrar Navegación
Mostrar Navegación
Elementos de navegación globales que aparecen en todas las páginas y secciones.
Mostrar Global
Mostrar Global
Configuración del selector de idioma para sitios localizados.
Mostrar Idiomas
Mostrar Idiomas
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.
Ruta válida o enlace externo a esta versión de tu documentación.
Configuración del selector de versiones para sitios con varias versiones.
Mostrar Versions
Mostrar Versions
Pestañas de navegación de nivel superior para organizar las secciones principales.
Mostrar Tabs
Mostrar Tabs
Nombre visible de la pestaña.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
heightywidthsegú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 pestaña se oculta de forma predeterminada.
URL o ruta de destino de la pestaña.
Enlaces anclados que aparecen de forma destacada en la navegación de la barra lateral.
Mostrar Anclas
Mostrar Anclas
Nombre visible 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
heightywidthsegú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.
Si ocultar este ancla de forma predeterminada.
URL o ruta del destino del ancla.
Menús desplegables para organizar contenido relacionado.
Mostrar Desplegables
Mostrar Desplegables
Nombre visible del 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
heightywidthsegú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.Si ocultar este desplegable de forma predeterminada.
URL o ruta de destino del desplegable.
Productos para organizar el contenido en secciones.
Mostrar Productos
Mostrar Productos
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
heightywidthsegú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 idioma para sitios multilingües.
Menús desplegables para agrupar contenido relacionado.
Configuración de la interacción del usuario para los elementos de navegación.
Mostrar Interacción
Mostrar Interacción
Controla el comportamiento de navegación automática al seleccionar grupos de navegación. Establécelo en
true para forzar la navegación a la primera página cuando se expanda un grupo de navegación. Establécelo en false para evitar la navegación y solo expandir o contraer el grupo. Déjalo sin configurar para usar el comportamiento predeterminado del tema.Contenido del pie de página y enlaces a redes sociales.
Mostrar Pie de página
Mostrar 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, podcastBanner del sitio mostrado en la parte superior de las páginas.
Mostrar Banner
Mostrar 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.
Mostrar Contextual
Mostrar 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: Copiar la página actual como Markdown al portapapeles.view: Ver la página actual como Markdown en una nueva pestaña.chatgpt: Enviar el contenido de la página actual a ChatGPT.claude: Enviar el contenido de la página actual a Claude.perplexity: Enviar 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.
Mostrar Api
Mostrar 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.
Mostrar Params
Mostrar Params
Indica si se deben expandir todos los parámetros de forma predeterminada. El valor predeterminado es
closed.Configuración del área de pruebas de la API.
Configuración para los ejemplos de API autogenerados.
Mostrar Examples
Mostrar Examples
Lenguajes para los fragmentos de API autogenerados
Indica si se deben mostrar los parámetros opcionales en los ejemplos de la API. El valor predeterminado es
all.Indica si se debe rellenar previamente 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 la API generadas a partir de archivos
MDX.Mostrar Mdx
Mostrar Mdx
Configuración del servidor para solicitudes de API.
SEO y búsqueda
Configuraciones de indexación de SEO.
Mostrar SEO
Mostrar SEO
Meta tags añadidas a cada página. Debe ser un par key-value válido. Consulta la referencia de meta tags 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 forma predeterminada, es navigable.Configuración de la visualización de la búsqueda.
Mostrar Search
Mostrar Search
Texto de marcador de posición para mostrar en la barra de búsqueda.
Integraciones
Integraciones de terceros.
Mostrar Integraciones
Mostrar Integraciones
Integración con Amplitude Analytics.
Mostrar Amplitude
Mostrar Amplitude
Tu clave de API de Amplitude.
Integración de enriquecimiento de datos de Clearbit.
Mostrar Clearbit
Mostrar Clearbit
Tu clave de API de Clearbit.
Integración de Fathom Analytics.
Mostrar Fathom
Mostrar Fathom
Tu ID de sitio de Fathom.
Integración de Front chat.
Mostrar Frontchat
Mostrar Frontchat
Tu ID del fragmento de Front chat.Longitud mínima: 6
Integración con Google Analytics 4.
Mostrar Ga4
Mostrar Ga4
Tu ID de medición de Google Analytics 4.Debe coincidir con el patrón: ^G
Integración con Google Tag Manager.
Mostrar Gtm
Mostrar Gtm
Tu ID de etiqueta de Google Tag Manager.Debe coincidir con el patrón: ^G
Integración de Analytics de Heap.
Mostrar Heap
Mostrar Heap
Tu ID de la app de Heap.
Integración con Intercom.
Mostrar Intercom
Mostrar Intercom
Tu ID de la app de Intercom.Longitud mínima: 6
Integración con LogRocket.
Mostrar LogRocket
Mostrar LogRocket
Tu ID de la app de LogRocket.
Integración con Mixpanel.
Mostrar Mixpanel
Mostrar Mixpanel
Tu token del proyecto de Mixpanel.
Integración con Osano.
Mostrar Osano
Mostrar Osano
El origen del script de Osano.
Configuración de telemetría.
Mostrar Telemetría
Mostrar Telemetría
Indica si habilitar la telemetría.
Errores
Configuración para el manejo de errores.
Mostrar Errores
Mostrar Errores
Manejo del error 404 “Page not found” (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": "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.
1
Instala o actualiza la CLI
Si aún no has instalado la CLI, instálala ahora:Si ya tienes instalada la CLI, 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.