Quick Start

Introduction

Fumadocs is a documentation framework based on Next.js, designed to be fast and flexible. It composes seamlessly into Next.js App Router, and benefits from the React Server Component model.

Fumadocs has different parts:

This gives Fumadocs great flexibility, theoretically any kind of format and source can be supported by Fumadocs.

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 Core can process the content (e.g. syntax highlighting), and you can render it with the default theme (Fumadocs UI) or your custom theme. It is particularly helpful if you want to build complicated things like search.

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.

MDX File: A MDX file could be located in a folder, or available remotely. Notice that MDX Page is only referring to page.mdx, which is already a Next.js page on its own.

You might need to be familiar with Next.js App Router to continue.

Automatic Installation

Create a new app with create-fumadocs-app, it requires Node.js 18+.

npm create fumadocs-app

It will ask you the following questions:

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

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

Enjoy!

Create your first mdx file in the docs folder.

---
title: Hello World
---
 
## Yo what's up

Run the app in development mode and see http://localhost:3000/docs.

npm run dev

Explore

In the project, you can see:

• lib/source.ts: Where you organize code for the source adapter, we use loader to read from the 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.

FAQ

Some common questions you may encounter.

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).
• Flexible and Fast 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.

Learn More

New to here? Don't worry, we are welcome for your questions.

If you find anything confusing, please give your feedback on Github Discussion!

From Existing Codebase?

You can follow the Manual Installation guide to get started.