Quick Start

Introduction

Fumadocs (Foo-ma docs) is a documentation framework based on Next.js, designed to be fast and flexible. It composes seamlessly into Next.js App Router, allowing a high flexibility with code.

Fumadocs has different parts:

Terminology

Markdown/MDX: Markdown is a markup language for creating formatted text. Fumadocs supports Markdown and MDX (superset of Markdown) out-of-the-box.

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

Automatic Installation

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

npm create fumadocs-app

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 content source adapter, we use loader() to parse and interact with 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.

Customise Content

Content source handles all your content, including validation and type definitions for data like frontmatter.

For Fumadocs MDX, you can read the Introduction to learn how it handles your content, and customise different options like frontmatter schema. A source.config.ts config file has been included.

For custom sources that is not supported by default (like Sanity), you can build a custom content source.

Customise Sidebar

Navigation elements like sidebar take a Page Tree to render navigation links, it's a tree that describes all available pages and folders.

By default, the sidebar items (formally page tree) are generated from your file structure. You can learn how to customise the page tree from:

Writing Content

Despite from supported syntax of MDX, Fumadocs has some additional features for authoring content too. You can refer to:

FAQ

Some common questions you may encounter.

Why Fumadocs?

Fumadocs is designed with flexibility in mind.

You can use fumadocs-core as a headless UI library and bring your own styles. Fumadocs MDX is also a useful library to handle MDX content in Next.js. It also includes:

• Many built-in components.
• Typescript Twoslash, OpenAPI, and Math (KaTeX) integrations.
• Fast and optimized by default, natively built on App Router.
• Tight integration with Next.js, you can add it to an existing Next.js project easily.

Feel free to open the demo in CodeSandbox, or read Comparisons if you're interested.

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 just 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.

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.