Qu’est-ce qu’Ardo ?

Vous connaissez React. Vos composants, providers, styles, exemples et types TypeScript expliquent déjà le produit. Puis la documentation commence, et son outillage demande trop souvent d’apprendre un autre modèle de composants avant de publier un guide utile.

Ardo existe pour vous éviter de repartir de zéro.

Ce framework statique repose sur React et Vite. Il propose un workflow simple, sans plateforme fermée, second framework d’interface ni modèle réservé à la documentation.

Le problème des frameworks de documentation

Beaucoup d’outils apportent leurs composants, conventions et apprentissages. Cela convient pour débuter, mais une équipe déjà en React doit alors :

• réécrire des composants existants ;
• apprendre des modèles peu réutilisables ailleurs ;
• maintenir deux modèles mentaux pour la même interface.

Ardo s’appuie plutôt sur les possibilités existantes de React.

Ce qui distingue Ardo

Appliquer directement votre savoir React

Chaque composant Ardo est en React. Mises en page, encadrés et exemples interactifs utilisent React standard. Gardez vos composants dans le projet ou installez-y une bibliothèque et importez ses exports publics. Utilisez vos hooks habituels et TypeScript.

Le site forme son propre paquet avec le runtime React géré par Ardo. Réutilisez un design system installé plutôt que les sources d’une application voisine. Les instructions pour les agents expliquent cette frontière.

Des pages HTML ordinaires

Chaque fichier d’app/routes devient une page HTML prérendue. Des liens ordinaires chargent rapidement les pages depuis tout hébergeur statique ; les parties interactives s’hydratent dans le navigateur. Aucun routeur client à configurer, et le build vérifie les destinations internes.

Propulsé par Vite

Vite assure un cycle local rapide, des builds optimisés et un écosystème ouvert. Ardo y ajoute le traitement documentaire sans masquer Vite derrière une plateforme.

Ce que vous obtenez

Markdown et composants React

Rédigez en Markdown et ajoutez des composants React selon les besoins :

# My Documentation

Regular markdown content...

<CustomComponent prop="value" />

More markdown content...

Sans syntaxe particulière ni wrappers. Simplement MDX, tel qu’il a été conçu.

Un thème par défaut soigné

Ardo fournit un thème complet pour vous concentrer sur le contenu :

• mise en page responsive ;
• modes clair et sombre avec détection automatique ;
• recherche plein texte ;
• sommaire automatique ;
• coloration avec numéros et surlignage de lignes.

Des styles typés avec Vanilla Extract

L’interface utilise Vanilla Extract, du CSS en TypeScript sans runtime de styles. Couleurs, espacements, rayons et transitions sont disponibles sous forme d’imports typés :

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 inclut le plugin Vanilla Extract. Installez @vanilla-extract/css pour écrire des .css.ts; aucune configuration Vite supplémentaire n’est nécessaire.

Entièrement personnalisable

Couleurs, composants de mise en page, traitement Markdown et pipeline reposent sur React et Vite standards. Personnalisez-les avec les méthodes habituelles de votre équipe.

Comparer Ardo

Ardo vise les équipes React souhaitant une documentation statique moderne dans leur dépôt. Docusaurus, Starlight, VitePress, Nextra, Fumadocs et Mintlify sont de bons outils. La bonne question est : où doit vivre votre documentation et quelle part du code React doit-elle réutiliser ?

La réutilisation concerne les composants du projet ou des paquets installés. Déclarez le design system dans le paquet de documentation et importez ses exports publics. Sources voisines, alias et symlinks traversant cette frontière sont refusés.

Docusaurus

Docusaurus est le framework React établi, largement adopté et soutenu par Meta. Il couvre versions, localisation, blogs, recherche et un vaste écosystème de plugins.

Ardo utilise Vite et des moteurs Rust pour Markdown et coloration plutôt qu’une architecture Webpack. Il prérend chaque page sans routeur client, avec une configuration plus réduite pour les équipes React modernes.

Choisissez Docusaurus si maturité, plugins et documentation versionnée priment sur la proximité de Vite et React.

Starlight

Starlight est un framework Astro rapide, accessible et soigné, particulièrement adapté aux contenus riches avec peu d’interactivité applicative.

React est le modèle natif d’Ardo : providers, hooks et exemples MDX interactifs fonctionnent aussi avec un design system installé. Starlight passe par les îlots Astro, puissants mais avec une frontière différente.

Choisissez Starlight si le poids des pages et le modèle de contenu Astro priment.

VitePress

VitePress est la comparaison la plus proche : un framework statique Vite, un bon thème et un workflow centré sur le contenu, pour Vue.

Ardo apporte cette simplicité à React. Si application, exemples et design system sont en React, réutilisez-les plutôt que de les réécrire en Vue.

Choisissez VitePress pour une équipe Vue ou sans besoin de réutiliser React.

Nextra

Nextra associe MDX au routage Next.js, aux liens et images optimisés, à la recherche, l’i18n et aux modes de rendu de Next.

Ardo ne dépend pas de Next.js. Son build Vite/React écrit un HTML statique par route, sans routeur client. Il convient hors de Next ou pour une documentation statique indépendante et ciblée.

Choisissez Nextra pour une documentation pleinement intégrée à Next.js.

Fumadocs

Fumadocs est une boîte à outils React très composable, compatible avec plusieurs frameworks et riche en briques pour construire un système personnalisé.

Ardo est volontairement plus ciblé : un produit statique complet avec React, Vite, MDX et documentation API native, nécessitant moins de choix d’architecture.

Choisissez Fumadocs pour un toolkit, Ardo pour un site React statique prêt à publier.

Mintlify

Mintlify est une plateforme hébergée, forte en documentation API commerciale, édition collaborative, playgrounds, analyses et fonctions IA.

Ardo est open source et vit dans votre dépôt : build en CI, déploiement de fichiers statiques et rendu avec vos composants React.

Choisissez Mintlify pour un produit hébergé, Ardo pour le contrôle des sources, l’auto-hébergement et la maîtrise de React.

Ardo est-il adapté ?

Ardo convient particulièrement à une documentation proche d’une base React :

• bibliothèques de composants avec exemples et référence API ;
• équipes possédant un design system React ;
• projets open source souhaitant des pages statiques sans plateforme ;
• équipes recherchant la simplicité de VitePress sans runtime Vue ou Astro.

Il peut moins convenir si :

• vous exigez une i18n ou des versions mûres : elles restent expérimentales ;
• vous cherchez le minimum de JavaScript sans composants React ;
• vous souhaitez un workflow SaaS avec analyses et gestion de playgrounds ;
• votre stack Vue, Astro ou Next.js doit aussi accueillir la documentation ;
• vous avez besoin d’une console API interactive : OpenAPI reste statique dans Ardo.

Versions distingue fonctions disponibles, expérimentales et prévues.

Versions et navigateurs

Framework, interface et runtime sont publiés ensemble. L’installation suit les instructions versionnées et l’exemple Basic testé. Consultez l’historique.

Ardo cible les navigateurs modernes compatibles avec React 19 et Vite 8. Le thème utilise OKLCH et les propriétés personnalisées CSS. Testez le build final contre votre propre matrice si vous devez prendre en charge des navigateurs anciens.

Bien démarrer

Prêt à essayer ? Premiers pas propose le prompt pour votre agent et l’installation manuelle en quelques fichiers.