fuma-nama/fumadocs

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

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

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

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

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

USE CASE 2

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

USE CASE 3

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

Tech stack

TypeScriptReactNext.jsMDXVite

Getting it running

Difficulty · moderate Time to first run · 30min

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

In plain English

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.

Copy-paste 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?

Open on GitHub → Explain another repo

← fuma-nama on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.