Svelte 5 & SvelteKit Cheat Sheet
Quick reference guide for Svelte 5 Runes ($state, $derived, $effect), components, props, and SvelteKit routing.
Modern Frontend
svelte
svelte5
sveltekit
Svelte is a compiler-based UI framework that compiles components into efficient vanilla JavaScript. Svelte 5 introduces Runes for explicit, fine-grained reactivity.
Svelte 5 Runes Reference
Runes are compiler symbols that control reactivity and component boundaries.
Table
| Rune | Purpose | Example Syntax |
|---|---|---|
$state(val) | Declare fine-grained reactive state | let count = $state(0) |
$derived(exp) | Derived reactive expression | let double = $derived(count * 2) |
$effect(() => {}) | Side-effect that re-runs on state change | $effect(() => { console.log(count); }) |
$props() | Declare component input props | let { title, count = 0 } = $props() |
$bindable(val) | Allow two-way prop binding | let { value = $bindable('') } = $props() |
$inspect(val) | Development logger for reactive state changes | $inspect(count) |
Component Example with Svelte 5 Runes
svelte
<script lang="ts">
// Component props definition
let { title = 'Counter', initialCount = 0 } = $props();
// Reactive state using $state rune
let count = $state(initialCount);
// Derived state using $derived rune
let double = $derived(count * 2);
// Reaction side-effect
$effect(() => {
console.log(`Count changed to ${count}`);
});
function increment() {
count += 1;
}
</script>
<div class="card">
<h2>{title}</h2>
<p>Count: {count} | Double: {double}</p>
<button onclick={increment}>Increment</button>
</div>
Template Logic & Control Flow
Table
| Block | Syntax Example |
|---|---|
| Conditional Block | {#if count > 10}<p>High</p>{:else if count > 0}<p>Low</p>{:else}<p>Zero</p>{/if} |
| Each / Loop Block | {#each items as item, index (item.id)}<li>{item.name}</li>{/each} |
| Await / Promise Block | {#await promise}<p>Loading...</p>{:then data}<p>{data.name}</p>{:catch error}<p>{error.message}</p>{/await} |
| Snippet Block (Svelte 5) | {#snippet header(text)}<h1>{text}</h1>{/snippet} {@render header('Hello')} |
SvelteKit File-based Routing
Table
| File | Location | Execution Context & Purpose |
|---|---|---|
+page.svelte | src/routes/about/ | Component rendered for /about |
+page.ts | src/routes/about/ | Universal load function (runs client & server) |
+page.server.ts | src/routes/about/ | Server-only load function & form actions |
+layout.svelte | src/routes/ | Layout template wrapping page child routes |
+server.ts | src/routes/api/ | Endpoint handling HTTP GET, POST, DELETE methods |
Common Pitfalls & Tips
[!NOTE] In Svelte 5, Event Handlers use standard HTML attributes like
onclick={fn}instead of legacy Svelte 4on:click={fn}syntax.
[!TIP] In SvelteKit
+page.server.ts, useexport const actions = { default: async ({ request }) => {} }to process HTML native form submissions cleanly without JavaScript.