Try Fumadocs

Start with a small Fumadocs site. You will see the default homepage, open its docs, and change one sentence before moving to the company example.

What Fumadocs provides

Fumadocs provides the reading layout, sidebar, search interface, and components for a documentation website. Next.js runs the website and connects URLs to pages.

The starter reads local MDX files. Markdown lets you write headings, lists, and links as text; MDX also allows React components inside a document. You can write ordinary Markdown in an .mdx file for this exercise.

Install Node.js

Node.js runs the development server on your computer. Its installer includes npm, which installs packages, and npx, which runs tools such as the Fumadocs generator. You do not need to install them separately.

If you already have Node.js 22.12 or newer, skip to the version check below. Otherwise, open the official Node.js download page and choose the version marked LTS (long-term support).

Your computer	Install and open a terminal
macOS	Select macOS and download the `.pkg` installer. Open it and follow the installation steps. Then press Command+Space, search for Terminal, and open it.
Windows	Select Windows and download the `.msi` installer for your computer's architecture, usually x64. Run it with the default options, including npm and Add to PATH. Then open Start, search for Command Prompt, and open it.

Close and reopen any terminal that was open during installation. Run each command below and press Enter after each one.

node --version
npm --version
npx --version

Each command should print a version number. Node.js must be at least v22.12.0; npm and npx have their own version numbers. If a command is not found or not recognized, reopen your terminal and check that the installer completed.

Create the sample

In your terminal, go to the folder where you keep your projects with cd "path/to/your/projects", replacing the quoted path with your own. Create this sample in its own folder, outside company-knowledge-base.

Run these commands one at a time. If npx asks to install create-fumadocs-app, type y and press Enter.

npx create-fumadocs-app@latest fumadocs-playground --template +next+fuma-docs-mdx --yes --install
cd fumadocs-playground
npm run dev -- --port 3002

Open localhost:3002 in your browser.

The official generator creates the Next.js and Fumadocs MDX starter and installs its dependencies. These options accept the defaults, including local search and no AI chat. You do not need API keys for this step.

Port 3002 keeps the sample separate from the complete handbook, which will use port 3000. Leave the terminal running while you use the site.

Make one edit

Open localhost:3002/docs. You should see a sample document and its sidebar. The starter's appearance may change as Fumadocs releases new versions.

Open content/docs/index.mdx in your editor. Change a sentence in the body, save, and check the browser. The title and description between the --- lines are metadata, often called frontmatter.

Find the pieces

File in the starter	What it controls
`content/docs/index.mdx`	The first document's title and body
`lib/source.ts`	Reads the content and makes it available to Fumadocs
`app/docs/layout.tsx`	The docs shell, including its sidebar
`app/docs/[[...slug]]/page.tsx`	Looks up and displays the requested document
`app/(home)/page.tsx`	The homepage at `/`
`app/global.css`	Shared styling and theme

You do not need to understand every generated file yet. Ask your assistant to follow your edited sentence from the MDX file to the browser.

Checkpoint

You have opened the default site and seen your text change. Stop its server with Ctrl+C when you are done.

Keep this folder as a reference. Next, run the complete example in a separate folder. That project adds departments, people, a company homepage, and a small content layer that can read from local files or Sanity.