SvelteKit is a powerful meta-framework built on top of Svelte that provides a complete solution for building high-performance web applications with file-based routing, server-side rendering, static site generation, and seamless integration with Svelte 5's reactivity system. It handles the complexities of modern web development — from data loading and form handling to deployment across multiple platforms — while maintaining excellent developer experience through conventions like filesystem-based routing, automatic code splitting, and progressive enhancement.
What This Cheat Sheet Covers
This topic spans 15 focused tables and 120 indexed concepts, 106 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Core Route Files
File-based routing in SvelteKit uses specially named files with a + prefix to define pages, layouts, and API endpoints. Each file type serves a specific purpose in the request-response cycle, from loading data to rendering components to handling form submissions. Understanding which file runs where (server-only vs universal) and when (SSR vs CSR) is fundamental to building efficient SvelteKit applications.
| File | Example | Description | |
|---|---|---|---|
<script> let { data } = $props();</script><h1>{data.title}</h1> | • Defines a page component that renders at a route • receives data from load functions and form from actions• runs on both server (SSR) and client (hydration/navigation) | ||
export const load = ({ params }) => { return { title: params.slug };}; | • Universal load function that runs on both server and client • use for public API calls or when you need to return non-serializable data like component constructors | ||
export const load = async ({ cookies }) => { const user = await db.getUser(); return { user };}; | • Server-only load function with access to cookies, locals, platform• use for database queries, private environment variables, or server-only operations | ||
<script> let { children } = $props();</script><nav>...</nav>{ children()} | • Wraps pages and nested layouts • renders markup that persists across navigation within its scope • must render children() snippet for nested content | ||
export const load = () => { return { sections: [...] };}; | • Universal layout load function • data is available to all child pages and layouts • runs before child load functions | ||
export const load = ({ locals }) => { return { user: locals.user };}; | • Server-only layout load • commonly used for authentication checks that apply to multiple routes • data flows down to all descendants | ||
export const GET = async ({ url }) => { const data = await fetch(url); return json(data);}; | • API route that exports HTTP method handlers ( GET, POST, PUT, DELETE, etc.)• returns a Response object• runs server-only | ||
<script> import { page } from '$app/state';</script><h1>{page.error.message}</h1> | • Custom error boundary that renders when error() is thrown or unexpected errors occur• SvelteKit walks up the tree to find the nearest error page |