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

User request: "Create a SvelteKit app with form-based task management"

Actions:

1. Define routes for task list (

   /tasks/+page.svelte

   ) and detail (

   /tasks/[id]/+page.svelte

   )
2. Implement

   load()

   in

   +page.server.ts

   to fetch tasks from the database
3. Add form actions for create, update, and delete with Zod validation
4. Enhance forms with

   use:enhance

   for no-JS fallback

Output: A full-stack task management app with progressive enhancement and server-side validation.

Example 2: Deploy a hybrid SvelteKit app

User request: "Set up a SvelteKit site with static marketing pages and dynamic dashboard"

Actions:

1. Create marketing pages with

   export const prerender = true

2. Build dashboard routes with SSR and

   +page.server.ts

   for authenticated data loading
3. Add auth hook in

   src/hooks.server.ts

   to protect dashboard routes
4. Configure

   adapter-vercel

   with edge functions for the dashboard

Output: A hybrid app with pre-rendered marketing pages and server-rendered authenticated dashboard.

Guidelines

• Use

  +page.server.ts

  for data loading that touches databases or secrets; never expose credentials in

  +page.ts

  .
• Default to server-side form handling with actions; add

  use:enhance

  for progressive enhancement.
• Use

  export const prerender = true

  on marketing pages, docs, and blog posts.
• Keep

  load()

  functions thin: fetch data and return it, move business logic to

  $lib/server/

  .
• Use route groups

  (name)

  to share layouts without affecting URLs.
• Set

  data-sveltekit-preload-data="hover"

  on links for perceived-instant navigation.
• Always handle the

  form

  prop in

  +page.svelte

  to display validation errors after failed actions.