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

1. Click the green "Use this template" button
2. Create a new repository
3. Clone your repository:

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

4. Install dependencies:

   cd your-repo-name
   npm install

5. 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

• Svelte
• shadcn-svelte
• Tailwind CSS
• MDSvex

Support

Need help with your documentation? Contact us.