SoarStarter TanStack
Introduction

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-mdx

Create 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

On this page