Documentation Template

A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS.

Template Preview

Overview

Create beautiful, modern documentation sites with minimal setup. This template combines the power of Svelte 5 with the flexibility of Markdown to deliver a superior documentation experience.

Features

📚 MDSvex Integration - Write documentation in Markdown with Svelte components
🎨 Modern Design - Built with Tailwind CSS and shadcn/ui components
🌙 Dark Mode - Automatic dark mode with system preference detection
🔍 Search - Built-in search functionality powered by FlexSearch
📱 Responsive - Mobile-first design that works on all devices
📑 Auto-Navigation - Automatic documentation structure generation
📖 Table of Contents - Dynamic table of contents for each page
⚡ Fast - Optimized for speed and performance
🔒 Type Safe - Full TypeScript support

Quick Start

Click the green "Use this template" button
Create a new repository

Clone your repository:

git clone https://github.com/yourusername/your-repo-name.git

Install dependencies:
```
cd your-repo-name
npm install
```
Start the development server:
```
npm run dev
```

Project Structure

your-project/
├── src/
│   ├── content/          # Documentation markdown files
│   ├── lib/
│   │   ├── components/   # Core components
│   │   │   ├── document/ # Document-related components
│   │   │   ├── home/     # Home page components
│   │   │   └── ui/       # UI components
│   │   ├── hooks/        # Custom hooks
│   │   ├── types/        # TypeScript type definitions
│   │   ├── config.ts     # Site configuration
│   │   ├── index.ts      # Library exports
│   │   └── utils.ts      # Utility functions
│   ├── routes/           # SvelteKit routes
│   ├── app.css          # Global styles
│   ├── app.d.ts         # TypeScript declarations
│   └── app.html         # HTML template
└── static/              # Static assets

Writing Documentation

Place your markdown files in the src/content directory. The folder structure will automatically generate the navigation.

---
title: Getting Started
description: Learn how to use this template
---

# Getting Started

Write your documentation here...

Customization

Themes

Modify the theme in src/app.css or use pre-built themes from shadcn-svelte.

Components

Customize components in src/lib/components to match your brand.

Configuration

Update site settings in src/lib/config:

export const siteConfig = {
    title: 'Your Documentation',
    description: 'Your site description',
    // ...other settings
};

Development

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Deployment

This template can be deployed to any static hosting platform:

Vercel
Netlify
GitHub Pages
Cloudflare Pages

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - use this template for any project.

Acknowledgments

Support

Need help with your documentation? Contact us.