Fumadocs — Beautiful & Flexible React Documentation Framework

Introduction

Fumadocs is a documentation framework built on Next.js that provides structured content management, built-in search, and beautiful default styling. It supports MDX content with automatic table of contents generation and API reference pages.

What Fumadocs Does

• Generates fast static documentation sites using Next.js App Router
• Provides built-in full-text search without external services
• Supports MDX with custom components, code highlighting, and math rendering
• Auto-generates sidebar navigation from file structure
• Offers OpenAPI integration for automatic API reference documentation

Architecture Overview

Fumadocs uses a source-adapter pattern where content can come from local MDX files, Content Collections, or custom sources. The framework processes content at build time, generates search indexes, and outputs optimized static pages via Next.js. Theming is handled through Tailwind CSS with configurable design tokens.

Setup & Configuration

• Initialize with create-fumadocs-app or add to existing Next.js project
• Configure content sources in source.config.ts
• Customize theme via fumadocs-ui layout components
• Enable search by choosing built-in or Algolia integration
• Add OpenAPI spec files for automatic API docs generation

Key Features

• Internationalization support with per-locale content directories
• TypeScript-first configuration with full type safety
• Multiple content source adapters including Content Collections
• Code blocks with line highlighting, titles, and copy buttons
• Versioned documentation with branch-based content switching

Comparison with Similar Tools

• Docusaurus — React-based but uses its own router; Fumadocs leverages Next.js App Router natively
• Nextra — also Next.js-based but simpler; Fumadocs offers more structured content management
• VitePress — Vue-focused with faster builds; Fumadocs targets the React/Next.js ecosystem
• Mintlify — managed hosting with similar aesthetics; Fumadocs is fully self-hosted and open source
• Starlight — Astro-based; Fumadocs stays within the React ecosystem

FAQ

Q: Can I use Fumadocs with an existing Next.js app? A: Yes. Fumadocs integrates as a package into any Next.js 14+ project using the App Router.

Q: Does Fumadocs support server-side rendering? A: It supports both static generation and server rendering, defaulting to static for documentation pages.

Q: How does built-in search work? A: Fumadocs indexes content at build time and provides a client-side search UI powered by flexsearch, requiring no external services.

Q: Is there a way to generate docs from code comments? A: Fumadocs integrates with TypeDoc and OpenAPI specs for automatic reference generation.

Sources

• https://github.com/fuma-nama/fumadocs
• https://fumadocs.vercel.app