Quick Start
Getting Started with Fumadocs
Introduction
Fumadocs (Foo-ma docs) is a documentation framework based on Next.js, designed to be fast, flexible, and composes seamlessly into Next.js App Router.
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 offers a beautiful look for documentation sites and interactive components.
Content Source
The source of your content, 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 install UI components and automate things, useful for customizing layouts.
Want to learn more?
Read our in-depth What is Fumadocs introduction.
Terminology
Markdown/MDX: Markdown is a markup language for creating formatted text. Fumadocs supports Markdown and MDX (superset of Markdown) out-of-the-box.
Although not required, some basic knowledge of Next.js App Router would be useful for further customisations.
Automatic Installation
A minimum version of Node.js 18 required, note that Node.js 23.1 might have problems with Next.js production build.
npm create fumadocs-apppnpm create fumadocs-appyarn create fumadocs-appbun create fumadocs-appIt will ask you the framework and content source to use, a new fumadocs app should be initialized. Now you can start hacking!
From Existing Codebase?
You can follow the Manual Installation guide to get started.
Enjoy!
Create your first MDX file in the docs folder.
---
title: Hello World
---
## Yo what's upRun the app in development mode and see http://localhost:3000/docs.
npm run devExplore
In the project, you can see:
lib/source.ts: Code for content source adapter,loader()provides an interface to interact with your content source, and assigns URL to your pages.app/layout.config.tsx: Shared options for layouts, optional but preferred to keep.
| Route | Description |
|---|---|
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. |
Writing Content
For authoring docs, make sure to read:
Markdown
Fumadocs has some additional features for authoring content too.
Navigation
Learn how to customise navigation links/sidebar items.
Content Source
Content source handles all your content, like compiling Markdown files and validating frontmatter.
Read the Introduction to learn how it handles your content.
A source.config.ts config file has been included, you can customise different options like frontmatter schema.
Fumadocs is not Markdown-exclusive. For other sources like Sanity, you can build a custom content source.
Customise UI
See Customisation Guide.
FAQ
Some common questions you may encounter.
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!
More Posts
AI Baby Photo from Ultrasound: Turn a 3D or 4D Scan into a Realistic Baby Portrait
Upload a clear 3D or 4D ultrasound image and turn it into a lifelike baby photo preview with AI. Learn how ultrasound to baby photo tools work, what scans perform best, and what results to expect.
AI Baby Generator: See What Your Future Baby Could Look Like
Upload mom and dad photos and use AI Baby Generator to see what your future baby could look like. Learn how it works, what photos give the best results, and what to expect.
AI Baby Dance: Turn a Baby Photo into a Dancing Video with AI
Upload a baby photo, choose a dance template, and create an AI baby dance video in minutes. Learn how AI baby dance works, what inputs perform best, and what to expect.
Newsletter
Join the community
Subscribe to our newsletter for the latest news and updates