Svelte 5 Vs Svelte 4

Install

Downloads the file at commit b044f956f021 into .cursor/rules/.

To remove it later:

Context cost: ≈632 tokens when used.

Rules file

---
description: "Cursor rules for comparing Svelte 5 and Svelte 4 development."
globs: **/*
alwaysApply: false
---
I'm using svelte 5 instead of svelte 4 here is an overview of the changes.
# .cursorrules for Svelte 5

## Overview of Changes

Svelte 5 introduces runes, a set of advanced primitives for controlling reactivity. The runes replace certain non-runes features and provide more explicit control over state and effects.

Snippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.

## Event Handlers in Svelte 5

In Svelte 5, event handlers are treated as standard HTML properties rather than Svelte-specific directives, simplifying their use and integrating them more closely with the rest of the properties in the component.

### Svelte 4 vs. Svelte 5:

**Before (Svelte 4):**
```html
<script>
  let count = 0;
  $: double = count * 2;
  $: {
    if (count > 10) alert('Too high!');
  }
</script>
<button on:click={() => count++}> {count} / {double}</button>
```

**After (Svelte 5):**
```html
<script>
  // Define state with runes
  let count = $state(0);
  
  // Option 1: Using $derived for computed values
  let double = $derived(count * 2);
  
  // Reactive effects using runes
  $effect(() => {
    if (count > 10) alert('Too high!');
  });
</script>

<!-- Standard HTML event attributes instead of Svelte directives -->
<button onclick={() => count++}>
  {count} / {double}
</button>

<!-- Alternatively, you can compute values inline -->
<!-- <button onclick={() => count++}>
  {count} / {count * 2}
</button> -->
```

## Key Differences:

1. **Reactivity is Explicit**: 
   - Svelte 5 uses `$state()` to explicitly mark reactive variables
   - `$derived()` replaces `$:` for computed values 
   - `$effect()` replaces `$: {}` blocks for side effects

2. **Event Handling is Standardized**:
   - Svelte 4: `on:click={handler}`
   - Svelte 5: `onclick={handler}`

3. **Runes are Compiler Syntax**:
   - Do not import `$state`, `$derived`, `$effect`, `$props`, `$bindable`, or `$inspect`.
   - Import only regular Svelte utilities that require imports, such as `tick`, `untrack`, `mount`, or `unmount`.

4. **No More Event Modifiers**:
   - Svelte 4: `on:click|preventDefault={handler}`
   - Svelte 5: `onclick={e => { e.preventDefault(); handler(e); }}`

This creates clearer, more maintainable components compared to Svelte 4's previous syntax by making reactivity explicit and using standardized web platform features.

Copy file

Security

Scanned Nov 4, 2026 at commit b044f956f021, with Cisco's open-source skill-scanner.

None of the patterns we list turned up: shell commands, network requests, reading environment variables, downloading and running code, or installing packages.

A scan lists patterns in the code. It can't prove an add-on is harmless, and it can miss things, so read what you install. How we scan