Svelte 5 Runes — A Practical Guide for Portfolios

Runes are explicit, composable primitives for state and derivations in Svelte 5.

If you build portfolio sites or blogs, you don’t need complex state management — but you do want clarity. That’s where runes shine.

Core Runes You’ll Use

<script>
  let count = $state(0);
  const doubled = $derived(count * 2);

  function bump() {
    count += 1;
  }
</script>

<button on:click={bump}>Clicked {count} times</button>
<p>That’s {doubled} in total impact.</p>

• $state: local, reactive state
• $derived: compute-on-change without extra stores
• $effect: run side effects when dependencies change

UI Patterns for Content Sites

• “Sticky” in-view headers powered by $state
• Simple filters (tags, years) using $derived lists
• Gentle animations triggered in $effect

Takeaway

Runes make small sites simpler. You write less glue code and keep intent obvious — perfect for fast, clean portfolio pages.