svelte

Svelte 5 - Compiler-First Reactive Framework

Overview

Svelte is a compiler-based reactive UI framework that shifts work from runtime to build time. Unlike React/Vue, Svelte compiles components to highly optimized vanilla JavaScript with minimal overhead. Svelte 5 introduces Runes API for explicit, fine-grained reactivity.

Key Features:

• Runes API: $state, $derived, $effect for explicit reactivity
• Zero runtime overhead: Compiles to vanilla JS
• Built-in state management: No external libraries needed
• SvelteKit: Full-stack framework with SSR/SSG/SPA
• Write less code: Simple, readable component syntax
• Exceptional performance: Small bundles, fast runtime

Installation:

# Create new SvelteKit project
npm create svelte@latest my-app
cd my-app
npm install
npm run dev

# Or Svelte only (no SvelteKit)
npm create vite@latest my-app -- --template svelte-ts

Svelte 5 Runes API (Modern Approach)

State Management with $state

<script lang="ts">
  // Reactive state - automatically tracks changes
  let count = $state(0);
  let user = $state({ name: 'Alice', age: 30 });

  // Arrays and objects are deeply reactive
  let todos = $state<Todo[]>([]);

  function addTodo(text: string) {
    todos.push({ id: Date.now(), text, done: false });
    // No need for todos = [...todos] like React!
  }

  function increment() {
    count++; // Triggers reactivity
  }
</script>

<button onclick={increment}>
  Clicked {count} times
</button>

Computed Values with $derived

<script lang="ts">
  let firstName = $state('John');
  let lastName = $state('Doe');

  // Automatically updates when dependencies change
  let fullName = $derived(`${firstName} ${lastName}`);
  let greeting = $derived(`Hello, ${fullName}`);

  // Complex derivations
  let items = $state([1, 2, 3, 4, 5]);
  let total = $derived(items.reduce((sum, n) => sum + n, 0));
  let average = $derived(total / items.length);
</script>

<p>{greeting}</p>
<p>Average: {average.toFixed(2)}</p>