Saltar al contenido principal
Las bibliotecas de terceros requieren un plan Enterprise. Contacta a tu gestor de cuenta para activarlas en tu sitio.
Usa componentes de paquetes npm, como gráficos o tu propio sistema de diseño, en tus páginas MDX. Cuando despliegas, Mintlify instala los paquetes de tu lockfile, renderiza cada componente a HTML y carga su JavaScript en el navegador.
Instala solo paquetes en los que confíes. El código de los paquetes se ejecuta con el mismo acceso que la página, incluido el contenido de la página y todo lo que el navegador del lector almacena para tu sitio. Puede realizar solicitudes de red a cualquier servidor. Eliminar un paquete o revertir un despliegue no detiene el código que ya se cargó en el navegador de un lector.
Las bibliotecas de terceros no están disponibles en sitios que usan autenticación o personalización. Los despliegues que incluyen packages en docs.json fallan en esos sitios.

​
Agregar un paquete

1

Enumera tus dependencias

Crea un archivo package.json en la misma carpeta que tu archivo docs.json. Enumera cada paquete que importes en dependencies, incluidos react y react-dom.
package.json
Mintlify instala solo dependencies. Los paquetes que solo aparecen en devDependencies o peerDependencies no están disponibles para tus páginas.
2

Confirma un lockfile

Instala tus dependencias y confirma el lockfile junto a package.json.
Mintlify instala las versiones exactas de tu lockfile. Admite pnpm-lock.yaml versión 9 de pnpm y package-lock.json de npm. Los lockfiles de Yarn y Bun no son compatibles.
3

Activa los paquetes

Agrega la clave packages a tu docs.json. Un objeto vacío activa los paquetes con la configuración predeterminada.
docs.json
4

Importa un componente

Crea un componente en tu carpeta snippets que importe desde el paquete.
snippets/requests-chart.jsx
Luego impórtalo en una página:
5

Despliega

Sube tus cambios. Si un paquete no se puede instalar o compilar, el despliegue falla con un error que indica el paquete y el problema.
Para obtener una vista previa local, instala tus dependencias y luego ejecuta mint dev desde la carpeta que contiene tu archivo docs.json.

​
Usar componentes de paquetes

También puedes importar componentes directamente desde un paquete en una página MDX:
  • Coloca los componentes de paquetes en sus propias líneas. No funcionan dentro de un párrafo, una celda de tabla o texto en línea.
  • Pasa cadenas, números y booleanos directamente como props. Para funciones, arrays, objetos o props JSX, escribe un componente contenedor en tu carpeta snippets, como el gráfico de Agregar un paquete, y pasa los valores allí.
  • El Markdown dentro de un componente de paquete se renderiza como HTML sin formato. Los componentes de Mintlify, como los callouts y las tarjetas, no se renderizan dentro de un componente de paquete.

​
Cargar estilos de paquetes

Los componentes pueden importar su propio CSS. Para cargar una hoja de estilos que un paquete distribuye por separado, agrega su ruta dentro del paquete instalado a packages.css:
docs.json
Los paquetes deben distribuir CSS compilado. Mintlify no ejecuta herramientas de compilación ni plugins de CSS sobre el código de los paquetes, y no admite módulos CSS. Las hojas de estilos de los paquetes no pueden cargar fuentes ni imágenes desde URL remotas. En su lugar, carga las fuentes con la configuración de fuentes de tu sitio.

​
Envolver componentes en un proveedor

Si tus componentes necesitan un proveedor de tema o de contexto, exporta un componente Provider desde un snippet y establece packages.provider con su ruta:
docs.json
snippets/provider.jsx
El proveedor envuelve cada componente de paquete por separado. Los componentes no comparten estado a través de él.

​
Instalar desde otro registro

Los paquetes sin scope se instalan desde el registro público de npm. Para instalar un scope desde un registro diferente, asigna el scope a la URL del registro en packages.registries:
docs.json
El registro debe usar HTTPS en el puerto predeterminado y ser accesible desde la internet pública sin credenciales.

​
Limitaciones

  • Orígenes de dependencias: Las dependencias deben ser versiones del registro, rangos de versiones o etiquetas. Las URL de Git, las rutas locales y los alias file:, link:, workspace: y npm: no son compatibles.
  • Scripts de instalación: Los paquetes se instalan sin ejecutar scripts de instalación como postinstall. Los paquetes que los necesitan, o que necesitan binarios nativos, no funcionan.
  • Tamaño: La salida de paquetes de un despliegue puede incluir hasta 1000 archivos, 8 MB por archivo, 40 MB en total y 5 MB comprimidos con gzip. Los paquetes que cargan grandes conjuntos de módulos en tiempo de ejecución, como los mapas de iconos dinámicos, pueden superar el límite de archivos.
  • Renderizado en el servidor: Cada componente debe renderizarse en menos de tres segundos en el servidor. Un componente que falla o agota el tiempo de espera solo se renderiza en el navegador, por lo que no aparece en el HTML de la página.
  • Búsqueda e IA: La búsqueda, el asistente y las exportaciones de Markdown usan tu código fuente MDX, no el contenido que renderiza un componente. Mantén el contenido de referencia importante en el texto de tu MDX.
  • Editor web: La vista previa del editor web no renderiza componentes de paquetes.
Para dejar de usar paquetes, elimina packages de tu archivo docs.json y vuelve a desplegar.