sveltekit

name	sveltekit
description	Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework.
category	frontend
risk	safe
source	community
date_added	2026-03-18
author	suhaibjanjua
tags	["svelte","sveltekit","fullstack","ssr","ssg","typescript"]
tools	["claude","cursor","gemini"]

SvelteKit Full-Stack Development

Overview

SvelteKit is the official full-stack framework built on top of Svelte. It provides file-based routing, server-side rendering (SSR), static site generation (SSG), API routes, and progressive form actions — all with Svelte's compile-time reactivity model that ships zero runtime overhead to the browser. Use this skill when building fast, modern web apps where both DX and performance matter.

When to Use This Skill

• Use when building a new full-stack web application with Svelte
• Use when you need SSR or SSG with fine-grained control per route
• Use when migrating a SPA to a framework with server capabilities
• Use when working on a project that needs file-based routing and collocated API endpoints
• Use when the user asks about +page.svelte, +layout.svelte, load functions, or form actions

How It Works

Step 1: Project Setup

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

Choose Skeleton project + TypeScript + ESLint/Prettier when prompted.

Directory structure after scaffolding:

src/
  routes/
    +page.svelte        ← Root page component
    +layout.svelte      ← Root layout (wraps all pages)
    +error.svelte       ← Error boundary
  lib/
    server/             ← Server-only code (never bundled to client)
    components/         ← Shared components
  app.html              ← HTML shell
static/                 ← Static assets

Step 2: File-Based Routing

Every +page.svelte file in src/routes/ maps directly to a URL:

src/routes/+page.svelte          → /
src/routes/about/+page.svelte    → /about
src/routes/blog/[slug]/+page.svelte  → /blog/:slug
src/routes/shop/[...path]/+page.svelte → /shop/* (catch-all)

Route groups (no URL segment): wrap in (group)/ folder. Private routes (not accessible as URLs): prefix with _ or (group).

Step 3: Loading Data with load Functions

Use a +page.ts (universal) or +page.server.ts (server-only) file alongside the page:

// src/routes/blog/[slug]/+page.server.ts
 { error }  ;
  {  }  ;

  :  =  ({ params, fetch }) => {
   post =  ().( r.());

   (!post) {
    (, );
  }

   { post };
};