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. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
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 |