¿Qué es Ardo?

Conoces React. Tus componentes, proveedores, estilos, ejemplos y tipos TypeScript ya explican el producto. Entonces llega la documentación y, demasiado a menudo, sus herramientas exigen aprender otro modelo de componentes antes de publicar una guía útil.

Ardo existe para que no tengas que empezar de nuevo.

Este framework estático usa React y Vite. Ofrece un flujo sencillo, sin plataforma cerrada, un segundo framework de interfaz ni un modelo exclusivo para documentación.

El problema de los frameworks de documentación

Muchas herramientas aportan sus propios componentes, convenciones y aprendizaje. Está bien al empezar, pero un equipo que ya usa React acaba teniendo que:

• reescribir componentes existentes;
• aprender patrones que no sirven en otros trabajos;
• mantener dos modelos mentales para la misma interfaz.

Ardo se apoya en las posibilidades que React ya ofrece.

Qué distingue a Ardo

Aplicar directamente lo que sabes de React

Cada componente Ardo es React. Diseños, avisos y ejemplos interactivos usan React normal. Guarda tus componentes en el proyecto o instala una biblioteca e importa sus exports públicos. Usa los hooks que conoces y TypeScript.

El sitio se compila como paquete propio con React gestionado por Ardo. Reutiliza un sistema de diseño instalado en lugar de importar fuentes de una aplicación vecina. Las instrucciones para agentes explican este límite.

Páginas HTML normales

Cada archivo de app/routes genera una página HTML prerenderizada. Los enlaces normales cargan rápido desde cualquier alojamiento estático y las partes interactivas se hidratan en el navegador. No hay router del cliente que configurar; la compilación comprueba los destinos internos.

Basado en Vite

Vite aporta un ciclo local rápido, compilaciones optimizadas y un ecosistema abierto. Ardo añade el procesamiento documental sin ocultarlo detrás de una plataforma.

Qué incluye

Markdown y componentes React

Escribe en Markdown y añade componentes React cuando hagan falta:

# My Documentation

Regular markdown content...

<CustomComponent prop="value" />

More markdown content...

Sin sintaxis especial ni wrappers. Solo MDX, tal como fue diseñado.

Un tema predeterminado cuidado

Ardo incluye un tema completo para que te centres en el contenido:

• diseño adaptable;
• modos claro y oscuro con detección automática;
• búsqueda de texto completo;
• índice automático;
• resaltado con números y líneas destacadas.

Estilos tipados con Vanilla Extract

La interfaz usa Vanilla Extract, CSS en TypeScript sin runtime de estilos. Colores, espacios, radios y transiciones están disponibles como imports tipados:

import { style } from "@vanilla-extract/css"
import { vars } from "ardo/theme"

// Full autocomplete for all design tokens
const myStyle = style({
  color: vars.color.brand,
  borderRadius: vars.radius.base,
})

La CLI incluye el plugin Vanilla Extract. Instala @vanilla-extract/css para escribir .css.ts; no hace falta configuración Vite adicional.

Completamente personalizable

Los colores, diseños, procesamiento Markdown y pipeline usan piezas normales de React y Vite. Personalízalos con los métodos habituales de tu equipo.

Comparar Ardo

Ardo se dirige a equipos React que quieren documentación estática moderna en su repositorio. Docusaurus, Starlight, VitePress, Nextra, Fumadocs y Mintlify son buenas herramientas. La pregunta es: ¿dónde debe vivir tu documentación y cuánto código React debe reutilizar?

La reutilización se refiere a componentes del proyecto o paquetes instalados. Declara el sistema de diseño en el paquete de documentación e importa sus exports públicos. Se rechazan fuentes vecinas, alias y enlaces que crucen ese límite.

Docusaurus

Docusaurus es el framework React consolidado, ampliamente usado y respaldado por Meta. Incluye versiones, localización, blogs, búsqueda y muchos plugins.

Ardo usa Vite y motores Rust para Markdown y resaltado en lugar de una arquitectura Webpack. Prerenderiza sin router del cliente y ofrece menos configuración para equipos React modernos.

Elige Docusaurus si la madurez, los plugins y las versiones importan más que la cercanía a Vite y React.

Starlight

Starlight es un framework Astro rápido, accesible y cuidado, especialmente útil para mucho contenido con poca interactividad de aplicación.

React es el modelo nativo de Ardo: proveedores, hooks y ejemplos MDX interactivos funcionan también con sistemas de diseño instalados. Starlight usa islas Astro, potentes pero con otro límite.

Elige Starlight si priorizas el peso de página y el modelo de contenido Astro.

VitePress

VitePress es la comparación más cercana: framework estático Vite, buen tema y flujo centrado en contenido, para Vue.

Ardo lleva esa sencillez a React. Si la aplicación, ejemplos y sistema de diseño usan React, reutilízalos en lugar de reescribirlos en Vue.

Elige VitePress para un equipo Vue o si no necesitas reutilizar React.

Nextra

Nextra combina MDX con rutas Next.js, enlaces e imágenes optimizados, búsqueda, i18n y los modos de renderizado de Next.

Ardo no depende de Next.js. Su build Vite/React escribe HTML estático por ruta, sin router del cliente. Encaja fuera de Next o para una documentación estática independiente y acotada.

Elige Nextra si tu documentación debe ser una aplicación Next.js completa.

Fumadocs

Fumadocs es un conjunto React muy componible, compatible con varios frameworks y con muchas piezas para crear un sistema propio.

Ardo es deliberadamente más acotado: un producto estático completo con React, Vite, MDX y API nativa, con menos decisiones de arquitectura.

Elige Fumadocs para un toolkit y Ardo para un sitio React estático listo para publicar.

Mintlify

Mintlify es una plataforma alojada con puntos fuertes en API comerciales, edición, playgrounds, analítica e IA.

Ardo es de código abierto y vive en tu repositorio: compilación en CI, archivos estáticos y renderizado con tus componentes React.

Elige Mintlify para un producto alojado y Ardo para controlar fuentes, alojamiento y React.

¿Encaja Ardo contigo?

Ardo encaja especialmente junto a una base de código React:

• bibliotecas de componentes con ejemplos y referencia API;
• equipos con sistema de diseño React;
• proyectos abiertos que quieren páginas estáticas sin plataforma;
• equipos que buscan la sencillez de VitePress sin Vue o Astro.

Puede no ser la herramienta adecuada si:

• necesitas i18n o versiones maduras: siguen siendo experimentales;
• buscas el mínimo JavaScript y no necesitas React;
• quieres un flujo SaaS con analítica y gestión de playgrounds;
• tu stack Vue, Astro o Next.js debe alojar también la documentación;
• necesitas una consola API interactiva: OpenAPI en Ardo es estático.

Versiones distingue funciones disponibles, experimentales y previstas.

Versiones y navegadores

Framework, interfaz y runtime se publican juntos. La instalación sigue las instrucciones versionadas y Basic probado. Consulta el historial.

Ardo se dirige a navegadores modernos compatibles con React 19 y Vite 8. El tema usa OKLCH y propiedades CSS personalizadas. Prueba el build final con tu matriz si necesitas navegadores antiguos.

Primeros pasos

¿Quieres probarlo? Primeros pasos incluye el prompt para tu agente y la instalación manual con pocos archivos.