Quick Start
Learn about the documentation system built with TanStack Start and fumadocs.
Documentation System Overview
This project's documentation system is built on TanStack Start and fumadocs. TanStack Start handles routing and SSR, while fumadocs provides the MDX content model and docs UI primitives.
fumadocs
fumadocs makes content creation effortless with file-based MDX, generated page trees, and polished docs layouts.
Key Features
- MDX-First: Write content in MDX with full React component support
- File-Based: Organize content as simple files in your project
- Type-Safe: Automatic TypeScript types generation from your content
- Search: Full-text search capabilities out of the box
- Code Highlighting: Built-in syntax highlighting for code blocks
Why fumadocs?
fumadocs eliminates the need for a separate CMS or database. Your documentation lives alongside your code, making it easy to version, review, and maintain. The file-based approach means you can use your favorite editor and Git workflow.
Getting Started
Install Dependencies
pnpm add fumadocs-core fumadocs-ui fumadocs-mdxCreate Content
Create MDX files in the content/docs/ directory:
---
title: My Page
description: A documentation page
---
# My Page
Write your content here using MDX syntax.Configure Navigation
Use meta.json files to control sidebar navigation:
{
"title": "Section Title",
"pages": ["page-one", "page-two"]
}Wire the Docs Source
In this starter, the docs runtime is connected through source.config.ts, src/lib/source.ts, and a catch-all route at src/routes/{-$locale}/_docs/docs/$.tsx.
Who's Using
- unovue/inspira-ui 3.1K stars
- unjs/magic-regexp 4K stars
- nuxt-monaco-editor
- nuxt-umami
- Msty