Svelte Cheat Sheet

A concise guide to Svelte 5 runes, reactive state, template syntax, and stores for building fast, compiler-driven components.

2 PagesBeginnerMar 12, 2026

Reactive State with Runes

Svelte 5's rune-based reactivity: state, derived values, and effects.

javascript

<script>  let count = $state(0);  let doubled = $derived(count * 2);  $effect(() => {    console.log(`count is now ${count}`);  });  function increment() {    count += 1;  }</script><button onclick={increment}>  Count: {count} (doubled: {doubled})</button>

Template Control Flow

Conditional blocks, loops, and two-way binding.

html

{#if user}  <p>Welcome, {user.name}</p>{:else}  <p>Please log in</p>{/if}{#each items as item (item.id)}  <li>{item.name}</li>{/each}<input bind:value={name} /><button onclick={() => count++}>+1</button>

Core Concepts

The building blocks of a modern Svelte 5 component.

$state- creates reactive state; reassigning it triggers a UI update
$derived- a computed value automatically recalculated when its dependencies change
$props- declares a component's props, replacing the legacy 'export let' syntax
$effect- runs a side effect whenever the reactive values it reads change
bind:value- two-way binds a form element to a variable
{#each}- loop block for rendering lists, supports an optional keyed expression
{#if}/{:else if}/{:else}- conditional rendering blocks
{#snippet}- defines a reusable chunk of markup, replacing many slot use cases

Stores

Sharing reactive state across components with svelte/store.

javascript

// store.jsimport { writable, derived } from 'svelte/store';export const count = writable(0);export const doubled = derived(count, ($count) => $count * 2);// Component.svelte<script>  import { count } from './store.js';</script><button onclick={() => $count++}>  {$count}</button>

Pro Tip

In Svelte 5, prefer runes ($state, $derived, $effect) over the legacy 'let'/'$:' reactivity -- they work consistently both inside .svelte files and in plain .svelte.js modules, and they make reactive dependencies explicit instead of inferred.

Was this cheat sheet helpful?

Angular Cheat Sheet

jQuery Cheat Sheet