SvelteKit

Overview

SvelteKit is a full-stack framework built on Svelte's compiler-first approach, shipping minimal JavaScript with no virtual DOM runtime. It provides file-based routing for pages and API endpoints, server-side form actions with progressive enhancement, and deployment adapters for any hosting platform.

Instructions

• When setting up routing, use file-based conventions: +page.svelte for pages, +layout.svelte for shared layouts, +server.ts for API endpoints, and route groups (name) for shared layouts without URL impact.
• When loading data, use +page.server.ts for server-only loading (database queries, secrets) and +page.ts for universal loading. Keep load() functions thin and move business logic to $lib/server/.
• When handling forms, use server-side form actions in +page.server.ts with fail() for validation errors and redirect() for success. Add use:enhance for progressive enhancement.
• When creating API routes, export GET, POST, PUT, DELETE handlers from +server.ts files, returning json(), text(), or error() responses.
• When configuring rendering, default to SSR, use export const prerender = true for static pages (marketing, docs, blog), and export const ssr = false for client-only pages.
• When adding middleware, use src/hooks.server.ts with the handle function for auth, logging, and redirects, and sequence() to compose multiple hooks.
• When deploying, choose the appropriate adapter: adapter-auto for auto-detection, adapter-node for self-hosted, adapter-static for full SSG, or platform-specific adapters for Vercel, Cloudflare, or Netlify.

Examples

Example 1: Build a CRUD app with form actions