Fumadocs Documentation Framework

Fumadocs Core provides the logic and components necessary to build documentation sites without being tied to a specific UI library. Key features include:

• Search: Built-in support for ZBSearch and Algolia Search.
• Navigation Components: Headless implementations of Breadcrumb and TOC (Table of Contents with active anchor observer).
• Content Handling: A unified Source API for managing content sources.
• Plugins: Remark and Rehype plugins for document processing.

Fumadocs uses ZBSearch as its default search engine. It supports two primary operational modes:

1. Fetch (Default): Operates via an API endpoint running on a server.
2. Static: Uses a statically cached JSON file, which is suitable for static websites.

Fumadocs UI provides a pre-designed theme specifically for documentation sites. It includes a bundle of interactive components and layouts designed to minimize maintenance while providing regular UI updates.

There are two primary ways to use it:

1. As a bundled theme: Use the provided components and layouts directly.
2. Local installation: Use the Fumadocs CLI to install components locally into your project, giving you full control over the source code of the components.

FlexSearch is a fast and minimal search engine that can be integrated into Fumadocs. It supports two primary modes of operation:

1. Fetch (Default): Operates via an API endpoint running on a server.
2. Static: Uses a statically cached JSON file, which is ideal for static websites (Static Export).

For detailed setup instructions, refer to the Integrate FlexSearch guide.

Fumadocs Obsidian allows you to use an Obsidian vault as a runtime content source for rendering documentation with Fumadocs. It provides support for Obsidian-specific syntax and features, including:

• Wikilinks and embeds: Resolving internal links and embedded content.
• Callouts: Rendering Obsidian-style callout blocks.
• Block IDs: Supporting linking to specific blocks within files.
• Comments: Handling Obsidian comments.
• Revalidation: Supports both static and dynamically revalidated Fumadocs sources.

The Fumadocs GraphQL integration provides:

• Automatic Page Generation: A page for every operation (query, mutation, subscription) and named type, organized by kind (e.g., queries/, objects/).
• Rich Schema Details: Support for arguments, fields, deprecations, default values, and custom directive callouts.
• Navigation & Context: Usage backlinks on type pages (showing returned by, field of, and input for).
• Developer Experience: Generated example queries/responses and request snippets (cURL, JavaScript).
• Interactive Playground: A highlighted query editor with live validation, a variables form generated from argument types, and support for custom headers.

Fumadocs UI provides different layouts to display content, allowing you to specify navigation configurations through layouts. There are two primary ways to handle navigation:

1. Layout Links: Used to display specific navigation links within your layouts. This is ideal for linking to frequently used resources like showcase, pricing, or external pages.
2. Sidebar Items: The sidebar renders links to all documentation pages. This is powered by a Page Tree abstraction that represents your navigation structure based on your file system.

A standard Fumadocs Next.js application uses the following key files and routes:

Core Files

• lib/source.ts: Contains the code for the content source adapter. It uses the loader() function to provide the interface for accessing your content.
• lib/layout.shared.tsx: Contains shared options for layouts. It is recommended to keep this file to maintain consistent layout configurations.

Key Routes

• app/(home): The route group containing your landing page and other non-documentation pages.
• app/docs: The main route for documentation layouts and pages.
• app/api/search/route.ts: The Route Handler responsible for handling search queries.