Svelte App Examples

# Svelte Examples (Svelte + SvelteKit)

Real-world, copy-pasteable examples for getting started with Svelte and SvelteKit across common project types.

This repo is intentionally organized as a pnpm workspace with multiple small apps. Each app teaches a focused concept with a minimal, production-shaped setup.

Requirements

• Node.js: LTS recommended (18+; 20+ preferred)
• pnpm: latest stable

Quick start

pnpm -v
pnpm install

# run a specific app
pnpm -C apps/kit-routing dev

Workspace layout

• apps/ - runnable example apps
• docs/ - cross-cutting guides (tooling, DB conventions, learning path)

Example apps (iteration 1)

Each app contains its own README.md with:

• what it teaches
• how to run
• key files to read
• suggested exercises

apps/svelte-basics-vite/

Pure Svelte (no Kit) fundamentals for frontend-only projects.

Teaches: components, props/events, slots, reactivity, stores, actions, transitions.

apps/kit-routing/

SvelteKit routing mental model.

Teaches: layouts, nested routes, params, route groups, error pages, redirects.

apps/kit-data-loading/

Data loading and SSR/CSR boundaries.

Teaches: load (server/client), caching, invalidation, environment variables.

apps/kit-forms-actions/

Forms with progressive enhancement.

Teaches: server actions, validation (Zod), optimistic UI, error handling.

apps/kit-api-endpoints/

Backend development with SvelteKit route handlers.

Teaches: REST-ish patterns, cookies/headers, input validation, basic rate limiting pattern.

apps/kit-db-drizzle/

SQLite + Drizzle ORM example.

Teaches: schema, migrations, seeding, CRUD endpoints, server-only DB access.

Standards (DX)

• TypeScript everywhere.
• Prettier formatting; ESLint for linting.
• Keep examples minimal but production-shaped.
• Prefer framework-native patterns (SvelteKit load, actions, route handlers) before adding extra libraries.

Learning path

Start here: docs/learning-path.md