What is Ardo?
You know React. You've built components, wired up state, wrestled with TypeScript generics. Then you need to write documentation — and suddenly you're learning a completely different system with its own component model, its own templating quirks, and its own way of doing things you already know how to do.
Ardo exists so you don't have to start over.
It's a static documentation framework built entirely on React, React Router 7, and Vite — the same tools you use to build your apps. No proprietary abstractions. No unfamiliar templating languages. Just React.
The Problem with Documentation Frameworks
Most documentation tools ask you to leave your stack at the door. They come with their own component systems, their own conventions, and their own learning curves. That's fine if you're starting from scratch — but if you already live in the React ecosystem, it means:
- Rewriting components you already have
- Learning patterns that don't transfer to your other work
- Maintaining two mental models for the same kind of UI
Ardo takes a different approach. Instead of inventing a new system, it builds on top of what the React ecosystem already provides.
What Makes Ardo Different
Your React Knowledge, Applied Directly
Every component in Ardo is a React component. Your documentation layout, your custom callouts, your interactive API playgrounds — they're all standard React. Import any component from npm. Use the hooks you already know. Write TypeScript the way you always do.
There's nothing new to learn before you're productive.
Built on React Router 7
Ardo doesn't reinvent routing. It uses React Router 7 — the same router that powers production React apps. This gives you file-based routing, static pre-rendering for fast page loads, type-safe navigation, and all the patterns from React 19.
Powered by Vite
Your dev server starts instantly. Hot module replacement is near-instantaneous. Production builds are optimized out of the box. And the full Vite plugin ecosystem is available if you need it.
What You Get
Markdown + React Components
Write documentation in Markdown, drop in React components where you need them:
# My Documentation
Regular markdown content...
<CustomComponent prop="value" />
More markdown content...No special syntax. No wrappers. Just MDX, the way it was designed to work.
A Polished Default Theme
Ardo ships with a complete theme so you can focus on content, not design:
- Responsive layout that works on any device
- Dark and light mode with automatic detection
- Full-text search across all your pages
- Automatic table of contents
- Syntax highlighting with line numbers and highlights
Fully Customizable
When you're ready to make it yours, everything is accessible. Theme colors, layout components, Markdown processing, and the build pipeline — it's all standard React and Vite, so customization works the way you'd expect.
Getting Started
Ready to try it? The Getting Started guide walks you through setup in a few minutes.