SubTranslateGetting started
Everything you need to fill in and run to get this template working.
Setup checklist
0/5 done1. Install dependencies
Installs SvelteKit, Better Auth, Drizzle, AI SDKs and the rest.
npm install2. Create your environment file
Then fill in the required values listed below.
cp .env.example .env3. Generate a Better Auth secret
Paste the result into BETTER_AUTH_SECRET in .env.
npx @better-auth/cli secret4. Push the database schema
Creates the user/session/account/verification tables in MariaDB.
npm run db:push5. Start the dev server
Open http://localhost:5173 — you are ready to build.
npm run devEnvironment variables
| Variable | Required | Notes |
|---|---|---|
| DATABASE_URL | required | MariaDB/MySQL connection string |
| BETTER_AUTH_SECRET | required | 32+ random chars |
| ORIGIN | required | App URL, https:// in production |
| GOOGLE_CLIENT_ID / _SECRET | optional | Google OAuth |
| MICROSOFT_CLIENT_ID / _SECRET | optional | Microsoft OAuth |
| OPENAI_API_KEY | optional | OpenAI models |
| GEMINI_API_KEY | optional | Google Gemini |
| DEEPSEEK_API_KEY | optional | DeepSeek models |
| PUBLIC_TURNSTILE_SITE_KEY / TURNSTILE_SECRET_KEY | optional | Captcha |
Overview
What's included
- Auth — Better Auth: email + password, magic link, Google & Microsoft OAuth
- AI — OpenAI, Gemini & DeepSeek behind one provider interface (streaming)
- i18n — Paraglide with English & Czech
- Database — Drizzle ORM on MariaDB/MySQL
- Captcha — Cloudflare Turnstile (fails closed in production)
- Security — CSP & security headers, rate limiting, hardened cookies
- UI — Tailwind v4, dark mode, reusable component kit, Lucide icons
Optional integrations degrade gracefully — the app runs with an empty
.env.
Markdown editor component
Supports the toolbar, paste & drag-and-drop images. Image upload requires being signed in.
Markdown editor demo
A reusable MarkdownEditor (Svelte 5 runes). Try the toolbar, Ctrl+B/I/K, Tab indent, and fullscreen.
Syntax highlighting (Shiki)
import { MarkdownEditor } from '$lib/components/markdown';
const greet = (name: string) => `Hello, ${name}!`;GitHub-flavored Markdown
| Feature | Status |
|---|---|
| Tables | ✅ |
| Task lists | ✅ |
| Strikethrough |
- Code highlighting
- Mermaid diagrams
- Your next feature
Diagrams (Mermaid)
Output is sanitized with DOMPurify before rendering.
Markdown supported · drag, paste or upload images 106 words · 662 chars