Svelte 5 Has a Free API You've Never Heard Of

Svelte 5 introduces Runes — a new reactivity system that replaces the old $: syntax with explicit, composable primitives. It's the biggest Svelte update ever, and the new APIs are incredibly powerful.

What's New in Svelte 5?

• Runes — $state, $derived, $effect replace reactive declarations
• Fine-grained reactivity — only what changed updates
• Universal reactivity — works in .svelte AND .ts files
• Snippets — reusable template fragments
• Event attributes — onclick instead of on:click

The Hidden API: Runes

<script>
// $state — reactive state
let count = $state(0);
let todos = $state([{ text: 'Learn Svelte 5', done: false }]);

// $derived — computed values (replaces $:)
let doubled = $derived(count * 2);
let remaining = $derived(todos.filter(t => !t.done).length);

// $effect — side effects (replaces $: blocks with side effects)
$effect(() => {
  console.log(`Count is now ${count}`);
  document.title = `Count: ${count}`;
});

function addTodo(text) {
  todos.push({ text, done: false }); // Direct mutation works!
}
</script>

<button onclick={() => count++}>Count: {count} (doubled: {doubled})</button>
<p>{remaining} remaining</p>

Universal Reactivity — .ts Files!

// stores/counter.svelte.ts — reactivity outside components!
export function createCounter(initial = 0) {
  let count = $state(initial);
  let doubled = $derived(count * 2);

  return {
    get count() { return count; },
    get doubled() { return doubled; },
    increment: () => count++,
    decrement: () => count--,
    reset: () => count = initial
  };
}

// Use in any component
const counter = createCounter(10);

Snippets API — Reusable Templates

{#snippet userCard(user)}
  <div class="card">
    <img src={user.avatar} alt={user.name} />
    <h3>{user.name}</h3>
    <p>{user.role}</p>
  </div>
{/snippet}

<div class="grid">
  {#each users as user}
    {@render userCard(user)}
  {/each}
</div>

Quick Start

npx sv create my-app
cd my-app && npm install && npm run dev

Why Developers Love Svelte 5

A developer shared: "Svelte 5 runes solved our biggest pain point — sharing reactive state between components and .ts files. The $state and $derived runes work everywhere. We deleted 40% of our store boilerplate code."

---

Building with Svelte? Email [e-mail] or check my tools.

Svelte 5 vs React vs Vue — which framework has the best DX?