Quick Start
Getting Started with Fumadocs
Introduction
Fumadocs 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:
Fumadocs Core
Handles most of the logic, including document search, content source adapters, and Markdown extensions.
Fumadocs UI
The default theme of Fumadocs, it offers a beautiful look for documentation sites and many interactive components.
Content Source
The input/source of your content, it can be a CMS, or local data layers like Content Collections and Fumadocs MDX, the official content source.
Fumadocs CLI
A command line tool to configure features automatically, and install UI components (similar to Shadcn UI).
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 can process the content (e.g. syntax highlighting), and you can use 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.
Markdown (MDX) File: A Markdown file could be located in a folder, or available remotely.
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+.
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.
Run the app in development mode and see http://localhost:3000/docs.
Explore
In the project, you can see:
lib/source.ts
: Where you organize code for content source adapter, we useloader
to read from 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
Visit the docs of your content source, content source manages the validation and type definitions of content (e.g. frontmatter properties), and transform them to data on JavaScript runtime.
For Fumadocs MDX, see Introduction for details:
source.config.ts
: Config file for Fumadocs MDX.
For other formats and content sources, they can be supported using a custom adapter.
If you use a custom content source (e.g. Notion), you can build a custom loader
instead.
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!
Organizing Pages
Learn how to organize your pages
Navigation Links
Learn how to customise navigation links in Fumadocs
Theming
Add themes to Fumadocs UI
Markdown
Learn how to write documents in Fumadocs
From Existing Codebase?
You can follow the Manual Installation guide to get started.
Last updated on