Fumadocs
Beautiful documentation framework for developers with React
Fumadocs Overview
Fumadocs is a flexible, performant documentation framework designed specifically for developers. It solves the common pain point of having to rebuild documentation sites from scratch for every new project by providing composable building blocks. The framework runs on React and offers excellent performance through React Server Components. Fumadocs is particularly suited for teams and individual developers who need to create beautiful, functional documentation quickly with minimal effort. It supports various content sources including MDX, Content Collections, and integrates with popular CMS solutions. The framework emphasizes accessibility, user experience, and offers powerful features like full-text search integration and interactive components.
Fumadocs Screenshot
Fumadocs Official screenshot of the tool interface
Fumadocs Core Features
Source Agnostic
Fumadocs works with multiple content sources including MDX, Content Collections, and various CMS platforms like BaseHub, Sanity, and Payload CMS. This flexibility allows developers to use their preferred content management approach.
Search Integration
The framework offers native support for Orama and Algolia Search, making it easy to implement powerful search functionality in your documentation. The search can be implemented with just a few lines of code.
Interactive Components
Fumadocs CLI creates interactive components for your documentation, offering a rich experience to users. These components can be added easily with simple commands.
Framework Agnostic
While optimized for Next.js, Fumadocs can be used with various React frameworks including React Router and Tanstack Start, giving developers flexibility in their tech stack choices.
Markdown & MDX Support
Fumadocs provides excellent support for Markdown and MDX with features like syntax highlighting through Shiki, TypeScript Twoslash, and OpenAPI docs generation.
Performance Optimized
Built with React Server Components and optimized images by default, Fumadocs delivers fast loading times and excellent performance for documentation sites.
Fumadocs Use Cases
Open Source Project Documentation
Maintainers of open source projects can use Fumadocs to create beautiful, functional documentation quickly. The framework's ease of setup and maintenance makes it ideal for projects that need to focus on code rather than documentation infrastructure.
Product Documentation
Product teams can leverage Fumadocs to create comprehensive product documentation that's both visually appealing and easy to navigate. The search integration ensures users can quickly find what they need.
API Documentation
Developers building APIs can use Fumadocs to generate documentation from OpenAPI specifications, creating interactive API references that are automatically kept in sync with the codebase.
How to Use Fumadocs
Initialize a new project by running 'npm create fumadocs-app' in your terminal. This sets up the basic structure of your documentation site.
Choose your content source during setup - either Fumadocs MDX or Content Collections. This determines how you'll manage and write your documentation content.
Write your documentation content using Markdown or MDX files. Fumadocs provides automation tools and type-safe data validation to ensure content quality.
Add interactive components using the Fumadocs CLI with commands like 'npx @fumadocs/cli add' to enhance your documentation's functionality.
Deploy your documentation to any hosting platform of your choice. Fumadocs is designed to work seamlessly with various deployment options.