fumadocs-svelte

The Svelte port of Fumadocs.

Build beautiful documentation sites with SvelteKit, mdsvex, and Tailwind CSS.

Features

• 📝 MDX/Svelte Support — Write documentation in .svx files with mdsvex
• 🌲 Automatic Navigation — Page tree generated from file structure
• 🎨 Beautiful UI — Clean, responsive design with Tailwind CSS
• 📱 Mobile-First — Collapsible sidebar with mobile menu
• ♿ Accessible — Built with bits-ui for proper accessibility
• 🔧 Type-Safe — Full TypeScript support with strict types

Quick Start

Run this in an existing SvelteKit project:

npx fumadocs-svelte init

That's it! The CLI automatically:

• Installs fumadocs-svelte, mdsvex, and @tailwindcss/typography
• Configures mdsvex in your svelte.config.js
• Configures Tailwind typography plugin
• Creates the docs route at src/routes/docs/[...slug]/
• Creates sample content at src/content/docs/

Start the dev server

npm run dev

Visit http://localhost:5173/docs — your documentation is ready!

Writing Documentation

Create .svx files in src/content/docs/:

---
title: Getting Started
description: Learn how to set up your project
---

# Getting Started

Your content here...

File Structure

src/content/docs/
├── index.svx              → /docs
├── getting-started.svx    → /docs/getting-started
├── guide/
│   ├── index.svx          → /docs/guide
│   └── installation.svx   → /docs/guide/installation
└── api/
    └── index.svx          → /docs/api

• index.svx files become the folder's main page
• File names become URL slugs
• Nested folders create nested navigation

Manual Setup

If you prefer to set things up manually instead of using the CLI:

1. Install dependencies

npm install fumadocs-svelte mdsvex @tailwindcss/typography

2. Configure mdsvex

Add mdsvex to your svelte.config.js:

import { mdsvex } from 'mdsvex';
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
	preprocess: [vitePreprocess(), mdsvex()],
	extensions: ['.svelte', '.svx'],
	kit: {
		adapter: adapter()
	}
};

export default config;

3. Configure Tailwind

Add the typography plugin to your CSS file:

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

4. Create the docs route

src/routes/docs/[...slug]/+page.ts

import { error } from '@sveltejs/kit';
import { createFileSystemSource } from 'fumadocs-svelte';
import type { RawSvxModule } from 'fumadocs-svelte';
import type { PageLoad } from './$types';

const modules = import.meta.glob<RawSvxModule>('/src/content/docs/**/*.svx', { eager: true });

const source = createFileSystemSource({
	glob: modules,
	rootDir: 'docs',
	baseUrl: '/docs'
});

export const load: PageLoad = async ({ params }) => {
	const slugString = params.slug || '';
	const slug = slugString ? slugString.split('/') : [];

	const page = source.getPage(slug);

	if (!page) {
		error(404, { message: `Page not found: /docs/${slugString}` });
	}

	return {
		page,
		pageTree: source.pageTree
	};
};

src/routes/docs/[...slug]/+page.svelte

<script lang="ts">
	import type { PageData } from './$types';
	import { DocsLayout } from 'fumadocs-svelte';

	const { data }: { data: PageData } = $props();
	const Content = $derived(data.page.code);
</script>

<svelte:head>
	<title>{data.page.data.title} | Documentation</title>
	{#if data.page.data.description}
		<meta name="description" content={data.page.data.description} />
	{/if}
</svelte:head>

<DocsLayout tree={data.pageTree} title="Documentation">
	<article>
		<header class="mb-8 pb-4 border-b border-slate-200">
			<h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-2">
				{data.page.data.title}
			</h1>
			{#if data.page.data.description}
				<p class="text-lg text-slate-600">
					{data.page.data.description}
				</p>
			{/if}
		</header>

		<div class="prose prose-slate max-w-none">
			<Content />
		</div>
	</article>
</DocsLayout>

5. Create content

Create src/content/docs/index.svx:

---
title: Welcome
description: Get started with your documentation
---

# Welcome

Your documentation content here...

API Reference

Components

DocsLayout

Main layout component with sidebar navigation.

<DocsLayout tree={pageTree} title="My Docs">
	<slot />
</DocsLayout>

| Prop | Type | Default | Description | | ------- | ---------- | ----------------- | ---------------------- | | tree | PageTree | required | Navigation tree | | title | string | 'Documentation' | Site title in sidebar | | class | string | undefined | Additional CSS classes |

Sidebar

Standalone sidebar navigation component.

<Sidebar tree={pageTree} />

| Prop | Type | Default | Description | | ------- | ---------- | ----------- | ---------------------- | | tree | PageTree | required | Navigation tree | | class | string | undefined | Additional CSS classes |

Functions

createFileSystemSource(options)

Creates a source from Vite's import.meta.glob result.

const source = createFileSystemSource({
	glob: modules,
	rootDir: 'docs',
	baseUrl: '/docs'
});

| Option | Type | Default | Description | | --------- | ------------ | --------- | ---------------------------- | | glob | GlobResult | required | Result of import.meta.glob | | rootDir | string | 'docs' | Root directory name to strip | | baseUrl | string | '/docs' | Base URL prefix |

Returns: FileSystemSource

• getPages() — Returns all pages as a flat array
• getPage(slug) — Find a page by slug array
• getPageByUrl(url) — Find a page by URL string
• pageTree — Nested navigation tree

Tree Utilities

import { buildPageTree, flattenPageTree, findNodeByUrl, getBreadcrumbs } from 'fumadocs-svelte';

// Build tree from pages
const tree = buildPageTree(pages);

// Flatten tree back to array
const pages = flattenPageTree(tree);

// Find node by URL
const node = findNodeByUrl(tree, '/docs/guide');

// Get breadcrumb trail
const crumbs = getBreadcrumbs(tree, '/docs/guide/setup');

Types

import type {
	Page,
	PageTree,
	TreeNode,
	PageNode,
	FolderNode,
	Frontmatter,
	RawSvxModule,
	FileSystemSource,
	FileSystemSourceOptions
} from 'fumadocs-svelte';

Customization

Custom Frontmatter

Extend the Frontmatter type with custom fields:

interface CustomFrontmatter extends Frontmatter {
	icon?: string;
	order?: number;
}

const source = createFileSystemSource<CustomFrontmatter>({
	glob: modules,
	rootDir: 'docs',
	baseUrl: '/docs'
});

Prose Styling

The template uses Tailwind Typography. Customize with modifiers:

<div class="prose prose-slate prose-lg prose-headings:text-blue-900">
	<Content />
</div>

Requirements

• SvelteKit 2.x
• Svelte 5.x
• Tailwind CSS (recommended)

Completed Features

Features already implemented from the original Fumadocs:

Core Functionality

• [x] File System Source — Load pages from file system using Vite's import.meta.glob
• [x] Automatic Page Tree — Generate nested navigation tree from file structure
• [x] Tree Utilities — buildPageTree, flattenPageTree, findNodeByUrl, getBreadcrumbs
• [x] Index Page Support — Handle index.svx files as folder main pages
• [x] Nested Folder Structure — Automatic tree building from nested directories
• [x] Frontmatter Support — Title, description, and extensible custom frontmatter
• [x] TypeScript Support — Full type safety with strict types

UI Components

• [x] DocsLayout Component — Main layout with integrated sidebar
• [x] Sidebar Component — Standalone collapsible navigation sidebar
• [x] Mobile-Responsive Design — Mobile menu with overlay and collapsible sidebar
• [x] Active Page Highlighting — Current page highlighting in navigation
• [x] Collapsible Folders — Auto-expand folders containing active page
• [x] Accessibility — Built with bits-ui for proper ARIA attributes and keyboard navigation

Developer Experience

• [x] CLI Tool — npx fumadocs-svelte init for quick project setup
• [x] mdsvex Integration — Native support for .svx files
• [x] Tailwind Typography — Beautiful prose styling out of the box
• [x] Customizable — Extensible components and styling

Roadmap

Planned features for future releases (ordered by priority):

• [ ] Automatic generated back/forward navigation buttons
• [ ] Breadcrumb navigation
• [ ] Copy button for code blocks
• [ ] "Edit this page" button (GitHub/GitLab integration)
• [ ] Enhanced syntax highlighting (Shiki)
• [ ] "In This Page" TOC with scroll progress indicator
• [ ] Copy markdown to clipboard
• [ ] Full-text search integration
• [ ] Dark mode toggle
• [ ] Line numbers
• [ ] Filename display
• [ ] Last edited timestamp display
• [ ] Callout/Admonition blocks (info, warning, error, tip)
• [ ] Tabs component
• [ ] Accordion/Collapsible sections
• [ ] Steps component
• [ ] Cards/Card grids
• [ ] Line/word highlighting in code blocks
• [ ] File tree display
• [ ] Image zoom
• [ ] "Open in AI" buttons (ChatGPT, Gemini, Claude, etc.)
• [ ] i18n/internationalization support
• [ ] Versioning support
• [ ] OpenAPI documentation integration
• [ ] Auto-generated API reference from TypeScript
• [ ] RSS feed generation
• [ ] Sitemap generation

License

MIT © jis3r

Credits

Inspired by Fumadocs — the excellent documentation framework for Next.js.