Stratus Alliance

Terminology

For a better understanding of the docs, there are some common terminologies you should know:

Page Tree: A tree of all the pages, separators and folders. It is essential for navigation elements, usually generated by the content source or hardcoded. See Types definitions.

Markdown/MDX: Markdown is a markup language for creating formatted text. By default, Fumadocs supports Markdown and MDX (superset of Markdown).

Some basic knowledge of Next.js App Router would be useful for further customisations.

It will ask you the following questions:

• Which content source to use? (Recommended: Fumadocs MDX)
• Configure Tailwind CSS?
• Add ESLint config?
• Install dependencies?

After that, it will initialize a new fumadocs app. Now you can start hacking!

Explore

In the project, you can see:

• lib/source.ts: Where you organize code for content source adapter, we use loader API to load from your content source.
• app/layout.config.tsx: Shared options for layouts, this is optional but preferred to keep.
• app/(home): The route group for your landing page and other pages.
• app/docs: The documentation layout and pages.
• app/api/search/route.ts: The Route Handler for search.

Content Source

You can explore the docs of your content source, it manages the validation and type definitions of content (e.g. frontmatter properties), and transform them to data on JavaScript runtime.

For Fumadocs MDX, a source.config.ts config file is included by default. See Introduction.

For other formats and content sources that is not supported by default (e.g. Sanity), you can build a custom content source.

Why Fumadocs?

Feel free to open the demo in CodeSandbox and see if it suits you.

• Many built-in components.
• Integrations with Typescript Twoslash, OpenAPI, Math (KaTeX).
• Fast and optimized by default.
• Built on App Router, no need for hydration over static content.
• Use it in an existing Next.js project, without refactoring anything.

Make sure to read Comparisons if you're interested.

Flexibility

Fumadocs is designed with flexibility in mind.

You can use fumadocs-core as a headless UI library and bring your own styles. And fumadocs-mdx can be a useful content library like Content Collections, to handle MDX files easily in Next.js.

Use Cases

Documentation

Fumadocs focuses on authoring experience, it provides a beautiful theme and many docs automation tools.

It helps you to iterate your codebase faster while never leaving your docs behind. You can take this site as an example of docs site built with Fumadocs.

Blog sites

Since Next.js is already a powerful framework, most features can be implemented with only Next.js.

Fumadocs provides additional tooling for Next.js, including syntax highlighting, document search, and a default theme (Fumadocs UI). It helps you to avoid reinventing the wheels.