Svelte 5 Refresher with Runes • luminary.blog

What is Svelte?

Svelte is a compile-time framework that builds highly optimized vanilla JavaScript at build time, rather than shipping a large runtime like React or Vue. It offers a simple, intuitive syntax and excellent performance.

Svelte 5 introduces runes, a new way for reactivity that provides more explicit control and better performance.

Key Advantages

No virtual DOM: Svelte compiles components to efficient imperative code that directly manipulates the DOM
No runtime: React/Vue ship a runtime library (~40-100KB), Svelte compiles to vanilla JavaScript
Smaller bundles: Svelte apps are typically smaller and faster
Simpler syntax: Less boilerplate, no hooks or lifecycle complexity
True reactivity: Updates are surgical, not diffing-based

Basic Component Structure

1
<script>
2
  // Component logic with runes
3
  let name = $state('World');
4
  let count = $state(0);
5

6
  function increment() {
7
    count += 1;
8
  }
9
</script>
10

11
<!-- Markup goes here -->
12
<h1>Hello {name}!</h1>
13
<button onclick={increment}>
14
  Clicked {count} times
15
</button>
16

17
<!-- Styles go here -->
18
<style>
19
  h1 {
20
    color: purple;
21
  }
22
</style>

Reactivity with Runes

$state Rune

The $state rune creates reactive state that automatically updates the UI when changed.

1
<script>
2
  let count = $state(0);
3

4
  // No need for reactive statements - just use regular variables
5
  let doubled = $derived(count * 2);
6

7
  // Use $effect for side effects
8
  $effect(() => {
9
    console.log('Count is now:', count);
10
    if (count > 10) {
11
      console.log('Count is getting high!');
12
    }
13
  });
14
</script>
15

16
<p>Count: {count}</p>
17
<p>Doubled: {doubled}</p>
18
<button onclick={() => count++}>+</button>

$state with Arrays and Objects

With Svelte 5, you can mutate arrays and objects directly - no need for reassignment!

1
<script>
2
  let numbers = $state([1, 2, 3]);
3
  let user = $state({ name: 'John', age: 30 });
4

5
  function addNumber() {
6
    // Direct mutation works!
7
    numbers.push(numbers.length + 1);
8
  }
9

10
  function updateAge() {
11
    // Direct property mutation works!
12
    user.age += 1;
13
  }
14
</script>

$derived Rune

The $derived rune creates computed values that automatically update when dependencies change.

1
<script>
2
  let firstName = $state('John');
3
  let lastName = $state('Doe');
4

5
  // Automatically recomputes when firstName or lastName changes
6
  let fullName = $derived(`${firstName} ${lastName}`);
7

8
  let numbers = $state([1, 2, 3, 4, 5]);
9
  let total = $derived(numbers.reduce((sum, n) => sum + n, 0));
10
</script>
11

12
<p>Full name: {fullName}</p>
13
<p>Total: {total}</p>

$effect Rune

The $effect rune runs side effects when dependencies change.

1
<script>
2
  let count = $state(0);
3

4
  // Runs whenever count changes
5
  $effect(() => {
6
    console.log(`Count is ${count}`);
7
    document.title = `Count: ${count}`;
8
  });
9

10
  // Cleanup function
11
  $effect(() => {
12
    const interval = setInterval(() => {
13
      console.log('Tick');
14
    }, 1000);
15

16
    return () => {
17
      clearInterval(interval);
18
    };
19
  });
20
</script>

Props

$props Rune

In Svelte 5, props are declared using the $props rune instead of export let.

1
<script>
2
  let { name, age = 25, isActive = false } = $props();
3
</script>
4

5
<p>Name: {name}</p>
6
<p>Age: {age}</p>
7
<p>Status: {isActive ? 'Active' : 'Inactive'}</p>

1
<script>
2
  import Child from './Child.svelte';
3
</script>
4

5
<Child name="Alice" age={30} isActive />

Prop Spreading and Rest Props

1
<script>
2
  // Get specific props and collect the rest
3
  let { name, age, ...rest } = $props();
4
</script>
5

6
<p>Name: {name}</p>
7
<p>Age: {age}</p>
8
<p>Other props: {JSON.stringify(rest)}</p>

1
<script>
2
  import Child from './Child.svelte';
3

4
  let user = { name: 'Bob', age: 25, isActive: true, role: 'admin' };
5
</script>
6

7
<Child {...user} />

TypeScript with $props

1
<script lang="ts">
2
  interface Props {
3
    name: string;
4
    age?: number;
5
    isActive?: boolean;
6
  }
7

8
  let { name, age = 25, isActive = false }: Props = $props();
9
</script>

Event Handling

Basic Events

In Svelte 5, event handlers use the standard HTML attribute names (e.g., onclick instead of on:click).

1
<script>
2
  function handleClick() {
3
    alert('Button clicked!');
4
  }
5

6
  function handleMouseOver(event) {
7
    console.log('Mouse over:', event.target);
8
  }
9
</script>
10

11
<button onclick={handleClick}>Click me</button>
12
<div onmouseover={handleMouseOver}>Hover me</div>
13

14
<!-- Inline handlers -->
15
<button onclick={() => alert('Inline!')}>Inline</button>

Event Modifiers

Event modifiers are handled manually in Svelte 5:

1
<script>
2
  function handleSubmit(event) {
3
    event.preventDefault();
4
    // Handle form submission
5
  }
6

7
  function handleInnerClick(event) {
8
    event.stopPropagation();
9
    console.log('inner');
10
  }
11
</script>
12

13
<!-- Prevent default -->
14
<form onsubmit={handleSubmit}>
15
  <input type="text" />
16
  <button type="submit">Submit</button>
17
</form>
18

19
<!-- Stop propagation -->
20
<div onclick={() => console.log('outer')}>
21
  <button onclick={handleInnerClick}>
22
    Click me
23
  </button>
24
</div>

Custom Events with Callbacks

Instead of dispatching custom events, Svelte 5 uses callback props:

1
<script>
2
  let { onMessage } = $props();
3
</script>
4

5
<button onclick={() => onMessage?.('Hello from child!')}>
6
  Send Message
7
</button>

1
<script>
2
  import Child from './Child.svelte';
3

4
  function handleMessage(text) {
5
    console.log('Received:', text);
6
  }
7
</script>
8

9
<Child onMessage={handleMessage} />

Bindings

Input Bindings

Input bindings work the same way in Svelte 5, but state is declared with $state:

1
<script>
2
  let name = $state('');
3
  let age = $state(0);
4
  let selected = $state('');
5
  let checked = $state(false);
6
  let group = $state([]);
7
</script>
8

9
<!-- Text input -->
10
<input bind:value={name} placeholder="Enter name" />
11

12
<!-- Number input -->
13
<input type="number" bind:value={age} />
14

15
<!-- Select -->
16
<select bind:value={selected}>
17
  <option value="">Choose...</option>
18
  <option value="red">Red</option>
19
  <option value="blue">Blue</option>
20
</select>
21

22
<!-- Checkbox -->
23
<input type="checkbox" bind:checked />
24

25
<!-- Radio group -->
26
<input type="radio" bind:group value="option1" />
27
<input type="radio" bind:group value="option2" />

Element Bindings

1
<script>
2
  let element = $state();
3
  let scrollY = $state(0);
4
  let innerWidth = $state(0);
5
</script>
6

7
<!-- Bind to element reference -->
8
<div bind:this={element}>
9
  I'm bound to the element variable
10
</div>
11

12
<!-- Bind to window properties -->
13
<svelte:window bind:scrollY bind:innerWidth />
14

15
<p>Scroll Y: {scrollY}</p>
16
<p>Window width: {innerWidth}</p>

Conditional Rendering

Conditional rendering syntax remains the same in Svelte 5:

1
<script>
2
  let user = $state({ name: 'John', loggedIn: true });
3
  let x = $state(7);
4
</script>
5

6
<!-- if/else -->
7
{#if user.loggedIn}
8
  <h1>Welcome, {user.name}!</h1>
9
{:else}
10
  <h1>Please log in</h1>
11
{/if}
12

13
<!-- else if -->
14
{#if x > 10}
15
  <p>x is greater than 10</p>
16
{:else if x > 5}
17
  <p>x is greater than 5</p>
18
{:else}
19
  <p>x is 5 or less</p>
20
{/if}

Loops

Loop syntax remains the same in Svelte 5:

1
<script>
2
  let items = $state([
3
    { id: 1, name: 'Apple', price: 1.5 },
4
    { id: 2, name: 'Banana', price: 0.8 },
5
    { id: 3, name: 'Cherry', price: 2.0 }
6
  ]);
7

8
  let colors = $state(['red', 'green', 'blue']);
9
</script>
10

11
<!-- Basic each loop -->
12
{#each items as item}
13
  <div>{item.name} - ${item.price}</div>
14
{/each}
15

16
<!-- With index -->
17
{#each colors as color, index}
18
  <div>{index}: {color}</div>
19
{/each}
20

21
<!-- With key (important for performance) -->
22
{#each items as item (item.id)}
23
  <div>{item.name} - ${item.price}</div>
24
{/each}
25

26
<!-- With else (when array is empty) -->
27
{#each items as item}
28
  <div>{item.name}</div>
29
{:else}
30
  <p>No items found</p>
31
{/each}

Shared State Across Components

In Svelte 5, use $state in .svelte.js or .svelte.ts files to share state across components:

1
export let count = $state(0);
2
export let user = $state({ name: '', email: '' });
3

4
// Derived values work too
5
export let doubled = $derived(count * 2);

1
<script>
2
  import { count, user, doubled } from './state.svelte.js';
3
</script>
4

5
<p>Count: {count}</p>
6
<p>Doubled: {doubled}</p>
7
<button onclick={() => count++}>+</button>

1
<script>
2
  import { count, user } from './state.svelte.js';
3
</script>
4

5
<p>Current count in B: {count}</p>
6
<input bind:value={user.name} placeholder="Name" />

Both components will automatically react to changes in the shared state!

Lifecycle

In Svelte 5, lifecycle functions are replaced by $effect with proper cleanup:

1
<script>
2
  let photos = $state([]);
3

4
  // Equivalent to onMount
5
  $effect(() => {
6
    console.log('Component mounted');
7

8
    (async () => {
9
      const res = await fetch('/api/photos');
10
      photos = await res.json();
11
    })();
12
  });
13

14
  // Cleanup (equivalent to onDestroy)
15
  $effect(() => {
16
    const interval = setInterval(() => {
17
      console.log('Running...');
18
    }, 1000);
19

20
    return () => {
21
      console.log('Component destroyed / effect cleanup');
22
      clearInterval(interval);
23
    };
24
  });
25
</script>

Legacy Lifecycle Functions (Still Supported)

The old lifecycle functions still work for backwards compatibility:

1
<script>
2
  import { onMount, onDestroy } from 'svelte';
3

4
  let photos = $state([]);
5

6
  onMount(async () => {
7
    console.log('Component mounted');
8
    const res = await fetch('/api/photos');
9
    photos = await res.json();
10
  });
11

12
  onDestroy(() => {
13
    console.log('Component destroyed');
14
  });
15
</script>

Actions

Actions work similarly in Svelte 5, but event handling uses callbacks:

1
<script>
2
  function clickOutside(node, callback) {
3
    const handleClick = event => {
4
      if (node && !node.contains(event.target)) {
5
        callback?.();
6
      }
7
    };
8

9
    document.addEventListener('click', handleClick, true);
10

11
    return {
12
      destroy() {
13
        document.removeEventListener('click', handleClick, true);
14
      }
15
    };
16
  }
17

18
  let showModal = $state(false);
19
</script>
20

21
<button onclick={() => showModal = true}>Open Modal</button>
22

23
{#if showModal}
24
  <div class="modal" use:clickOutside={() => showModal = false}>
25
    <p>Click outside to close</p>
26
  </div>
27
{/if}

Actions with Parameters

1
<script>
2
  function tooltip(node, text) {
3
    let tooltipElement;
4

5
    function showTooltip() {
6
      tooltipElement = document.createElement('div');
7
      tooltipElement.textContent = text;
8
      tooltipElement.className = 'tooltip';
9
      document.body.appendChild(tooltipElement);
10
    }
11

12
    function hideTooltip() {
13
      tooltipElement?.remove();
14
    }
15

16
    node.addEventListener('mouseenter', showTooltip);
17
    node.addEventListener('mouseleave', hideTooltip);
18

19
    return {
20
      update(newText) {
21
        text = newText;
22
      },
23
      destroy() {
24
        node.removeEventListener('mouseenter', showTooltip);
25
        node.removeEventListener('mouseleave', hideTooltip);
26
        hideTooltip();
27
      }
28
    };
29
  }
30
</script>
31

32
<button use:tooltip={'Click me for more info'}>Hover</button>

CSS Styling

Scoped Styles

Svelte automatically scopes CSS to components:

1
<style>
2
  p {
3
    color: blue; /* Only affects <p> in this component */
4
  }
5
</style>

How it works:

Svelte adds unique classes (e.g., .svelte-xyz123)
CSS selectors are rewritten to include these classes
No CSS-in-JS runtime needed
True component isolation

Global Styles

1
<style>
2
  :global(body) {
3
    margin: 0;
4
  }
5
</style>

Transitions and Animations

Transitions

Enter/leave animations:

1
<script>
2
  import { fade, slide } from 'svelte/transition';
3
  let visible = $state(true);
4
</script>
5

6
{#if visible}
7
  <div transition:fade>Fades in and out</div>
8
{/if}

Animations

Animate position changes:

1
<script>
2
  import { flip } from 'svelte/animate';
3
  let items = $state([1, 2, 3]);
4
</script>
5

6
{#each items as item (item)}
7
  <div animate:flip>Item {item}</div>
8
{/each}

Custom Transitions

1
function spin(node, { duration = 400 }) {
2
  return {
3
    duration,
4
    css: t => `transform: rotate(${t * 360}deg)`
5
  };
6
}

Advanced Utilities

tick() Function

tick() returns a promise that resolves after pending state changes are applied to the DOM:

1
import { tick } from 'svelte';
2

3
let count = $state(0);
4

5
async function increment() {
6
  count++;
7
  console.log(div.textContent); // Still shows old value
8

9
  await tick();
10
  console.log(div.textContent); // Now shows new value
11
}

Use cases:

Reading updated DOM measurements
Focus management after conditional rendering
Synchronizing with third-party libraries
Ensuring DOM reflects latest state

Svelte 5 Migration Notes

Key differences from Svelte 4:

State: let count = 0 → let count = $state(0)
Derived values: $: doubled = count * 2 → let doubled = $derived(count * 2)
Effects: $: { console.log(count) } → $effect(() => { console.log(count) })
Props: export let name → let { name } = $props()
Events: on:click → onclick
Custom events: createEventDispatcher() → callback props
Mutations: Reassignment required → direct mutation works
Lifecycle: onMount/onDestroy → $effect with cleanup

Key Runes Summary

$state() - Reactive state
$derived() - Computed values
$effect() - Side effects with optional cleanup
$props() - Component props
$state.raw() - Non-reactive state (for optimization)
$bindable() - Two-way bindable props

Performance Tips

Use {#key} blocks to force re-renders when needed
Implement proper loading states
Use bind:this sparingly
Prefer $derived over complex reactive calculations
Use $effect for side effects, not $derived
Use tick() when you need to wait for DOM updates
Leverage fine-grained reactivity with $state.raw for large, rarely-changing objects

Interview Questions and Answers

Q1: What is Svelte and how does it differ from React or Vue?

A1: Svelte is a compile-time framework that shifts work from the browser to the build step. Key differences:

No virtual DOM: Svelte compiles components to efficient imperative code that directly manipulates the DOM
No runtime: React/Vue ship a runtime library (~40-100KB), Svelte compiles to vanilla JavaScript
Smaller bundles: Svelte apps are typically smaller and faster
Simpler syntax: Less boilerplate, no hooks or lifecycle complexity
True reactivity: Updates are surgical, not diffing-based

Result: Better performance, smaller bundle sizes, and more intuitive code.

Q2: What are runes in Svelte 5 and why were they introduced?

A2: Runes are function-like symbols (starting with $) that provide explicit reactivity in Svelte 5. They were introduced to:

Improve clarity: Make reactivity explicit rather than magical
Better TypeScript support: Runes work better with type inference
Universal reactivity: Work in .svelte.js files, not just components
More control: Fine-grained control over reactive behavior
Performance: Enable better optimizations

Key runes: $state(), $derived(), $effect(), $props(). They replace let declarations, $: labels, and export let for props.

Q3: Explain the difference between $state and$ derived.

A3: $state(): Creates mutable reactive state that can be updated directly

Use for values that change over time
Can be mutated: count++ or array.push(item)
Triggers re-renders when changed

$derived(): Creates computed values based on other reactive state

Read-only, cannot be directly modified
Automatically updates when dependencies change
Use for calculations and transformations

1
let count = $state(0);           // Mutable state
2
let doubled = $derived(count * 2); // Computed from count

Q4: When should you use $effect vs$ derived?

A4: $derived(): For computing values

Returns a value used in your template or logic
Synchronous calculations
Example: let fullName = $derived(firstName + ' ' + lastName)

$effect(): For side effects

Doesn’t return a value (or returns cleanup function)
Async operations, subscriptions, logging, DOM manipulation
Example: Updating document title, fetching data, setting up timers

Rule: If you’re computing a value, use $derived. If you’re performing an action, use $effect.

Q5: How does reactivity work in Svelte 5 compared to Svelte 4?

A5: Svelte 4: Implicit reactivity through assignments

1
let count = 0;
2
$: doubled = count * 2;  // Reactive declaration

Svelte 5: Explicit reactivity through runes

1
let count = $state(0);
2
let doubled = $derived(count * 2);

Key improvements in Svelte 5:

Direct mutations work: array.push() triggers updates (no reassignment needed)
Better TypeScript: Proper type inference
Module-level state: Use runes in .svelte.js files
Clearer intent: Explicit about what’s reactive

Q6: What is the $props rune and how does it improve upon export let?

A6: $props() is the Svelte 5 way to declare component props, replacing export let:

Svelte 4:

1
export let name;
2
export let age = 25;

Svelte 5:

1
let { name, age = 25 } = $props();

Benefits:

Destructuring: Natural JavaScript syntax
Rest props: let { name, ...rest } = $props()
TypeScript: Better type checking
Clearer intent: Explicitly declares component API
Consistency: Matches standard JavaScript patterns

Q7: How do you handle events in Svelte 5?

A7: Svelte 5 uses standard HTML event attributes instead of on: directives:

Svelte 4:

1
<button on:click={handleClick}>Click</button>

Svelte 5:

1
<button onclick={handleClick}>Click</button>

For custom events, use callback props instead of createEventDispatcher():

1
// Child component
2
let { onMessage } = $props();
3
<button onclick={() => onMessage?.('hello')}>Send</button>
4

5
// Parent component
6
<Child onMessage={(text) => console.log(text)} />

This aligns with standard DOM events and is more intuitive.

Q8: What is the purpose of $effect cleanup functions?

A8: Cleanup functions prevent memory leaks and clean up side effects:

1
$effect(() => {
2
  const interval = setInterval(() => {
3
    console.log('tick');
4
  }, 1000);
5

6
  // Cleanup runs when:
7
  // - Component unmounts
8
  // - Effect re-runs (dependencies change)
9
  return () => {
10
    clearInterval(interval);
11
  };
12
});

Common cleanup use cases:

Clear intervals/timeouts
Remove event listeners
Cancel subscriptions
Abort fetch requests
Close WebSocket connections

Without cleanup, these would continue running after component unmounts, causing memory leaks.

Q9: How does Svelte handle CSS scoping?

A9: Svelte automatically scopes CSS to components:

1
<style>
2
  p {
3
    color: blue; /* Only affects <p> in this component */
4
  }
5
</style>

How it works:

Svelte adds unique classes (e.g., .svelte-xyz123)
CSS selectors are rewritten to include these classes
No CSS-in-JS runtime needed
True component isolation

Global styles:

1
<style>
2
  :global(body) {
3
    margin: 0;
4
  }
5
</style>

Benefits: No className props, automatic cleanup when component removed, better performance than CSS-in-JS.

Q10: What is the difference between bind:value and onchange?

A10:

bind:value: Two-way binding, automatically syncs state with input

1
<script>
2
  let name = $state('');
3
</script>
4
<input bind:value={name} />
5
<p>Hello {name}!</p>

onchange: One-way, manual event handling

1
<script>
2
  let name = $state('');
3
</script>
4
<input value={name} onchange={(e) => name = e.target.value} />

Use bind: for:

Simple form inputs
Two-way data flow
Less boilerplate

Use onchange for:

Complex validation
Debouncing
Custom transformation logic

bind: is syntactic sugar that’s more concise for common cases.

This refresher covers the essential concepts of Svelte 5. Svelte 5’s runes provide more explicit reactivity and better performance, making it an excellent choice for building modern web applications.

← We Need More Data Centers