Ardo

Documentation for React teams. No compromises.

Documentation · Getting Started · API Reference

---

The problem

You build your app in React. Your components are React. Your design system is React. Then you need documentation and suddenly you're stuck with a different framework, a different component model, or a different mental model entirely.

Ardo fixes that. Write your docs with the same stack you already use: React 19, React Router 7, and Vite 8. Drop your existing components straight into MDX. No wrappers, no adapters, no context switching.

What you actually get

Your React components in your docs. Not through a compatibility layer. Natively. Import your design system, your interactive examples, your custom widgets. They just work.

API docs from your TypeScript source. TypeDoc is built in. Point it at your code and it generates complete, linked API reference pages. No plugins to configure, no separate build step to maintain.

Type-safe routes that catch broken links at build time. React Router 7 gives you typed route paths. A link to a page that doesn't exist? TypeScript catches it before your users do.

Builds that don't waste your time. Vite 8 with Rolldown. Dev server starts in under a second. Production builds finish while you're still reaching for your coffee.

Why Ardo?

There are good documentation frameworks out there. The question is whether they fit your stack.

If your app is React, your components are React, and your team thinks in React — switching to a different framework for docs means maintaining two mental models, two component systems, and two sets of conventions. Ardo lets you skip that entirely.

	Ardo	Docusaurus	Starlight	VitePress
UI framework	React 19	React	Astro	Vue
Build tool	Vite 8	Webpack	Astro/Vite	Vite
Use your React components	Native	Native	Via islands (adapters needed)	Not supported
TypeDoc built in	Yes	Plugin required	Plugin required	Not available
First load (gzipped)	~111 KB	~500 KB+	~50 KB	~50 KB
Subsequent navigations	~1 KB	~1 KB	Full page reload	~1 KB
CO₂ per visit	~0.04g (A)	~0.10g (B)	~0.01g (A+)	~0.04g (A)

Starlight and VitePress are lighter — they ship less JavaScript because Astro and Vue have smaller runtimes than React. That's a real tradeoff. If minimal page weight is your top priority and you don't need React components in your docs, those are solid choices.

Docusaurus is React-based — but it's built on webpack with a heavier architecture. Build times are slower and the runtime is roughly 4x larger.

Ardo is built for teams already committed to React. You get your existing components, your existing design system, and your existing knowledge — with a modern Vite-powered build that keeps page weight reasonable despite including the React runtime.

Environmental impact methodology

CO₂ estimates follow the Website Carbon Calculator methodology (Sustainable Web Design model). Comparison values for Docusaurus, Starlight, and VitePress are sourced from Starlight's environmental impact page. Ardo's estimate is calculated from measured build output (~111 KB gzipped transfer size).

Quick start

pnpm create ardo@latest my-docs
cd my-docs
pnpm install
pnpm dev

Your site is running at localhost:5173. Add an .mdx file to app/routes/ and it shows up in the sidebar.

Or add Ardo to an existing project:

pnpm add ardo react react-dom
pnpm add -D typescript vite

Configuration

// vite.config.ts
import { defineConfig } from "vite"
import { ardo } from "ardo/vite"

export default defineConfig({
  plugins: [
    ardo({
      title: "My Documentation",
      description: "Built with Ardo",

      themeConfig: {
        nav: [
          { text: "Guide", link: "/guide/getting-started" },
          { text: "API", link: "/api/reference" },
        ],
        sidebar: [
          {
            text: "Guide",
            items: [{ text: "Getting Started", link: "/guide/getting-started" }],
          },
        ],
      },
    }),
  ],
})

Project structure

my-docs/
├── app/
│   ├── routes/            # MDX/MD content
│   │   ├── guide/
│   │   │   └── getting-started.mdx
│   │   └── home.tsx       # Home page
│   ├── root.tsx           # Root layout
│   ├── entry.client.tsx   # Client entry
│   └── entry.server.tsx   # Server entry
├── vite.config.ts         # Vite + Ardo configuration
├── react-router.config.ts # React Router configuration
└── package.json

Deployment

Ardo builds to static HTML. Deploy it anywhere: Vercel, Netlify, GitHub Pages, Cloudflare Pages, or a plain file server. Projects created with create-ardo ship with a GitHub Pages workflow ready to go.

See the Deployment Guide for setup details.

Packages

Package	Description	Version
ardo	Core framework: Vite plugin, runtime hooks, theme components
create-ardo	Scaffolding CLI for new projects

Development

git clone https://github.com/sebastian-software/ardo.git
cd ardo
pnpm install
pnpm build
pnpm docs:dev

License

MIT © Sebastian Software GmbH