gitwtfhub

wtf is fumadocs?

fuma-nama/fumadocs — explained in plain English

Analysis updated 2026-06-24

11,830TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TL;DR

A React framework for building documentation websites with Next.js or Vite, letting you write docs in Markdown and embed interactive components without assembling the structure from scratch.

Mindmap

mindmap
  root((Fumadocs))
    What it does
      Docs site framework
      MDX file support
      React components in docs
    Frameworks
      Next.js
      Tanstack Start
      Waku
      React Router
    Features
      Content collections
      Built-in layout
      Interactive components
    Audience
      JS developers
      Library authors

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Build a well-structured documentation site for your library using Next.js and MDX without writing navigation and layout code from scratch.

REASON 2

Embed interactive React components like live code playgrounds or custom diagrams directly inside Markdown documentation pages.

REASON 3

Organize large documentation sets with structured metadata using content collections for easy navigation and search.

What's in the stack?

TypeScriptReactNext.jsMDXVite

How it stacks up

fuma-nama/fumadocscodexu/note-genchangesets/changesets
Stars11,83011,83511,838
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasymoderate
Complexity3/52/53/5
Audiencedeveloperwriterdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

ESM-only, requires a modern JavaScript toolchain and does not work in CommonJS-only environments.

Wtf does this do

Fumadocs is a framework for building documentation websites with React.js. It provides the structure and tools needed to create a well-organized technical documentation site, so developers do not have to assemble the pieces from scratch. The project describes itself as both beautiful in design and flexible enough to adapt to different project setups. The framework officially supports Next.js and three Vite-based React frameworks: Tanstack Start, Waku, and React Router. It is built around MDX, a file format that combines standard Markdown text (the kind of simple formatting used in README files) with the ability to embed interactive React components. This makes it possible to include live code examples, interactive diagrams, or custom UI elements inside documentation pages. All packages in the repository use the ESM module format. This is a technical constraint that means the framework requires a modern JavaScript toolchain and does not work in environments that only support the older CommonJS format. The repository README is short and points readers to the project documentation site at fumadocs.dev for detailed setup instructions, configuration options, and examples. The project topics also reference content collections, which is an approach to organizing large sets of documentation files with structured metadata, though no further detail is given in the README. Contributions to the project are accepted through pull requests, and a contributing guide is available in the repository.

Yoink these prompts

Prompt 1
I want to set up Fumadocs with Next.js for my npm library's documentation site. Walk me through the initial setup: what packages to install, how to create the first MDX page, and how sidebar navigation is configured.
Prompt 2
Using Fumadocs with Next.js, how do I add a live code editor component that appears inline inside my MDX documentation pages?
Prompt 3
I'm migrating existing Markdown docs to Fumadocs. What is the recommended file structure for MDX files, and how does Fumadocs auto-generate the sidebar from it?
Prompt 4
How do I set up search in Fumadocs so users can find documentation pages? What are the built-in search options and how do I configure the default one?

Frequently asked questions

wtf is fumadocs?

A React framework for building documentation websites with Next.js or Vite, letting you write docs in Markdown and embed interactive components without assembling the structure from scratch.

What language is fumadocs written in?

Mainly TypeScript. The stack also includes TypeScript, React, Next.js.

How hard is fumadocs to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is fumadocs for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.