SvelteSnacks - Interactive Code Examples for Svelte 5

State Management Intermediate

Shopping Cart with Svelte 5 Runes

Learn how to create a reactive shopping cart using Svelte 5's new runes for state management. This example demonstrates $state and $derived for managing cart items and total calculation.

example.svelte

<script>
  // Define our cart items using $state
  let items = $state([
    { id: 1, name: 'Svelte Hoodie', price: 45, quantity: 0 },
    { id: 2, name: 'Svelte T-Shirt', price: 25, quantity: 0 },
    { id: 3, name: 'Svelte Cap', price: 15, quantity: 0 }
  ]);

  // Calculate total using $derived
  let total = $derived(
    items.reduce((sum, item) => 
      sum + (item.price * item.quantity), 0)
  );

  // Calculate number of items using $derived
  let itemCount = $derived(
    items.reduce((count, item) => 
      count + item.quantity, 0)
  );

  function updateQuantity(id, delta) {
    items = items.map(item => 
      item.id === id 
        ? { ...item, quantity: Math.max(0, item.quantity + delta) }
        : item
    );
  }
</script>

<div style="padding: 1rem;">
  {#each items as item}
    <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
      <span>{item.name} - ${item.price}</span>
      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <button style="padding: 0.25rem 0.5rem;" onclick={() => updateQuantity(item.id, -1)}>-</button>
        <span>{item.quantity}</span>
        <button style="padding: 0.25rem 0.5rem;" onclick={() => updateQuantity(item.id, 1)}>+</button>
      </div>
    </div>
  {/each}
  
  <div style="margin-top: 1rem; border-top: 1px solid #eee; padding-top: 1rem;">
    <p>Items in cart: {itemCount}</p>
    <p>Total: ${total}</p>
  </div>
</div>

Explanation

This example showcases three key features of Svelte 5's runes: 1. $state for managing mutable state (cart items) 2. $derived for computed values (total and item count) 3. Immutable state updates with array methods The cart automatically updates totals when quantities change, demonstrating the power of Svelte's reactive state management.

By SvelteSnacks Team

State Management Beginner

Counter with Multiple Update Patterns

A simple counter that demonstrates different ways to manage state in Svelte 5, from basic increments to computed values and state dependencies.

example.svelte

<script>
  // Basic counter with $state
  let count = $state(0);
  
  // Derived value that doubles the count
  let doubled = $derived(count * 2);
  
  // Derived value with conditional formatting
  let status = $derived(
    count === 0 ? "Let's count!" :
    count > 10 ? "Getting high!" :
    "Counting up..."
  );
  
  // Different ways to update state
  function increment() {
    count++;  // Direct mutation
  }
  
  function add(n) {
    count += n;  // Parameterized update
  }
  
  function reset() {
    count = 0;  // Reset state
  }
</script>

<div style="padding: 2rem; border: 2px solid #eee; border-radius: 8px; text-align: center;">
  <div style="margin-bottom: 1.5rem;">
    <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem;">Count: {count}</h2>
    <p style="margin-bottom: 0.25rem;">Doubled: {doubled}</p>
    <p style="color: #666; font-style: italic;">{status}</p>
  </div>
  
  <div style="display: flex; gap: 1rem; justify-content: center;">
    <button 
      onclick={increment}
      style="padding: 0.5rem 1rem; background: #f97316; color: white; border-radius: 4px;"
    >
      Increment
    </button>
    
    <button 
      onclick={() => add(5)}
      style="padding: 0.5rem 1rem; background: #f97316; color: white; border-radius: 4px;"
    >
      Add 5
    </button>
    
    <button 
      onclick={reset}
      style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px;"
    >
      Reset
    </button>
  </div>
</div>

Explanation

This example demonstrates several key concepts in Svelte state management: 1. Basic state management with $state 2. Computed values with $derived 3. Different patterns for updating state (direct mutation, parameterized updates, resets) 4. Reactive status messages based on state 5. Clean, declarative code structure It shows how Svelte makes state management intuitive and straightforward, with minimal boilerplate.

By SvelteSnacks Team

State Management Advanced

Task Manager with Undo/Redo

An advanced task management system showcasing complex state management with history tracking, filtering, and nested reactivity.

example.svelte

<script>
  // Complex nested state with task management and undo/redo
  let tasks = $state({
    items: [],
    history: [],
    future: [],
    filter: 'all',
    editingId: null
  });

  // Derived states for task filtering and stats
  let filteredTasks = $derived(
    tasks.items.filter(task => 
      tasks.filter === 'all' ? true :
      tasks.filter === 'active' ? !task.completed :
      task.completed
    )
  );

  let stats = $derived({
    total: tasks.items.length,
    active: tasks.items.filter(t => !t.completed).length,
    completed: tasks.items.filter(t => t.completed).length
  });

  // Save state for undo
  function saveState() {
    tasks.history = [...tasks.history, { items: [...tasks.items] }];
    tasks.future = [];
  }

  // Task operations with history management
  function addTask(text) {
    saveState();
    tasks.items = [...tasks.items, {
      id: Date.now(),
      text,
      completed: false
    }];
  }

  function toggleTask(id) {
    saveState();
    tasks.items = tasks.items.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    );
  }

  function updateTask(id, text) {
    saveState();
    tasks.items = tasks.items.map(task =>
      task.id === id ? { ...task, text } : task
    );
    tasks.editingId = null;
  }

  function undo() {
    if (tasks.history.length) {
      tasks.future = [{ items: [...tasks.items] }, ...tasks.future];
      tasks.items = [...tasks.history[tasks.history.length - 1].items];
      tasks.history = tasks.history.slice(0, -1);
    }
  }

  function redo() {
    if (tasks.future.length) {
      tasks.history = [...tasks.history, { items: [...tasks.items] }];
      tasks.items = [...tasks.future[0].items];
      tasks.future = tasks.future.slice(1);
    }
  }
</script>

<div style="padding: 1rem; max-width: 500px; margin: 0 auto;">
  <div style="margin-bottom: 1rem;">
    <input 
      type="text"
      placeholder="Add new task..."
      style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;"
      onkeydown={e => e.key === 'Enter' && addTask(e.target.value)}
    >
  </div>

  <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
    <button 
      onclick={() => tasks.filter = 'all'}
      style="padding: 0.25rem 0.5rem; background: ${tasks.filter === 'all' ? '#f97316' : '#e5e7eb'}; color: ${tasks.filter === 'all' ? 'white' : 'black'}; border-radius: 4px;"
    >
      All ({stats.total})
    </button>
    <button 
      onclick={() => tasks.filter = 'active'}
      style="padding: 0.25rem 0.5rem; background: ${tasks.filter === 'active' ? '#f97316' : '#e5e7eb'}; color: ${tasks.filter === 'active' ? 'white' : 'black'}; border-radius: 4px;"
    >
      Active ({stats.active})
    </button>
    <button 
      onclick={() => tasks.filter = 'completed'}
      style="padding: 0.25rem 0.5rem; background: ${tasks.filter === 'completed' ? '#f97316' : '#e5e7eb'}; color: ${tasks.filter === 'completed' ? 'white' : 'black'}; border-radius: 4px;"
    >
      Completed ({stats.completed})
    </button>
  </div>

  <div style="margin-bottom: 1rem;">
    {#each filteredTasks as task}
      <div style="display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem; border-bottom: 1px solid #eee;">
        <input 
          type="checkbox" 
          checked={task.completed}
          onclick={() => toggleTask(task.id)}
        >
        {#if tasks.editingId === task.id}
          <input 
            type="text"
            value={task.text}
            style="flex-grow: 1; padding: 0.25rem;"
            onkeydown={e => e.key === 'Enter' && updateTask(task.id, e.target.value)}
          >
        {:else}
          <span 
            style="flex-grow: 1; text-decoration: ${task.completed ? 'line-through' : 'none'};"
            onclick={() => tasks.editingId = task.id}
          >
            {task.text}
          </span>
        {/if}
      </div>
    {/each}
  </div>

  <div style="display: flex; gap: 0.5rem; justify-content: center;">
    <button 
      onclick={undo}
      disabled={!tasks.history.length}
      style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px; opacity: ${tasks.history.length ? '1' : '0.5'};"
    >
      Undo
    </button>
    <button 
      onclick={redo}
      disabled={!tasks.future.length}
      style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px; opacity: ${tasks.future.length ? '1' : '0.5'};"
    >
      Redo
    </button>
  </div>
</div>

Explanation

This advanced example demonstrates sophisticated state management techniques: 1. Nested reactive state with complex object structure 2. Multiple derived states for filtering and statistics 3. History management with undo/redo functionality 4. Complex state mutations with history preservation 5. Interactive features (inline editing, filtering, completion) 6. Real-time statistics derived from state It shows how Svelte can handle complex application state while maintaining clean, maintainable code.

By SvelteSnacks Team

Javascript Beginner

Basic Array Operations

Learn fundamental array operations in JavaScript with reactive updates. Perfect for beginners learning array manipulation.

example.svelte

<script>
  // Basic array operations with $state
  let numbers = $state([1, 2, 3, 4, 5]);
  
  // Derived values using array methods
  let sum = $derived(numbers.reduce((a, b) => a + b, 0));
  let doubled = $derived(numbers.map(n => n * 2));
  
  function addNumber() {
    numbers = [...numbers, numbers.length + 1];
  }
  
  function removeNumber() {
    numbers = numbers.slice(0, -1);
  }
  
  function resetArray() {
    numbers = [1, 2, 3, 4, 5];
  }
</script>

<div style="padding: 1rem; text-align: center;">
  <div style="margin-bottom: 1rem;">
    <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Original Array:</h3>
    <p style="font-family: monospace;">[{numbers.join(', ')}]</p>
    
    <h3 style="font-size: 1.2rem; margin: 0.5rem 0;">Doubled Values:</h3>
    <p style="font-family: monospace;">[{doubled.join(', ')}]</p>
    
    <p style="margin-top: 0.5rem;">Sum: {sum}</p>
  </div>
  
  <div style="display: flex; gap: 0.5rem; justify-content: center;">
    <button 
      onclick={addNumber}
      style="padding: 0.5rem 1rem; background: #f97316; color: white; border-radius: 4px;"
    >
      Add Number
    </button>
    <button 
      onclick={removeNumber}
      style="padding: 0.5rem 1rem; background: #f97316; color: white; border-radius: 4px;"
    >
      Remove Last
    </button>
    <button 
      onclick={resetArray}
      style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px;"
    >
      Reset
    </button>
  </div>
</div>

Explanation

This example covers essential array concepts: 1. Basic array initialization with $state 2. Array methods: map, reduce, join 3. Immutable array updates using spread operator 4. Simple array transformations and calculations 5. Real-time array manipulation and display It's a great starting point for understanding array operations in JavaScript.

By SvelteSnacks Team

Javascript Intermediate

Student Score Tracker

Intermediate array transformations with nested data structures and complex calculations.

example.svelte

<script>
  // Array of objects with multiple transformations
  let students = $state([
    { id: 1, name: 'Alice', scores: [85, 90, 92] },
    { id: 2, name: 'Bob', scores: [78, 85, 80] },
    { id: 3, name: 'Carol', scores: [92, 88, 95] }
  ]);
  
  // Complex derived calculations
  let studentStats = $derived(students.map(student => ({
    ...student,
    average: student.scores.reduce((a, b) => a + b, 0) / student.scores.length,
    highest: Math.max(...student.scores),
    passed: student.scores.every(score => score >= 80)
  })));
  
  let classAverage = $derived(
    studentStats.reduce((sum, student) => sum + student.average, 0) / students.length
  );
  
  function addScore(id) {
    students = students.map(student =>
      student.id === id
        ? { ...student, scores: [...student.scores, Math.floor(Math.random() * 20) + 80] }
        : student
    );
  }
  
  function removeScore(id) {
    students = students.map(student =>
      student.id === id && student.scores.length > 1
        ? { ...student, scores: student.scores.slice(0, -1) }
        : student
    );
  }
</script>

<div style="padding: 1rem;">
  <div style="margin-bottom: 1rem; text-align: center;">
    <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Class Average: {classAverage.toFixed(1)}</h3>
  </div>
  
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    {#each studentStats as student}
      <div style="border: 1px solid #eee; padding: 1rem; border-radius: 4px;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div>
            <h4 style="margin: 0; font-weight: bold;">{student.name}</h4>
            <p style="margin: 0.25rem 0; font-family: monospace;">
              Scores: [{student.scores.join(', ')}]
            </p>
            <p style="margin: 0.25rem 0;">
              Average: {student.average.toFixed(1)} | 
              Highest: {student.highest} | 
              Status: <span style="color: ${student.passed ? '#22c55e' : '#ef4444'}">
                {student.passed ? 'Passing' : 'Needs Improvement'}
              </span>
            </p>
          </div>
          <div style="display: flex; gap: 0.5rem;">
            <button 
              onclick={() => addScore(student.id)}
              style="padding: 0.25rem 0.5rem; background: #f97316; color: white; border-radius: 4px;"
            >
              Add Score
            </button>
            <button 
              onclick={() => removeScore(student.id)}
              style="padding: 0.25rem 0.5rem; background: #6b7280; color: white; border-radius: 4px;"
            >
              Remove Score
            </button>
          </div>
        </div>
      </div>
    {/each}
  </div>
</div>

Explanation

This example demonstrates intermediate array concepts: 1. Working with arrays of objects 2. Nested arrays and data structures 3. Complex calculations using reduce and map 4. Conditional array transformations 5. Dynamic updates to nested arrays 6. Statistical calculations on array data It shows how to handle more complex data structures while maintaining clean, reactive code.

By SvelteSnacks Team

Javascript Advanced

Advanced Array Algorithms

Master advanced array operations with sorting, filtering, grouping, and complex state management.

example.svelte

<script>
  // Advanced array operations with sorting, filtering, and grouping
  let data = $state({
    items: [
      { id: 1, name: 'Task A', category: 'Work', priority: 2, completed: false },
      { id: 2, name: 'Task B', category: 'Personal', priority: 1, completed: true },
      { id: 3, name: 'Task C', category: 'Work', priority: 3, completed: false },
      { id: 4, name: 'Task D', category: 'Personal', priority: 2, completed: false },
      { id: 5, name: 'Task E', category: 'Work', priority: 1, completed: true }
    ],
    sortBy: 'priority',
    sortDir: 'desc',
    groupBy: 'none'
  });
  
  // Complex derived states with multiple transformations
  let processedItems = $derived(() => {
    let result = [...data.items];
    
    // Sorting
    result.sort((a, b) => {
      let factor = data.sortDir === 'asc' ? 1 : -1;
      return (a[data.sortBy] > b[data.sortBy] ? 1 : -1) * factor;
    });
    
    // Grouping
    if (data.groupBy !== 'none') {
      let groups = result.reduce((acc, item) => {
        let key = item[data.groupBy];
        if (!acc[key]) acc[key] = [];
        acc[key].push(item);
        return acc;
      }, {});
      
      return Object.entries(groups).map(([key, items]) => ({
        key,
        items,
        stats: {
          total: items.length,
          completed: items.filter(i => i.completed).length,
          avgPriority: items.reduce((sum, i) => sum + i.priority, 0) / items.length
        }
      }));
    }
    
    return result;
  });
  
  let stats = $derived({
    totalItems: data.items.length,
    completedItems: data.items.filter(i => i.completed).length,
    avgPriority: data.items.reduce((sum, i) => sum + i.priority, 0) / data.items.length,
    categoryCounts: data.items.reduce((acc, item) => {
      acc[item.category] = (acc[item.category] || 0) + 1;
      return acc;
    }, {})
  });
  
  function toggleSort(field) {
    if (data.sortBy === field) {
      data.sortDir = data.sortDir === 'asc' ? 'desc' : 'asc';
    } else {
      data.sortBy = field;
      data.sortDir = 'desc';
    }
  }
  
  function toggleGroup(field) {
    data.groupBy = data.groupBy === field ? 'none' : field;
  }
  
  function toggleComplete(id) {
    data.items = data.items.map(item =>
      item.id === id ? { ...item, completed: !item.completed } : item
    );
  }
</script>

<div style="padding: 1rem;">
  <div style="margin-bottom: 1rem;">
    <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
      <div style="flex: 1;">
        <h3 style="margin-bottom: 0.5rem;">Sort By:</h3>
        <div style="display: flex; gap: 0.5rem;">
          {#each ['priority', 'name', 'category'] as field}
            <button 
              onclick={() => toggleSort(field)}
              style="padding: 0.25rem 0.5rem; background: ${data.sortBy === field ? '#f97316' : '#e5e7eb'}; color: ${data.sortBy === field ? 'white' : 'black'}; border-radius: 4px;"
            >
              {field} {data.sortBy === field ? (data.sortDir === 'asc' ? '↑' : '↓') : ''}
            </button>
          {/each}
        </div>
      </div>
      
      <div style="flex: 1;">
        <h3 style="margin-bottom: 0.5rem;">Group By:</h3>
        <div style="display: flex; gap: 0.5rem;">
          {#each ['category', 'priority'] as field}
            <button 
              onclick={() => toggleGroup(field)}
              style="padding: 0.25rem 0.5rem; background: ${data.groupBy === field ? '#f97316' : '#e5e7eb'}; color: ${data.groupBy === field ? 'white' : 'black'}; border-radius: 4px;"
            >
              {field}
            </button>
          {/each}
        </div>
      </div>
    </div>
    
    <div style="background: #f3f4f6; padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem;">
      <p>Total Items: {stats.totalItems} | Completed: {stats.completedItems} | Avg Priority: {stats.avgPriority.toFixed(1)}</p>
      <p>Categories: {Object.entries(stats.categoryCounts).map(([k, v]) => `${k}: ${v}`).join(' | ')}</p>
    </div>
  </div>

  <div style="display: flex; flex-direction: column; gap: 1rem;">
    {#if data.groupBy !== 'none'}
      {#each processedItems as group}
        <div style="border: 1px solid #eee; padding: 1rem; border-radius: 4px;">
          <h3 style="margin-bottom: 0.5rem;">{group.key}</h3>
          <p style="font-size: 0.9rem; color: #666; margin-bottom: 0.5rem;">
            Items: {group.stats.total} | 
            Completed: {group.stats.completed} | 
            Avg Priority: {group.stats.avgPriority.toFixed(1)}
          </p>
          {#each group.items as item}
            <div style="display: flex; gap: 0.5rem; align-items: center; padding: 0.25rem;">
              <input 
                type="checkbox" 
                checked={item.completed}
                onclick={() => toggleComplete(item.id)}
              >
              <span style="text-decoration: ${item.completed ? 'line-through' : 'none'}">
                {item.name} (Priority: {item.priority})
              </span>
            </div>
          {/each}
        </div>
      {/each}
    {:else}
      {#each processedItems as item}
        <div style="display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem; border-bottom: 1px solid #eee;">
          <input 
            type="checkbox" 
            checked={item.completed}
            onclick={() => toggleComplete(item.id)}
          >
          <span style="flex-grow: 1; text-decoration: ${item.completed ? 'line-through' : 'none'}">
            {item.name}
          </span>
          <span style="color: #666;">
            {item.category} | Priority: {item.priority}
          </span>
        </div>
      {/each}
    {/if}
  </div>
</div>

Explanation

This advanced example showcases sophisticated array manipulation: 1. Complex sorting with multiple criteria 2. Dynamic grouping and filtering 3. Advanced reduce operations for statistics 4. Nested state management 5. Real-time data transformations 6. Complex derived calculations 7. Multi-level data aggregation It demonstrates how to handle complex data operations while maintaining performance and code clarity.

By SvelteSnacks Team

Javascript Advanced

Financial Analysis with Reduce

Advanced data analysis using reduce to transform and aggregate financial transactions with multiple dimensions.

example.svelte

<script>
  // Advanced array operations focusing on reduce patterns
  let transactions = $state([
    { id: 1, type: 'expense', category: 'Food', amount: 45.50, date: '2024-03-01' },
    { id: 2, type: 'income', category: 'Salary', amount: 3000, date: '2024-03-01' },
    { id: 3, type: 'expense', category: 'Transport', amount: 25.00, date: '2024-03-02' },
    { id: 4, type: 'expense', category: 'Food', amount: 30.25, date: '2024-03-02' },
    { id: 5, type: 'income', category: 'Freelance', amount: 500, date: '2024-03-03' }
  ]);

  // Complex derived states using reduce
  let analysis = $derived(transactions.reduce((acc, tx) => {
    // Update daily totals
    if (!acc.dailyTotals[tx.date]) {
      acc.dailyTotals[tx.date] = { income: 0, expense: 0, net: 0 };
    }
    acc.dailyTotals[tx.date][tx.type] += tx.amount;
    acc.dailyTotals[tx.date].net = 
      acc.dailyTotals[tx.date].income - acc.dailyTotals[tx.date].expense;

    // Update category totals
    if (!acc.categoryTotals[tx.category]) {
      acc.categoryTotals[tx.category] = { total: 0, count: 0, avg: 0 };
    }
    acc.categoryTotals[tx.category].total += tx.amount;
    acc.categoryTotals[tx.category].count++;
    acc.categoryTotals[tx.category].avg = 
      acc.categoryTotals[tx.category].total / acc.categoryTotals[tx.category].count;

    // Update running totals
    acc.runningTotals[tx.type] += tx.amount;
    acc.netTotal = acc.runningTotals.income - acc.runningTotals.expense;

    // Track highest transaction per category
    if (!acc.highestPerCategory[tx.category] || 
        tx.amount > acc.highestPerCategory[tx.category].amount) {
      acc.highestPerCategory[tx.category] = tx;
    }

    return acc;
  }, {
    dailyTotals: {},
    categoryTotals: {},
    runningTotals: { income: 0, expense: 0 },
    netTotal: 0,
    highestPerCategory: {}
  }));

  function addTransaction(type) {
    const categories = type === 'income' 
      ? ['Salary', 'Freelance', 'Investment'] 
      : ['Food', 'Transport', 'Entertainment'];
    
    transactions = [...transactions, {
      id: transactions.length + 1,
      type,
      category: categories[Math.floor(Math.random() * categories.length)],
      amount: Math.floor(Math.random() * (type === 'income' ? 1000 : 100)),
      date: new Date().toISOString().split('T')[0]
    }];
  }

  function removeLastTransaction() {
    transactions = transactions.slice(0, -1);
  }
</script>

<div style="padding: 1rem;">
  <div style="margin-bottom: 1rem;">
    <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Financial Analysis</h3>
    <div style="background: #f3f4f6; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
      <p>Net Total: ${analysis.netTotal.toFixed(2)}</p>
      <p>Total Income: ${analysis.runningTotals.income.toFixed(2)}</p>
      <p>Total Expenses: ${analysis.runningTotals.expense.toFixed(2)}</p>
    </div>
    
    <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
      <button 
        onclick={() => addTransaction('income')}
        style="padding: 0.5rem 1rem; background: #22c55e; color: white; border-radius: 4px;"
      >
        Add Income
      </button>
      <button 
        onclick={() => addTransaction('expense')}
        style="padding: 0.5rem 1rem; background: #ef4444; color: white; border-radius: 4px;"
      >
        Add Expense
      </button>
      <button 
        onclick={removeLastTransaction}
        style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px;"
      >
        Remove Last
      </button>
    </div>
  </div>

  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
    <div>
      <h4 style="margin-bottom: 0.5rem;">Daily Totals</h4>
      {#each Object.entries(analysis.dailyTotals) as [date, totals]}
        <div style="border: 1px solid #eee; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 4px;">
          <p style="font-weight: bold;">{date}</p>
          <p style="color: #22c55e;">Income: ${totals.income.toFixed(2)}</p>
          <p style="color: #ef4444;">Expenses: ${totals.expense.toFixed(2)}</p>
          <p>Net: ${totals.net.toFixed(2)}</p>
        </div>
      {/each}
    </div>

    <div>
      <h4 style="margin-bottom: 0.5rem;">Category Analysis</h4>
      {#each Object.entries(analysis.categoryTotals) as [category, stats]}
        <div style="border: 1px solid #eee; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 4px;">
          <p style="font-weight: bold;">{category}</p>
          <p>Total: ${stats.total.toFixed(2)}</p>
          <p>Average: ${stats.avg.toFixed(2)}</p>
          <p>Transactions: {stats.count}</p>
          <p>Highest: ${analysis.highestPerCategory[category].amount.toFixed(2)}</p>
        </div>
      {/each}
    </div>
  </div>
</div>

Explanation

This advanced example demonstrates the power of reduce for complex data analysis: 1. Multi-dimensional data aggregation 2. Nested object construction with reduce 3. Running totals and statistics 4. Category-based aggregations 5. Time-based grouping 6. Complex financial calculations 7. Dynamic data updates with state preservation It shows how reduce can be used to build sophisticated data transformations and analysis tools.

By SvelteSnacks Team

Components Beginner

Basic Button Component

Learn how to create a reusable button component with props, events, and dynamic styling.

example.svelte

<script>
  // Props with default values
  let label = $prop('Click me');
  let disabled = $prop(false);
  let variant = $prop('primary');
  
  // Event dispatcher for click events
  const dispatch = createEventDispatcher();
  
  // Computed styles based on variant
  let buttonStyle = $derived(`
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: ${disabled ? 'not-allowed' : 'pointer'};
    opacity: ${disabled ? '0.5' : '1'};
    background: ${
      variant === 'primary' ? '#f97316' :
      variant === 'secondary' ? '#6b7280' :
      variant === 'danger' ? '#ef4444' : '#e5e7eb'
    };
    color: white;
  `);
  
  function handleClick() {
    if (!disabled) {
      dispatch('click');
    }
  }
</script>

<button {disabled} style={buttonStyle} onclick={handleClick}>
  {label}
</button>

Explanation

This beginner-friendly example demonstrates essential component concepts: 1. Component props with default values 2. Event handling and dispatching 3. Dynamic styling based on props 4. Conditional rendering 5. Basic component state management It shows how to create a flexible, reusable button component that can be styled and configured through props.

By SvelteSnacks Team

Components Beginner

Collapsible Toggle Card

Create an expandable card component with smooth transitions and state management.

example.svelte

<script>
  // Props for card content
  let title = $prop('Card Title');
  let content = $prop('Card content goes here...');
  let expanded = $prop(false);
  
  // Toggle expanded state
  function toggle() {
    expanded = !expanded;
  }
</script>

<div style="border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
  <div 
    style="padding: 1rem; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; cursor: pointer;"
    onclick={toggle}
  >
    <h3 style="margin: 0; font-weight: bold;">{title}</h3>
    <span style="transform: rotate(${expanded ? '180deg' : '0deg'}); transition: transform 0.2s;">
      ▼
    </span>
  </div>
  
  {#if expanded}
    <div style="padding: 1rem;">
      {content}
    </div>
  {/if}
</div>

Explanation

This example covers fundamental component patterns: 1. Component state management 2. Conditional rendering with #if blocks 3. Event handling for user interactions 4. CSS transitions for smooth animations 5. Prop-based content configuration It demonstrates how to build an interactive component with clean, maintainable code.

By SvelteSnacks Team

Components Intermediate

Form Input with Validation

Build a form input component with built-in validation, error handling, and event dispatching.

example.svelte

<script>
  // Props for input configuration
  let label = $prop('');
  let type = $prop('text');
  let value = $prop('');
  let placeholder = $prop('');
  let required = $prop(false);
  let pattern = $prop('');
  let errorMessage = $prop('This field is required');
  
  // State for input validation
  let touched = $state(false);
  let dirty = $state(false);
  
  // Computed validation state
  let isValid = $derived(() => {
    if (!touched || !dirty) return true;
    if (required && !value) return false;
    if (pattern && !new RegExp(pattern).test(value)) return false;
    return true;
  });
  
  // Event dispatcher for input events
  const dispatch = createEventDispatcher();
  
  function handleInput(e) {
    value = e.target.value;
    dirty = true;
    dispatch('input', { value, valid: isValid });
  }
  
  function handleBlur() {
    touched = true;
    dispatch('blur', { value, valid: isValid });
  }
</script>

<div style="margin-bottom: 1rem;">
  {#if label}
    <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">
      {label}
      {#if required}
        <span style="color: #ef4444;">*</span>
      {/if}
    </label>
  {/if}
  
  <input
    {type}
    {value}
    {placeholder}
    {required}
    style="
      width: 100%;
      padding: 0.5rem;
      border: 1px solid ${!isValid ? '#ef4444' : '#e5e7eb'};
      border-radius: 4px;
      outline: none;
    "
    oninput={handleInput}
    onblur={handleBlur}
  />
  
  {#if !isValid}
    <p style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">
      {errorMessage}
    </p>
  {/if}
</div>

Explanation

This intermediate example showcases form handling patterns: 1. Complex prop management 2. Form validation logic 3. Error state handling 4. Event dispatching for form events 5. Computed properties for validation 6. Accessibility considerations It demonstrates how to create a robust, reusable form input component.

By SvelteSnacks Team

Components Intermediate

Flexible Tab System

Create a versatile tab component that supports both horizontal and vertical orientations.

example.svelte

<script>
  // Props for tabs configuration
  let tabs = $prop([]);
  let activeTab = $prop(0);
  let orientation = $prop('horizontal');
  
  // Event dispatcher for tab changes
  const dispatch = createEventDispatcher();
  
  // Computed styles based on orientation
  let containerStyle = $derived(`
    display: flex;
    gap: 1rem;
    ${orientation === 'vertical' ? 'flex-direction: column;' : ''}
  `);
  
  let tabListStyle = $derived(`
    display: flex;
    gap: 0.5rem;
    ${orientation === 'vertical' ? 'flex-direction: column;' : ''}
    ${orientation === 'vertical' ? 'flex: 0 0 200px;' : ''}
  `);
  
  function selectTab(index) {
    activeTab = index;
    dispatch('change', { index, tab: tabs[index] });
  }
</script>

<div style={containerStyle}>
  <div style={tabListStyle}>
    {#each tabs as tab, i}
      <button
        style="
          padding: 0.5rem 1rem;
          border: none;
          background: ${activeTab === i ? '#f97316' : '#e5e7eb'};
          color: ${activeTab === i ? 'white' : 'black'};
          border-radius: ${orientation === 'vertical' ? '4px' : '4px 4px 0 0'};
          cursor: pointer;
        "
        onclick={() => selectTab(i)}
      >
        {tab.label}
      </button>
    {/each}
  </div>
  
  <div style="flex: 1;">
    {#if tabs[activeTab]}
      <div style="padding: 1rem; border: 1px solid #e5e7eb; border-radius: 4px;">
        {tabs[activeTab].content}
      </div>
    {/if}
  </div>
</div>

Explanation

This example demonstrates intermediate component patterns: 1. Dynamic tab rendering 2. Orientation-based styling 3. Active state management 4. Event handling and propagation 5. Flexible layout system 6. Slot-based content rendering It shows how to build a flexible, reusable tab system that adapts to different use cases.

By SvelteSnacks Team

Components Advanced

Dynamic Form Generator

Advanced form generation system with dynamic fields, validation, and state management.

example.svelte

<script>
  // Props for form configuration
  let fields = $prop([]);
  let values = $state({});
  let errors = $state({});
  
  // Validation rules
  const rules = {
    required: (value) => value !== undefined && value !== '',
    email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    minLength: (value, min) => value.length >= min,
    maxLength: (value, max) => value.length <= max,
    pattern: (value, pattern) => new RegExp(pattern).test(value)
  };
  
  // Event dispatcher for form events
  const dispatch = createEventDispatcher();
  
  // Validate a single field
  function validateField(field, value) {
    const fieldErrors = [];
    
    if (field.validations) {
      for (const [rule, config] of Object.entries(field.validations)) {
        const isValid = rules[rule](value, config.value);
        if (!isValid) {
          fieldErrors.push(config.message);
        }
      }
    }
    
    errors[field.name] = fieldErrors;
    return fieldErrors.length === 0;
  }
  
  // Handle field changes
  function handleChange(field, event) {
    const value = event.target.value;
    values[field.name] = value;
    validateField(field, value);
    
    dispatch('change', { values, errors });
  }
  
  // Handle form submission
  function handleSubmit() {
    let isValid = true;
    
    fields.forEach(field => {
      if (!validateField(field, values[field.name])) {
        isValid = false;
      }
    });
    
    if (isValid) {
      dispatch('submit', { values });
    } else {
      dispatch('error', { errors });
    }
  }
</script>

<form style="display: flex; flex-direction: column; gap: 1rem;" onsubmit={e => e.preventDefault()}>
  {#each fields as field}
    <div>
      <label style="display: block; margin-bottom: 0.5rem;">
        {field.label}
        {#if field.validations?.required}
          <span style="color: #ef4444;">*</span>
        {/if}
      </label>
      
      {#if field.type === 'select'}
        <select
          style="width: 100%; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px;"
          value={values[field.name]}
          onchange={e => handleChange(field, e)}
        >
          {#each field.options || [] as option}
            <option value={option.value}>{option.label}</option>
          {/each}
        </select>
      {:else}
        <input
          type={field.type || 'text'}
          style="width: 100%; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px;"
          value={values[field.name] || ''}
          oninput={e => handleChange(field, e)}
        />
      {/if}
      
      {#if errors[field.name]?.length}
        <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">
          {errors[field.name][0]}
        </div>
      {/if}
    </div>
  {/each}
  
  <button
    type="submit"
    onclick={handleSubmit}
    style="padding: 0.5rem 1rem; background: #f97316; color: white; border-radius: 4px; border: none;"
  >
    Submit
  </button>
</form>

Explanation

This advanced example showcases complex form handling: 1. Dynamic field generation 2. Complex validation rules 3. Form state management 4. Error handling and display 5. Custom validation rules 6. Event dispatching system 7. Dynamic UI updates It demonstrates how to build a powerful, flexible form generation system.

By SvelteSnacks Team

Components Advanced

Virtual Scroll Component

Build a high-performance virtual scroll component for handling large lists efficiently.

example.svelte

<script>
  // Props for virtual scroller configuration
  let items = $prop([]);
  let itemHeight = $prop(50);
  let containerHeight = $prop(400);
  let overscan = $prop(3);
  
  // State for scroll position and viewport
  let scrollTop = $state(0);
  let containerRef;
  
  // Computed values for virtualization
  let totalHeight = $derived(items.length * itemHeight);
  let visibleItems = $derived(() => {
    const start = Math.floor(scrollTop / itemHeight);
    const visibleCount = Math.ceil(containerHeight / itemHeight);
    const startIndex = Math.max(0, start - overscan);
    const endIndex = Math.min(items.length, start + visibleCount + overscan);
    
    return items
      .slice(startIndex, endIndex)
      .map((item, i) => ({
        item,
        index: startIndex + i,
        style: `
          position: absolute;
          top: ${(startIndex + i) * itemHeight}px;
          left: 0;
          right: 0;
          height: ${itemHeight}px;
        `
      }));
  });
  
  // Handle scroll events
  function handleScroll(e) {
    scrollTop = e.target.scrollTop;
  }
</script>

<div
  bind:this={containerRef}
  style="
    height: ${containerHeight}px;
    overflow-y: auto;
    position: relative;
  "
  onscroll={handleScroll}
>
  <div style="height: ${totalHeight}px; position: relative;">
    {#each visibleItems as { item, style }}
      <div {style}>
        <slot {item} />
      </div>
    {/each}
  </div>
</div>

Explanation

This advanced example demonstrates performance optimization: 1. Virtual DOM recycling 2. Scroll position management 3. Dynamic item rendering 4. Performance optimization 5. Memory management 6. Slot-based customization 7. Viewport calculations It shows how to handle large datasets efficiently while maintaining smooth performance.

By SvelteSnacks Team

Stores Beginner

Simple Writable Store

Learn the basics of Svelte stores with a simple counter implementation using writable stores.

example.svelte

<script>
  import { writable } from 'svelte/store';

  // Create a basic writable store
  const count = writable(0);
  
  // Subscribe to store changes
  count.subscribe(value => {
    console.log('Count changed:', value);
  });
  
  function increment() {
    count.update(n => n + 1);
  }
  
  function decrement() {
    count.update(n => n - 1);
  }
  
  function reset() {
    count.set(0);
  }
</script>

<div style="padding: 1rem; text-align: center;">
  <h2 style="font-size: 1.5rem; margin-bottom: 1rem;">Count: {$count}</h2>
  
  <div style="display: flex; gap: 0.5rem; justify-content: center;">
    <button 
      onclick={decrement}
      style="padding: 0.5rem 1rem; background: #f97316; color: white; border-radius: 4px;"
    >
      Decrease
    </button>
    <button 
      onclick={increment}
      style="padding: 0.5rem 1rem; background: #f97316; color: white; border-radius: 4px;"
    >
      Increase
    </button>
    <button 
      onclick={reset}
      style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px;"
    >
      Reset
    </button>
  </div>
</div>

Explanation

This beginner example demonstrates basic store concepts: 1. Creating a writable store 2. Subscribing to store changes 3. Updating store values 4. Using the $ store syntax 5. Basic store methods (set, update) It shows how to manage global state in a simple, reactive way.

By SvelteSnacks Team

Stores Intermediate

Custom Todo Store

Create a custom store with derived values and complex state management for a todo application.

example.svelte

<script>
  function createTodoStore() {
    const { subscribe, set, update } = writable({
      todos: [],
      filter: 'all'
    });
    
    return {
      subscribe,
      addTodo: (text) => update(state => ({
        ...state,
        todos: [...state.todos, { id: Date.now(), text, completed: false }]
      })),
      toggleTodo: (id) => update(state => ({
        ...state,
        todos: state.todos.map(todo =>
          todo.id === id ? { ...todo, completed: !todo.completed } : todo
        )
      })),
      setFilter: (filter) => update(state => ({ ...state, filter })),
      clearCompleted: () => update(state => ({
        ...state,
        todos: state.todos.filter(todo => !todo.completed)
      }))
    };
  }
  
  const todoStore = createTodoStore();
  
  // Derived store for filtered todos
  const filteredTodos = derived(todoStore, $store => {
    switch ($store.filter) {
      case 'active':
        return $store.todos.filter(t => !t.completed);
      case 'completed':
        return $store.todos.filter(t => t.completed);
      default:
        return $store.todos;
    }
  });
  
  let newTodo = '';
</script>

<div style="padding: 1rem;">
  <div style="margin-bottom: 1rem;">
    <input
      type="text"
      bind:value={newTodo}
      placeholder="Add a new todo..."
      style="width: 100%; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px;"
      onkeydown={e => {
        if (e.key === 'Enter' && newTodo) {
          todoStore.addTodo(newTodo);
          newTodo = '';
        }
      }}
    />
  </div>
  
  <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
    {#each ['all', 'active', 'completed'] as filter}
      <button
        onclick={() => todoStore.setFilter(filter)}
        style="
          padding: 0.5rem 1rem;
          border-radius: 4px;
          background: ${$todoStore.filter === filter ? '#f97316' : '#e5e7eb'};
          color: ${$todoStore.filter === filter ? 'white' : 'black'};
        "
      >
        {filter}
      </button>
    {/each}
  </div>
  
  <div style="margin-bottom: 1rem;">
    {#each $filteredTodos as todo}
      <div style="display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">
        <input
          type="checkbox"
          checked={todo.completed}
          onclick={() => todoStore.toggleTodo(todo.id)}
        />
        <span style="text-decoration: ${todo.completed ? 'line-through' : 'none'}">
          {todo.text}
        </span>
      </div>
    {/each}
  </div>
  
  <button
    onclick={() => todoStore.clearCompleted()}
    style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px;"
  >
    Clear Completed
  </button>
</div>

Explanation

This intermediate example showcases custom store patterns: 1. Creating a custom store with methods 2. Using derived stores for computed values 3. Complex state updates 4. Store composition 5. Reactive store updates 6. State filtering and transformation It demonstrates how to build maintainable state management solutions.

By SvelteSnacks Team

Stores Advanced

Persistent Settings Store

Build a store that persists data to localStorage with automatic saving and loading.

example.svelte

<script>
  // Create a store that persists to localStorage
  function createPersistentStore(key, initialValue) {
    // Load initial value from localStorage if available
    const storedValue = localStorage.getItem(key);
    const initial = storedValue ? JSON.parse(storedValue) : initialValue;
    
    const store = writable(initial);
    
    // Subscribe to changes and update localStorage
    store.subscribe(value => {
      localStorage.setItem(key, JSON.stringify(value));
    });
    
    return {
      ...store,
      reset: () => store.set(initialValue)
    };
  }
  
  const settings = createPersistentStore('app-settings', {
    theme: 'light',
    fontSize: 16,
    notifications: true
  });
  
  const themes = ['light', 'dark', 'system'];
  const fontSizes = [12, 14, 16, 18, 20];
</script>

<div style="padding: 1rem;">
  <h2 style="font-size: 1.5rem; margin-bottom: 1rem;">App Settings</h2>
  
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <div>
      <label style="display: block; margin-bottom: 0.5rem;">Theme</label>
      <div style="display: flex; gap: 0.5rem;">
        {#each themes as theme}
          <button
            onclick={() => settings.update(s => ({ ...s, theme }))}
            style="
              padding: 0.5rem 1rem;
              border-radius: 4px;
              background: ${$settings.theme === theme ? '#f97316' : '#e5e7eb'};
              color: ${$settings.theme === theme ? 'white' : 'black'};
            "
          >
            {theme}
          </button>
        {/each}
      </div>
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 0.5rem;">Font Size</label>
      <div style="display: flex; gap: 0.5rem;">
        {#each fontSizes as size}
          <button
            onclick={() => settings.update(s => ({ ...s, fontSize: size }))}
            style="
              padding: 0.5rem 1rem;
              border-radius: 4px;
              background: ${$settings.fontSize === size ? '#f97316' : '#e5e7eb'};
              color: ${$settings.fontSize === size ? 'white' : 'black'};
            "
          >
            {size}px
          </button>
        {/each}
      </div>
    </div>
    
    <div>
      <label style="display: flex; gap: 0.5rem; align-items: center;">
        <input
          type="checkbox"
          checked={$settings.notifications}
          onclick={() => settings.update(s => ({ ...s, notifications: !s.notifications }))}
        />
        Enable Notifications
      </label>
    </div>
    
    <button
      onclick={() => settings.reset()}
      style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px; width: fit-content;"
    >
      Reset to Defaults
    </button>
  </div>
  
  <div style="margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 4px;">
    <pre style="font-family: monospace;">
      {JSON.stringify($settings, null, 2)}
    </pre>
  </div>
</div>

Explanation

This advanced example demonstrates sophisticated store patterns: 1. Creating persistent stores with localStorage 2. Custom store factories 3. Automatic state persistence 4. Complex state updates 5. Store initialization with saved data 6. Reset functionality 7. Type-safe store operations It shows how to build robust, persistent state management solutions.

By SvelteSnacks Team

Events Beginner

Basic Event Handling

Learn fundamental event handling in Svelte with mouse, keyboard, and form events.

example.svelte

<script>
  let mousePosition = $state({ x: 0, y: 0 });
  let keyPressed = $state('');
  let formData = $state({ name: '', email: '' });
  
  function handleMouseMove(event) {
    mousePosition = {
      x: event.clientX,
      y: event.clientY
    };
  }
  
  function handleKeyPress(event) {
    keyPressed = event.key;
  }
  
  function handleSubmit(event) {
    event.preventDefault();
    alert(`Form submitted with Name: ${formData.name}, Email: ${formData.email}`);
  }
</script>

<div style="padding: 1rem;">
  <div
    style="
      height: 200px;
      background: #f3f4f6;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1rem;
    "
    onmousemove={handleMouseMove}
  >
    Mouse Position: X: {mousePosition.x}, Y: {mousePosition.y}
  </div>
  
  <div
    style="
      padding: 1rem;
      background: #f3f4f6;
      border-radius: 4px;
      margin-bottom: 1rem;
      text-align: center;
    "
    onkeydown={handleKeyPress}
    tabindex="0"
  >
    Press any key (Last key pressed: {keyPressed || 'None'})
  </div>
  
  <form onsubmit={handleSubmit} style="display: flex; flex-direction: column; gap: 1rem;">
    <input
      type="text"
      placeholder="Name"
      style="padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px;"
      oninput={e => formData.name = e.target.value}
    />
    <input
      type="email"
      placeholder="Email"
      style="padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px;"
      oninput={e => formData.email = e.target.value}
    />
    <button
      type="submit"
      style="padding: 0.5rem 1rem; background: #f97316; color: white; border-radius: 4px;"
    >
      Submit Form
    </button>
  </form>
</div>

Explanation

This beginner example covers essential event concepts: 1. Mouse event handling 2. Keyboard event handling 3. Form submission events 4. Event object properties 5. State updates from events 6. Basic event prevention It provides a solid foundation for handling user interactions.

By SvelteSnacks Team

Events Intermediate

Event Forwarding System

Create a draggable component with event forwarding and custom event dispatching.

example.svelte

<script>
  // Event dispatcher for custom events
  const dispatch = createEventDispatcher();
  
  let dragPosition = $state({ x: 0, y: 0 });
  let isDragging = $state(false);
  let startPosition = $state({ x: 0, y: 0 });
  
  function handleDragStart(event) {
    isDragging = true;
    startPosition = {
      x: event.clientX - dragPosition.x,
      y: event.clientY - dragPosition.y
    };
    dispatch('dragstart', { position: dragPosition });
  }
  
  function handleDragMove(event) {
    if (isDragging) {
      dragPosition = {
        x: event.clientX - startPosition.x,
        y: event.clientY - startPosition.y
      };
      dispatch('dragmove', { position: dragPosition });
    }
  }
  
  function handleDragEnd() {
    if (isDragging) {
      isDragging = false;
      dispatch('dragend', { position: dragPosition });
    }
  }
</script>

<div style="padding: 1rem;">
  <div
    style="
      width: 400px;
      height: 400px;
      background: #f3f4f6;
      border-radius: 4px;
      position: relative;
      touch-action: none;
    "
    onmousemove={handleDragMove}
    onmouseup={handleDragEnd}
    onmouseleave={handleDragEnd}
  >
    <div
      style="
        width: 100px;
        height: 100px;
        background: #f97316;
        border-radius: 4px;
        position: absolute;
        cursor: move;
        left: ${dragPosition.x}px;
        top: ${dragPosition.y}px;
        user-select: none;
      "
      onmousedown={handleDragStart}
    >
      Drag me!
    </div>
  </div>
  
  <div style="margin-top: 1rem;">
    <p>Position: X: {dragPosition.x}, Y: {dragPosition.y}</p>
    <p>Status: {isDragging ? 'Dragging' : 'Idle'}</p>
  </div>
</div>

Explanation

This intermediate example demonstrates event forwarding patterns: 1. Custom event dispatching 2. Event forwarding 3. Drag and drop implementation 4. Component communication 5. State management with events 6. Complex event handling It shows how to build interactive components with proper event handling.

By SvelteSnacks Team

Events Advanced

Advanced Event Modifiers

Master event modifiers and complex event handling patterns in Svelte.

example.svelte

<script>
  let clicks = $state(0);
  let rightClicks = $state(0);
  let keypresses = $state([]);
  let lastTouch = $state({ x: 0, y: 0 });
  
  function handleKeypress(event) {
    keypresses = [...keypresses, event.key].slice(-5);
  }
  
  function handleTouch(event) {
    const touch = event.touches[0];
    lastTouch = {
      x: Math.round(touch.clientX),
      y: Math.round(touch.clientY)
    };
  }
  
  function clearHistory() {
    clicks = 0;
    rightClicks = 0;
    keypresses = [];
    lastTouch = { x: 0, y: 0 };
  }
</script>

<div style="padding: 1rem;">
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <div
      style="
        padding: 1rem;
        background: #f3f4f6;
        border-radius: 4px;
        text-align: center;
      "
      onclick={() => clicks++}
      oncontextmenu={e => {
        e.preventDefault();
        rightClicks++;
      }}
    >
      Click or Right-Click Here
      <p>Left Clicks: {clicks}</p>
      <p>Right Clicks: {rightClicks}</p>
    </div>
    
    <div
      style="
        padding: 1rem;
        background: #f3f4f6;
        border-radius: 4px;
        text-align: center;
      "
      onkeydown={handleKeypress}
      tabindex="0"
    >
      Type Here (Last 5 keys)
      <p style="font-family: monospace;">
        [{keypresses.join(', ')}]
      </p>
    </div>
    
    <div
      style="
        padding: 1rem;
        background: #f3f4f6;
        border-radius: 4px;
        text-align: center;
        touch-action: none;
      "
      ontouchstart={handleTouch}
      ontouchmove={handleTouch}
    >
      Touch Here (Mobile)
      <p>Last Touch: X: {lastTouch.x}, Y: {lastTouch.y}</p>
    </div>
    
    <button
      onclick={clearHistory}
      style="padding: 0.5rem 1rem; background: #6b7280; color: white; border-radius: 4px;"
    >
      Clear History
    </button>
  </div>
</div>

Explanation

This advanced example showcases complex event handling: 1. Event modifier usage 2. Multiple event types 3. Touch event handling 4. Event prevention patterns 5. Event state management 6. Event history tracking 7. Complex user interactions It demonstrates advanced patterns for handling user interactions.

By SvelteSnacks Team

Runes Beginner

Derived Values with Svelte 5 Runes

Learn how to use $derived rune for computed values, conditional rendering, and reactive state dependencies.

example.svelte

<script>
  // Basic state with derived values
  let count = $state(0);
  let multiplier = $state(2);
  
  // Multiple derived values from the same state
  let doubled = $derived(count * multiplier);
  let isEven = $derived(count % 2 === 0);
  let description = $derived(
    `Count is ${count} (${isEven ? 'even' : 'odd'}) × ${multiplier} = ${doubled}`
  );
  
  // Derived state with conditional logic
  let status = $derived(
    count === 0 ? 'Start counting!' :
    count > 10 ? 'Getting high!' :
    isEven ? 'Nice and even' : 'Odd number'
  );
  
  function increment() {
    count++;
  }
  
  function updateMultiplier(value) {
    multiplier = value;
  }
</script>

<div style="padding: 1rem; max-width: 400px; margin: 0 auto;">
  <div style="text-align: center; margin-bottom: 1rem;">
    <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem;">
      {description}
    </h2>
    <p style="color: #666; font-style: italic;">{status}</p>
  </div>
  
  <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
    <button 
      onclick={increment}
      style="flex: 1; padding: 0.5rem; background: #f97316; color: white; border-radius: 4px;"
    >
      Increment
    </button>
  </div>
  
  <div style="background: #f3f4f6; padding: 1rem; border-radius: 4px;">
    <label style="display: block; margin-bottom: 0.5rem;">Multiplier:</label>
    <div style="display: flex; gap: 0.5rem;">
      {#each [2, 3, 4, 5] as value}
        <button
          onclick={() => updateMultiplier(value)}
          style="
            flex: 1;
            padding: 0.5rem;
            background: ${multiplier === value ? '#f97316' : '#e5e7eb'};
            color: ${multiplier === value ? 'white' : 'black'};
            border-radius: 4px;
          "
        >
          ×{value}
        </button>
      {/each}
    </div>
  </div>
</div>

Explanation

This example demonstrates key features of Svelte 5's $derived rune: 1. Basic state with $state rune 2. Multiple derived values from the same state 3. Conditional derived values 4. Reactive string templates 5. State dependencies and updates It shows how derived values automatically update when their dependencies change, making reactive programming intuitive and straightforward.

By SvelteSnacks Team

State Management Advanced

Nested State Management

Master complex state management with nested objects, history tracking, and undo functionality using Svelte 5's $state rune.

example.svelte

<script>
  // Complex nested state with $state
  let form = $state({
    personal: {
      name: '',
      email: '',
      preferences: {
        theme: 'light',
        notifications: true
      }
    },
    history: []
  });
  
  // Derived values from nested state
  let isValid = $derived(
    form.personal.name.length > 0 &&
    form.personal.email.includes('@')
  );
  
  let summary = $derived({
    changeCount: form.history.length,
    lastChange: form.history[form.history.length - 1]?.field || 'No changes yet',
    theme: form.personal.preferences.theme,
    hasNotifications: form.personal.preferences.notifications
  });
  
  // Update nested state with history tracking
  function updateField(path, value) {
    const [section, field] = path.split('.');
    const oldValue = form[section][field];
    
    // Update the field
    form[section][field] = value;
    
    // Track the change
    form.history = [...form.history, {
      field: path,
      oldValue,
      newValue: value,
      timestamp: new Date().toISOString()
    }];
  }
  
  // Update deeply nested state
  function updatePreference(key, value) {
    const oldValue = form.personal.preferences[key];
    form.personal.preferences[key] = value;
    
    form.history = [...form.history, {
      field: `preferences.${key}`,
      oldValue,
      newValue: value,
      timestamp: new Date().toISOString()
    }];
  }
  
  // Undo last change
  function undo() {
    if (form.history.length === 0) return;
    
    const lastChange = form.history[form.history.length - 1];
    const [section, field] = lastChange.field.split('.');
    
    if (field.includes('preferences')) {
      const [, prefKey] = field.split('.');
      form.personal.preferences[prefKey] = lastChange.oldValue;
    } else {
      form[section][field] = lastChange.oldValue;
    }
    
    form.history = form.history.slice(0, -1);
  }
</script>

<div style="padding: 1rem; max-width: 500px; margin: 0 auto;">
  <div style="margin-bottom: 1rem;">
    <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">
      Nested State Management
    </h2>
    
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      <div>
        <label style="display: block; margin-bottom: 0.5rem;">Name:</label>
        <input
          type="text"
          value={form.personal.name}
          oninput={e => updateField('personal.name', e.target.value)}
          style="width: 100%; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px;"
        />
      </div>
      
      <div>
        <label style="display: block; margin-bottom: 0.5rem;">Email:</label>
        <input
          type="email"
          value={form.personal.email}
          oninput={e => updateField('personal.email', e.target.value)}
          style="width: 100%; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px;"
        />
      </div>
      
      <div style="background: #f3f4f6; padding: 1rem; border-radius: 4px;">
        <h3 style="font-weight: bold; margin-bottom: 0.5rem;">Preferences</h3>
        
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
          <div>
            <label style="display: block; margin-bottom: 0.5rem;">Theme:</label>
            <div style="display: flex; gap: 0.5rem;">
              {#each ['light', 'dark'] as theme}
                <button
                  onclick={() => updatePreference('theme', theme)}
                  style="
                    flex: 1;
                    padding: 0.5rem;
                    background: ${form.personal.preferences.theme === theme ? '#f97316' : '#e5e7eb'};
                    color: ${form.personal.preferences.theme === theme ? 'white' : 'black'};
                    border-radius: 4px;
                  "
                >
                  {theme}
                </button>
              {/each}
            </div>
          </div>
          
          <label style="display: flex; gap: 0.5rem; align-items: center;">
            <input
              type="checkbox"
              checked={form.personal.preferences.notifications}
              onclick={() => updatePreference('notifications', !form.personal.preferences.notifications)}
            />
            Enable Notifications
          </label>
        </div>
      </div>
    </div>
  </div>
  
  <div style="background: #f3f4f6; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
    <h3 style="font-weight: bold; margin-bottom: 0.5rem;">Form Status</h3>
    <p>Valid: {isValid ? '✅' : '❌'}</p>
    <p>Changes: {summary.changeCount}</p>
    <p>Last Change: {summary.lastChange}</p>
    <p>Current Theme: {summary.theme}</p>
    <p>Notifications: {summary.hasNotifications ? 'Enabled' : 'Disabled'}</p>
  </div>
  
  <button
    onclick={undo}
    disabled={form.history.length === 0}
    style="
      width: 100%;
      padding: 0.5rem;
      background: ${form.history.length ? '#f97316' : '#e5e7eb'};
      color: ${form.history.length ? 'white' : '#666'};
      border-radius: 4px;
      cursor: ${form.history.length ? 'pointer' : 'not-allowed'};
    "
  >
    Undo Last Change
  </button>
</div>

Explanation

This advanced example showcases sophisticated state management: 1. Complex nested state with $state rune 2. Deep state updates with history tracking 3. Derived state for form validation 4. Computed summaries from nested state 5. Undo functionality with state history 6. Type-safe state updates 7. Reactive UI updates It demonstrates how to handle complex state structures while maintaining clean, maintainable code.

By SvelteSnacks Team