🚀 Convex SvelteKit Boilerplate

A production-ready, modern SaaS boilerplate built with the latest web technologies. This template provides everything you need to launch your next project quickly and efficiently.

✨ Features

Core Technologies

• 🎨 SvelteKit with Svelte 5 - Modern, reactive frontend framework with the latest Runes API
• 🔥 Convex - Real-time backend database with serverless functions
• 🔐 Better Auth - Comprehensive authentication solution with email/password and OAuth
• 💳 Autumn - Stripe billing wrapper for seamless payment integration
• 📧 Resend - Transactional email service for password resets and email verification
• 🎭 shadcn-svelte - Beautiful, accessible UI components
• 💨 Tailwind CSS v4 - Utility-first CSS framework (latest version)
• 🎯 Lucide - Beautiful icon library
• 📊 PostHog - Product analytics and feature flags
• 🪄 Runed - Powerful utilities for Svelte 5
• ✅ Neverthrow - Type-safe error handling with Result types
• 🤖 Vercel AI SDK - AI-powered features with Anthropic integration

Built-in Features

✅ Authentication System

• Email/password authentication
• Google OAuth support (configurable)
• Password reset flow
• Email verification
• Session management

✅ User Management

• User profile settings
• Avatar upload with Convex storage
• Account information management

✅ Subscription & Billing

• Stripe integration via Autumn
• Subscription management
• Payment processing
• Billing history

✅ UI Components

• Dashboard with sidebar-07 layout from shadcn-svelte
• Responsive design
• Dark/light mode support
• Accessible components

✅ Developer Experience

• TypeScript throughout
• Type-safe database queries
• Hot module replacement
• ESLint & Prettier configured
• Result-based error handling with neverthrow

📋 Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• Convex Account - Sign up here
• Resend Account - Sign up here
• Stripe Account - Sign up here (optional, for billing)
• PostHog Account - Sign up here (optional, for analytics)

🚀 Quick Start

1. Clone the repository

git clone https://github.com/yourusername/convex-sveltekit-boilerplate.git
cd convex-sveltekit-boilerplate

2. Install dependencies

pnpm install
# or
npm install

3. Set up environment variables

Copy .env.example to .env.local:

cp .env.example .env.local

Fill in your environment variables:

# Convex
PUBLIC_CONVEX_URL=your_convex_url
PUBLIC_CONVEX_SITE_URL=your_convex_site_url

# Site
SITE_URL=http://localhost:5173

# Better Auth
BETTER_AUTH_SECRET=your_auth_secret # Generate with: openssl rand -base64 32
BETTER_AUTH_URL=http://localhost:5173

# OAuth (Optional)
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Resend
RESEND_API_KEY=your_resend_api_key
RESET_EMAIL_FROM="Your App <[email protected]>"
[email protected]

# Autumn (Stripe)
AUTUMN_API_KEY=your_autumn_api_key
PUBLIC_AUTUMN_PUBLISHABLE_KEY=your_autumn_publishable_key

# PostHog
PUBLIC_POSTHOG_API_KEY=your_posthog_api_key
PUBLIC_POSTHOG_HOST=https://app.posthog.com

# Anthropic (for AI SDK)
ANTHROPIC_API_KEY=your_anthropic_api_key

4. Initialize Convex

pnpm convex dev

This will:

• Create a new Convex project (or link to existing)
• Set up your database schema
• Start the Convex dev server

5. Start the development server

In a new terminal:

pnpm dev

The app will be running at http://localhost:5173

📁 Project Structure

convex-sveltekit-boilerplate/
├── convex/                      # Convex backend
│   ├── schema.ts               # Database schema
│   ├── auth.ts                 # Authentication config
│   ├── users.ts                # User queries/mutations
│   └── subscriptions.ts        # Subscription queries/mutations
├── src/
│   ├── lib/
│   │   ├── components/         # Reusable components
│   │   │   ├── ui/            # shadcn-svelte components
│   │   │   └── app-sidebar.svelte
│   │   ├── server/            # Server-only code
│   │   │   └── auth.ts        # Better Auth server config
│   │   ├── utils/             # Utility functions
│   │   ├── auth-client.ts     # Auth client
│   │   ├── convex-client.ts   # Convex client
│   │   └── analytics.ts       # PostHog config
│   └── routes/
│       ├── (app)/             # Protected routes
│       │   ├── dashboard/     # Dashboard pages
│       │   └── +layout.svelte # App layout with sidebar
│       ├── (auth)/            # Auth routes
│       │   └── auth/
│       │       ├── signin/
│       │       └── signup/
│       └── +page.svelte       # Landing page
├── package.json
├── svelte.config.js
├── vite.config.ts
└── tailwind.config.js

🔧 Development

Running both servers

For the best development experience, run both servers in parallel:

# Terminal 1 - Convex backend
pnpm convex dev

# Terminal 2 - SvelteKit frontend
pnpm dev

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm lint - Lint code
• pnpm format - Format code with Prettier
• pnpm check - Type-check with svelte-check
• pnpm convex:dev - Start Convex dev server
• pnpm convex:deploy - Deploy Convex backend

🚢 Deployment

Deploy to Vercel

1. Deploy your Convex backend:

pnpm convex deploy

2. Deploy your frontend to Vercel:

3. Set environment variables in Vercel:

Go to your Vercel project settings and add all the environment variables from .env.example.

Make sure to update:

• SITE_URL to your production domain
• BETTER_AUTH_URL to your production domain
• PUBLIC_CONVEX_URL to your production Convex URL

🎨 Customization

Adding shadcn-svelte Components

This template uses shadcn-svelte for UI components. To add more components:

npx shadcn-svelte@latest add [component-name]

Configuring Better Auth

Edit src/lib/server/auth.ts to configure authentication providers and options.

Modifying the Convex Schema

Edit convex/schema.ts to add or modify tables. Convex will automatically sync your schema changes.

Styling

The template uses Tailwind CSS v4. Customize your theme in src/app.css.

🧪 Type-Safe Error Handling

This boilerplate uses neverthrow for type-safe error handling:

import { ok, err } from '$lib/utils/result';

function divide(a: number, b: number) {
  if (b === 0) {
    return err('Cannot divide by zero');
  }
  return ok(a / b);
}

const result = divide(10, 2);
result.match(
  (value) => console.log('Success:', value),
  (error) => console.error('Error:', error)
);

🤝 Contributing

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

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with SvelteKit
• Powered by Convex
• UI components from shadcn-svelte
• Authentication by Better Auth
• Billing via Autumn
• Icons by Lucide

📚 Learn More

• SvelteKit Documentation
• Svelte 5 Documentation
• Convex Documentation
• Better Auth Documentation
• shadcn-svelte Documentation
• Tailwind CSS v4 Documentation
• Runed Documentation
• Neverthrow Documentation

💬 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Check out the documentation links above
• Join the respective community Discord servers

Built with ❤️ using modern web technologies