# Svelte

## Introduction

Svelte is a modern frontend framework that takes a fundamentally different approach to building user interfaces. Unlike traditional frameworks that do the bulk of their work in the browser, Svelte is a compiler that converts declarative component code into highly efficient imperative JavaScript that surgically updates the DOM. This compilation step eliminates the need for a virtual DOM and runtime overhead, resulting in smaller bundle sizes and faster performance. Components are written in `.svelte` files using an intuitive syntax that combines HTML, CSS, and JavaScript, making it accessible to web developers while providing powerful reactive primitives. As of version 5.45, Svelte continues to evolve with new features for reactivity, performance optimization, and developer experience.

The Svelte ecosystem consists of multiple packages and tools that work together seamlessly. The core `svelte` package provides the component framework and compiler, while `svelte/store` offers state management utilities, `svelte/motion` handles animations, and `svelte/transition` provides built-in transition effects. Svelte 5 introduces runes—a new reactivity system using `$state`, `$derived`, and `$effect`—that offers fine-grained control over reactive behavior. The framework also includes `svelte/reactivity` with reactive data structures and window bindings, `svelte/events` for enhanced event handling, and `svelte/attachments` for modern DOM behavior patterns. A comprehensive compiler API enables parsing and transforming Svelte components, server-side rendering capabilities support universal applications, and integration with modern build tools ensures optimal development workflows. SvelteKit, the official application framework, builds on top of Svelte to provide routing, server-side rendering, and full-stack capabilities.

## APIs and Functions

### Component Mounting and Lifecycle

**mount** - Mount a component to a DOM element

```javascript
import { mount } from 'svelte';
import App from './App.svelte';

// Basic mounting
const app = mount(App, {
  target: document.getElementById('app'),
  props: {
    name: 'World',
    count: 42
  }
});

// Advanced mounting with context and events
const instance = mount(App, {
  target: document.body,
  anchor: document.querySelector('#insertion-point'),
  props: { user: { id: 1, name: 'Alice' } },
  context: new Map([['theme', 'dark']]),
  intro: true, // Play transitions on mount (default: true)
  events: {
    // Deprecated: prefer callback props instead
    customEvent: (e) => console.log('Event:', e.detail)
  }
});

// Access exported values from the component
console.log(instance.someExportedFunction());
```

**unmount** - Unmount a component instance

```javascript
import { mount, unmount } from 'svelte';
import Modal from './Modal.svelte';

const modal = mount(Modal, {
  target: document.body,
  props: { title: 'Confirm Action' }
});

// Unmount without playing outro transitions
await unmount(modal);

// Unmount with outro transitions (Svelte 5.13+)
await unmount(modal, { outro: true });
```

**hydrate** - Hydrate server-rendered HTML with a component

```javascript
import { hydrate } from 'svelte';
import App from './App.svelte';

// Hydrate server-rendered content
const app = hydrate(App, {
  target: document.getElementById('app'),
  props: { data: window.__INITIAL_DATA__ }
});

// With recover mode (attempts to fix mismatches)
const appWithRecovery = hydrate(App, {
  target: document.getElementById('app'),
  props: { data: window.__INITIAL_DATA__ },
  recover: true // Default: true. Set false to strictly fail on mismatch
});
```

**onMount** - Run code when component mounts to DOM

```javascript
<script>
import { onMount } from 'svelte';

let data = $state(null);
let canvas;

onMount(() => {
  // Runs once when component is mounted
  console.log('Component mounted');

  // Fetch data
  fetch('/api/data')
    .then(r => r.json())
    .then(d => data = d);

  // Setup canvas
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 100, 100);

  // Return cleanup function
  return () => {
    console.log('Component will unmount');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };
});
</script>

<canvas bind:this={canvas}></canvas>
```

**onDestroy** - Run cleanup code when component unmounts

```javascript
<script>
import { onDestroy } from 'svelte';

let intervalId;

// Setup interval
intervalId = setInterval(() => {
  console.log('Tick');
}, 1000);

onDestroy(() => {
  // Cleanup runs before unmount
  clearInterval(intervalId);
  console.log('Cleaned up interval');
});

// Works during SSR (only lifecycle hook that does)
onDestroy(() => {
  console.log('This runs during SSR too');
});
</script>
```

**tick** - Wait for pending state changes to apply

```javascript
<script>
import { tick } from 'svelte';

let count = $state(0);
let element;

async function increment() {
  count += 1;

  // DOM not yet updated here
  console.log('Before tick:', element.textContent); // Shows old value

  await tick();

  // DOM is now updated
  console.log('After tick:', element.textContent); // Shows new value
  element.style.color = 'red';
}
</script>

<div bind:this={element}>{count}</div>
<button onclick={increment}>Increment</button>
```

**settled** - Wait for all state changes and async work to complete

```javascript
<script>
import { settled } from 'svelte';

let loading = $state(false);
let data = $state(null);

async function loadAndVerify() {
  loading = true;

  fetch('/api/data')
    .then(r => r.json())
    .then(d => {
      data = d;
      loading = false;
    });

  // Wait for all state changes and DOM updates to complete
  await settled();

  // At this point, loading is false and data is set
  console.log('Everything has settled:', { loading, data });
}
</script>
```

**flushSync** - Synchronously apply pending state changes

```javascript
<script>
import { flushSync } from 'svelte';

let items = $state([1, 2, 3]);
let listElement;

function addItem() {
  items.push(items.length + 1);

  // Force synchronous DOM update
  flushSync();

  // DOM is immediately updated
  const newItem = listElement.lastElementChild;
  newItem.scrollIntoView();
}

// With callback
function updateAndProcess() {
  const result = flushSync(() => {
    items = [1, 2, 3, 4, 5];
    return items.length;
  });
  console.log('Updated count:', result); // 5
}
</script>

<ul bind:this={listElement}>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>
```

### Context API

**createContext** - Create type-safe context getter/setter pair

```javascript
<script context="module">
import { createContext } from 'svelte';

export const [getTheme, setTheme] = createContext();
</script>

<!-- Parent component -->
<script>
const theme = $state({ mode: 'dark', color: 'blue' });

setTheme(theme);
</script>

<!-- Child component -->
<script>
const theme = getTheme(); // Typed and safe

$effect(() => {
  console.log('Current theme:', theme.mode);
});
</script>

<div class={theme.mode}>Content</div>
```

**setContext / getContext** - Share data between parent and child components

```javascript
<!-- ParentComponent.svelte -->
<script>
import { setContext } from 'svelte';
import Child from './Child.svelte';

const theme = {
  primaryColor: '#ff3e00',
  secondaryColor: '#676778'
};

const api = {
  fetchUser: (id) => fetch(`/api/users/${id}`).then(r => r.json()),
  updateUser: (id, data) => fetch(`/api/users/${id}`, {
    method: 'PUT',
    body: JSON.stringify(data)
  })
};

// Set multiple contexts with different keys
setContext('theme', theme);
setContext('api', api);
</script>

<Child />

<!-- Child.svelte -->
<script>
import { getContext } from 'svelte';

const theme = getContext('theme');
const api = getContext('api');

async function loadUser() {
  const user = await api.fetchUser(123);
  console.log('User:', user);
}
</script>

<div style="color: {theme.primaryColor}">
  Themed content
</div>
```

**hasContext** - Check if context exists

```javascript
<script>
import { hasContext, getContext } from 'svelte';

let theme;

if (hasContext('theme')) {
  theme = getContext('theme');
  console.log('Theme context available');
} else {
  // Use default theme
  theme = { primaryColor: '#000', secondaryColor: '#666' };
  console.log('Using default theme');
}
</script>
```

**getAllContexts** - Retrieve all contexts from parent

```javascript
<script>
import { getAllContexts } from 'svelte';

// Get all contexts to pass to dynamically created component
const contexts = getAllContexts();

// Later, when creating component programmatically
const instance = mount(DynamicComponent, {
  target: someElement,
  context: contexts // Pass contexts down
});
</script>
```

### Reactivity and State Management

**untrack** - Read state without creating dependencies

```javascript
<script>
let count = $state(0);
let name = $state('Alice');

// This derived will only re-run when count changes, not name
const message = $derived(() => {
  const currentCount = count; // tracked
  const currentName = untrack(() => name); // NOT tracked
  return `${currentName}: ${currentCount}`;
});

$effect(() => {
  console.log(message);
  // Changing name won't trigger this effect
  // Only changing count will
});

function update() {
  count++; // Triggers effect
  name = 'Bob'; // Doesn't trigger effect
}
</script>
```

**getAbortSignal** - Get signal that aborts when effect/derived re-runs

```javascript
<script>
import { getAbortSignal } from 'svelte';

let userId = $state(1);

$effect(() => {
  const signal = getAbortSignal();

  fetch(`/api/users/${userId}`, { signal })
    .then(r => r.json())
    .then(data => {
      if (!signal.aborted) {
        console.log('User data:', data);
      }
    })
    .catch(err => {
      if (err.name !== 'AbortError') {
        console.error('Fetch failed:', err);
      }
    });

  // When userId changes, ongoing fetch is automatically cancelled
});

// With async/await
$effect(() => {
  async function loadUser() {
    try {
      const response = await fetch(`/api/users/${userId}`, {
        signal: getAbortSignal()
      });
      const data = await response.json();
      console.log(data);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error(err);
      }
    }
  }
  loadUser();
});
</script>
```

**fork** - Create a fork for off-screen work (experimental)

```javascript
import { fork } from 'svelte';

// Create a fork for preloading data without affecting the DOM
async function preloadRoute(routeData) {
  const forked = fork(() => {
    // State changes here are evaluated but not applied to DOM
    someState = routeData;
    // Run effects and deriveds
  });

  // Later, when the user navigates, commit the fork
  await forked.commit(); // Applies all state changes to DOM

  // Or discard if navigation was cancelled
  // forked.discard();
}

// Example: Preload data on hover
function handleHover(link) {
  const forked = fork(() => {
    // Fetch and process data in isolation
    fetchPageData(link.href);
  });

  link.addEventListener('click', async () => {
    // Commit the preloaded state
    await forked.commit();
  });

  link.addEventListener('mouseleave', () => {
    // Discard if user doesn't click
    forked.discard();
  }, { once: true });
}
```

**createSubscriber** - Integrate external event systems with reactivity

```javascript
<script>
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

// Create a reactive WebSocket connection
class ReactiveWebSocket {
  #ws;
  #subscribe;
  #data = $state(null);

  constructor(url) {
    this.#ws = new WebSocket(url);

    this.#subscribe = createSubscriber((update) => {
      const handleMessage = (event) => {
        this.#data = JSON.parse(event.data);
        update(); // Trigger effects that read this.data
      };

      this.#ws.addEventListener('message', handleMessage);

      // Cleanup when all effects are destroyed
      return () => {
        this.#ws.removeEventListener('message', handleMessage);
        this.#ws.close();
      };
    });
  }

  get data() {
    this.#subscribe(); // Make reactive
    return this.#data;
  }
}

const socket = new ReactiveWebSocket('wss://api.example.com');

$effect(() => {
  console.log('New data:', socket.data);
});
</script>
```

### Store APIs

**writable** - Create a writable store

```javascript
import { writable } from 'svelte/store';

// Simple store
const count = writable(0);

// Subscribe to changes
const unsubscribe = count.subscribe(value => {
  console.log('Count:', value);
});

// Update the value
count.set(5);
count.update(n => n + 1);

unsubscribe();

// Store with start/stop logic
const websocket = writable(null, (set, update) => {
  const ws = new WebSocket('wss://example.com/socket');

  ws.addEventListener('message', (event) => {
    set(JSON.parse(event.data));
  });

  ws.addEventListener('open', () => {
    console.log('WebSocket connected');
  });

  // Cleanup function
  return () => {
    ws.close();
    console.log('WebSocket disconnected');
  };
});

// In Svelte components, use $ prefix for auto-subscription
// <script>
//   import { count } from './stores.js';
// </script>
// <div>{$count}</div>
```

**readable** - Create a read-only store

```javascript
import { readable } from 'svelte/store';

// Simple readable
const time = readable(new Date(), (set) => {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});

// Geolocation store
const location = readable(null, (set) => {
  if (!navigator.geolocation) {
    set({ error: 'Geolocation not supported' });
    return;
  }

  const watchId = navigator.geolocation.watchPosition(
    (position) => {
      set({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        accuracy: position.coords.accuracy
      });
    },
    (error) => set({ error: error.message })
  );

  return () => navigator.geolocation.clearWatch(watchId);
});
```

**derived** - Create a store derived from other stores

```javascript
import { writable, derived } from 'svelte/store';

const firstName = writable('Alice');
const lastName = writable('Smith');

// Synchronous derived
const fullName = derived(
  [firstName, lastName],
  ([$first, $last]) => `${$first} ${$last}`
);

// Asynchronous derived with set callback
const user = derived(
  fullName,
  ($fullName, set) => {
    fetch(`/api/users?name=${$fullName}`)
      .then(r => r.json())
      .then(data => set(data))
      .catch(err => set({ error: err.message }));

    // Optional: return cleanup
    return () => {
      console.log('Cleanup for', $fullName);
    };
  },
  { loading: true } // Initial value
);

// Derived from single store
const doubled = derived(count, $count => $count * 2);

// Complex derived with multiple stores
const cart = writable([
  { id: 1, name: 'Item 1', price: 10, quantity: 2 },
  { id: 2, name: 'Item 2', price: 15, quantity: 1 }
]);
const taxRate = writable(0.08);

const cartTotal = derived(
  [cart, taxRate],
  ([$cart, $taxRate]) => {
    const subtotal = $cart.reduce((sum, item) =>
      sum + item.price * item.quantity, 0);
    const tax = subtotal * $taxRate;
    return {
      subtotal,
      tax,
      total: subtotal + tax
    };
  }
);
```

**readonly** - Make a store read-only

```javascript
import { writable, readonly } from 'svelte/store';

const _count = writable(0);

// Export readonly version
export const count = readonly(_count);

// Export methods to modify the store
export function increment() {
  _count.update(n => n + 1);
}

export function reset() {
  _count.set(0);
}
```

**get** - Get current store value without subscribing

```javascript
import { writable, get } from 'svelte/store';

const count = writable(5);

// Get current value
const currentCount = get(count);
console.log(currentCount); // 5

// Warning: Creates temporary subscription
// Don't use in reactive contexts (use $count instead)
function handleClick() {
  const value = get(count);
  console.log('Clicked with count:', value);
  count.set(value + 1);
}
```

**toStore / fromStore** - Bridge between runes and stores

```javascript
import { toStore, fromStore } from 'svelte/store';

// Convert $state to store
let count = $state(0);
const countStore = toStore(
  () => count,
  (v) => count = v
);

// Read-only version
const readonlyStore = toStore(() => count);

// Use in non-runes code
countStore.subscribe(value => console.log('Count:', value));

// Convert store to runes-compatible object
import { writable } from 'svelte/store';
const externalStore = writable(42);
const runeState = fromStore(externalStore);

$effect(() => {
  console.log('Value:', runeState.current);
});

// For writable stores, you can set the value
runeState.current = 100; // Updates the store
```

### Reactive Data Structures

**SvelteMap** - Reactive Map implementation

```javascript
<script>
import { SvelteMap } from 'svelte/reactivity';

const users = new SvelteMap();

users.set(1, { name: 'Alice', role: 'admin' });
users.set(2, { name: 'Bob', role: 'user' });

function addUser() {
  const id = users.size + 1;
  users.set(id, { name: `User ${id}`, role: 'user' });
}

function removeUser(id) {
  users.delete(id);
}

$effect(() => {
  console.log('User count:', users.size);
});
</script>

<div>Total users: {users.size}</div>
{#each users as [id, user]}
  <div>
    {user.name} ({user.role})
    <button onclick={() => removeUser(id)}>Remove</button>
  </div>
{/each}
<button onclick={addUser}>Add User</button>
```

**SvelteSet** - Reactive Set implementation

```javascript
<script>
import { SvelteSet } from 'svelte/reactivity';

const tags = new SvelteSet(['svelte', 'javascript']);

function addTag(tag) {
  tags.add(tag);
}

function removeTag(tag) {
  tags.delete(tag);
}

function clearAll() {
  tags.clear();
}

$effect(() => {
  console.log('Tags:', Array.from(tags));
});
</script>

<div>Tags: {tags.size}</div>
{#each tags as tag}
  <span class="tag">
    {tag}
    <button onclick={() => removeTag(tag)}>×</button>
  </span>
{/each}
```

**SvelteDate** - Reactive Date wrapper

```javascript
<script>
import { SvelteDate } from 'svelte/reactivity';

const now = new SvelteDate();

// Update every second
setInterval(() => {
  now.setTime(Date.now());
}, 1000);

$effect(() => {
  console.log('Time updated:', now.toLocaleTimeString());
});
</script>

<div>
  <p>Current time: {now.toLocaleTimeString()}</p>
  <p>Unix timestamp: {now.getTime()}</p>
  <p>Date: {now.toLocaleDateString()}</p>
</div>
```

**SvelteURL** - Reactive URL and URLSearchParams

```javascript
<script>
import { SvelteURL } from 'svelte/reactivity';

const url = new SvelteURL('https://example.com/path?q=search&page=1');

function updateSearch(query) {
  url.searchParams.set('q', query);
}

function nextPage() {
  const page = parseInt(url.searchParams.get('page') || '1');
  url.searchParams.set('page', String(page + 1));
}

$effect(() => {
  console.log('URL changed:', url.href);
  console.log('Search params:', Object.fromEntries(url.searchParams));
});
</script>

<div>
  <p>Full URL: {url.href}</p>
  <p>Path: {url.pathname}</p>
  <p>Query: {url.searchParams.get('q')}</p>
  <p>Page: {url.searchParams.get('page')}</p>
  <button onclick={nextPage}>Next Page</button>
</div>
```

**SvelteURLSearchParams** - Reactive URLSearchParams wrapper

```javascript
<script>
import { SvelteURLSearchParams } from 'svelte/reactivity';

const params = new SvelteURLSearchParams('?q=search&filter=active&page=1');

function updateQuery(query) {
  params.set('q', query);
}

function addFilter(filter) {
  params.append('filter', filter);
}

function clearFilters() {
  params.delete('filter');
}

$effect(() => {
  console.log('Params changed:', params.toString());
  console.log('All filters:', params.getAll('filter'));
});
</script>

<div>
  <p>Query string: {params.toString()}</p>
  <p>Search: {params.get('q')}</p>
  <p>Filters: {params.getAll('filter').join(', ')}</p>
  <button onclick={() => updateQuery('new search')}>Update Search</button>
  <button onclick={() => addFilter('completed')}>Add Filter</button>
  <button onclick={clearFilters}>Clear Filters</button>
</div>
```

**MediaQuery** - Reactive media query matching

```javascript
<script>
import { MediaQuery } from 'svelte/reactivity';

const isDesktop = new MediaQuery('(min-width: 1024px)');
const isDarkMode = new MediaQuery('(prefers-color-scheme: dark)');
const prefersReducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');

$effect(() => {
  console.log('Desktop:', isDesktop.current);
  console.log('Dark mode:', isDarkMode.current);
});
</script>

<div>
  {#if isDesktop.current}
    <nav>Desktop Navigation</nav>
  {:else}
    <nav>Mobile Navigation</nav>
  {/if}

  <div class:dark-theme={isDarkMode.current}>
    Content
  </div>
</div>
```

**Window Reactive Values** - Reactive window and navigator properties

```javascript
<script>
import {
  scrollX,
  scrollY,
  innerWidth,
  innerHeight,
  outerWidth,
  outerHeight,
  screenLeft,
  screenTop,
  online,
  devicePixelRatio
} from 'svelte/reactivity/window';

// All window properties are reactive
$effect(() => {
  console.log('Scroll position:', scrollX.current, scrollY.current);
  console.log('Window size:', innerWidth.current, innerHeight.current);
  console.log('Online status:', online.current);
  console.log('Device pixel ratio:', devicePixelRatio.current);
});

// Responsive layout based on window size
let isMobile = $derived(innerWidth.current < 768);
let isTablet = $derived(innerWidth.current >= 768 && innerWidth.current < 1024);
</script>

<div>
  <p>Window: {innerWidth.current}x{innerHeight.current}</p>
  <p>Scroll: {scrollX.current}, {scrollY.current}</p>
  <p>Status: {online.current ? 'Online' : 'Offline'}</p>

  {#if isMobile}
    <MobileLayout />
  {:else if isTablet}
    <TabletLayout />
  {:else}
    <DesktopLayout />
  {/if}
</div>

<!-- Parallax effect using scroll position -->
<div style="transform: translateY({scrollY.current * 0.5}px)">
  Parallax content
</div>
```

### Transitions and Animations

**fade** - Fade in/out transition

```javascript
<script>
import { fade } from 'svelte/transition';

let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>
  Toggle
</button>

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

  <div transition:fade={{ duration: 1000, easing: t => t }}>
    Custom fade (1 second, linear)
  </div>
{/if}
```

**fly** - Fly in from position

```javascript
<script>
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';

let show = $state(false);
</script>

{#if show}
  <!-- Fly from left -->
  <div transition:fly={{ x: -200, duration: 600 }}>
    Flies in from left
  </div>

  <!-- Fly from top with fade -->
  <div transition:fly={{ y: -100, duration: 500, opacity: 0 }}>
    Flies down from top
  </div>

  <!-- Custom easing -->
  <div transition:fly={{ x: 200, y: 100, duration: 800, easing: quintOut }}>
    Flies with custom curve
  </div>
{/if}
```

**slide** - Slide transition

```javascript
<script>
import { slide } from 'svelte/transition';

let expanded = $state(false);
</script>

<button onclick={() => expanded = !expanded}>
  {expanded ? 'Collapse' : 'Expand'}
</button>

{#if expanded}
  <div transition:slide={{ duration: 300 }}>
    <p>This content slides in and out</p>
    <p>Smoothly revealing more content</p>
  </div>
{/if}

<!-- Horizontal slide -->
{#if expanded}
  <div transition:slide={{ axis: 'x', duration: 400 }}>
    Slides horizontally
  </div>
{/if}
```

**scale** - Scale transition

```javascript
<script>
import { scale } from 'svelte/transition';

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

{#if showModal}
  <div class="modal-backdrop" transition:fade>
    <div class="modal" transition:scale={{ duration: 300, start: 0.7 }}>
      <h2>Modal Title</h2>
      <p>Modal content scales in</p>
      <button onclick={() => showModal = false}>Close</button>
    </div>
  </div>
{/if}
```

**flip** - FLIP animation for list reordering

```javascript
<script>
import { flip } from 'svelte/animate';
import { quintOut } from 'svelte/easing';

let items = $state([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
]);

function shuffle() {
  items = items.sort(() => Math.random() - 0.5);
}

function remove(id) {
  items = items.filter(item => item.id !== id);
}
</script>

<button onclick={shuffle}>Shuffle</button>

<ul>
  {#each items as item (item.id)}
    <li animate:flip={{ duration: 400, easing: quintOut }}>
      {item.name}
      <button onclick={() => remove(item.id)}>Remove</button>
    </li>
  {/each}
</ul>
```

**crossfade** - Crossfade between two elements

```javascript
<script>
import { crossfade } from 'svelte/transition';
import { quintOut } from 'svelte/easing';

const [send, receive] = crossfade({
  duration: 300,
  easing: quintOut
});

let todos = $state([
  { id: 1, text: 'Buy milk', done: false },
  { id: 2, text: 'Walk dog', done: false }
]);

function toggle(id) {
  const todo = todos.find(t => t.id === id);
  if (todo) todo.done = !todo.done;
}
</script>

<div class="todos">
  <h2>Todo</h2>
  {#each todos.filter(t => !t.done) as todo (todo.id)}
    <div in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
      <input type="checkbox" checked={todo.done} onchange={() => toggle(todo.id)} />
      {todo.text}
    </div>
  {/each}
</div>

<div class="done">
  <h2>Done</h2>
  {#each todos.filter(t => t.done) as todo (todo.id)}
    <div in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
      <input type="checkbox" checked={todo.done} onchange={() => toggle(todo.id)} />
      {todo.text}
    </div>
  {/each}
</div>
```

### Motion and Springs

**Spring** - Spring physics animation

```javascript
<script>
import { Spring } from 'svelte/motion';

const coords = new Spring({ x: 0, y: 0 }, {
  stiffness: 0.1,
  damping: 0.25
});

function handleMouseMove(event) {
  coords.target = {
    x: event.clientX,
    y: event.clientY
  };
}

$effect(() => {
  console.log('Spring position:', coords.current);
});
</script>

<svelte:window onmousemove={handleMouseMove} />

<div
  class="follower"
  style="left: {coords.current.x}px; top: {coords.current.y}px"
/>

<!-- Reactive spring bound to $state -->
<script>
let value = $state(0);
const spring = Spring.of(() => value, {
  stiffness: 0.05,
  damping: 0.2
});
</script>

<input type="range" bind:value min="0" max="100" />
<div style="width: {spring.current}%">
  Progress: {Math.round(spring.current)}%
</div>
```

**tweened** - Tween animation between values

```javascript
<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';

const progress = tweened(0, {
  duration: 400,
  easing: cubicOut
});

async function startLoading() {
  await progress.set(25);
  await progress.set(50);
  await progress.set(75);
  await progress.set(100);
}
</script>

<progress value={$progress} max="100" />

<button onclick={startLoading}>Start</button>

<!-- Interpolating objects -->
<script>
import { tweened } from 'svelte/motion';
import { cubicInOut } from 'svelte/easing';

const position = tweened({ x: 0, y: 0 }, {
  duration: 500,
  easing: cubicInOut,
  interpolate: (a, b) => t => ({
    x: a.x + (b.x - a.x) * t,
    y: a.y + (b.y - a.y) * t
  })
});

function moveTo(x, y) {
  position.set({ x, y });
}
</script>
```

**prefersReducedMotion** - Detect reduced motion preference

```javascript
<script>
import { prefersReducedMotion } from 'svelte/motion';
import { fade, fly } from 'svelte/transition';

let visible = $state(false);

// Choose transition based on preference
const transition = $prefersReducedMotion ? fade : fly;
const transitionParams = $prefersReducedMotion
  ? { duration: 200 }
  : { y: 20, duration: 400 };
</script>

{#if visible}
  <div transition:transition={transitionParams}>
    Respects motion preferences
  </div>
{/if}
```

### Actions

**use:action** - Attach behavior to DOM elements

```javascript
<script>
// Simple action
function autofocus(node) {
  node.focus();

  return {
    destroy() {
      // Cleanup if needed
    }
  };
}

// Action with parameters
function tooltip(node, text) {
  const tooltip = document.createElement('div');
  tooltip.textContent = text;
  tooltip.className = 'tooltip';

  function handleMouseEnter() {
    document.body.appendChild(tooltip);
    const rect = node.getBoundingClientRect();
    tooltip.style.left = rect.left + 'px';
    tooltip.style.top = (rect.bottom + 5) + 'px';
  }

  function handleMouseLeave() {
    tooltip.remove();
  }

  node.addEventListener('mouseenter', handleMouseEnter);
  node.addEventListener('mouseleave', handleMouseLeave);

  return {
    update(newText) {
      // Called when parameter changes
      tooltip.textContent = newText;
    },
    destroy() {
      tooltip.remove();
      node.removeEventListener('mouseenter', handleMouseEnter);
      node.removeEventListener('mouseleave', handleMouseLeave);
    }
  };
}

// Intersection observer action
function lazyLoad(node, src) {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        node.src = src;
        observer.disconnect();
      }
    });
  });

  observer.observe(node);

  return {
    destroy() {
      observer.disconnect();
    }
  };
}

let tooltipText = $state('Hover me');
</script>

<input use:autofocus />
<button use:tooltip={tooltipText}>Hover for tooltip</button>
<img use:lazyLoad="/path/to/image.jpg" alt="Lazy loaded" />
```

### Event Handling

**on** - Programmatically attach event listeners

```javascript
<script>
import { on } from 'svelte/events';
import { onMount } from 'svelte';

let button;
let count = $state(0);

onMount(() => {
  // Attach event listener that preserves declarative order
  const cleanup = on(button, 'click', (event) => {
    count++;
    console.log('Button clicked:', count);
  });

  // With options
  const cleanup2 = on(button, 'click', (event) => {
    console.log('Capturing phase');
  }, { capture: true });

  // Cleanup on unmount
  return () => {
    cleanup();
    cleanup2();
  };
});

// Listen to window events
onMount(() => {
  return on(window, 'resize', (event) => {
    console.log('Window resized:', window.innerWidth);
  });
});

// Listen to document events
onMount(() => {
  return on(document, 'keydown', (event) => {
    if (event.key === 'Escape') {
      console.log('Escape pressed');
    }
  }, { passive: true });
});
</script>

<button bind:this={button}>Clicked {count} times</button>
```

### Attachments

**createAttachmentKey** - Create attachment keys programmatically

```javascript
<script>
import { createAttachmentKey } from 'svelte/attachments';

const props = {
  class: 'interactive',
  onclick: () => console.log('clicked'),
  [createAttachmentKey()]: (node) => {
    node.textContent = 'Attached!';
    console.log('Attachment activated on:', node);

    // Return cleanup function
    return () => {
      console.log('Attachment cleanup');
    };
  }
};
</script>

<button {...props}>click me</button>
```

**fromAction** - Convert actions to attachments

```javascript
<script>
import { fromAction } from 'svelte/attachments';

// Existing action from a library
function tooltip(element, text) {
  const div = document.createElement('div');
  div.className = 'tooltip';
  div.textContent = text;

  function handleMouseEnter() {
    document.body.appendChild(div);
    const rect = element.getBoundingClientRect();
    div.style.left = rect.left + 'px';
    div.style.top = (rect.bottom + 5) + 'px';
  }

  function handleMouseLeave() {
    div.remove();
  }

  element.addEventListener('mouseenter', handleMouseEnter);
  element.addEventListener('mouseleave', handleMouseLeave);

  return {
    update(newText) {
      div.textContent = newText;
    },
    destroy() {
      div.remove();
      element.removeEventListener('mouseenter', handleMouseEnter);
      element.removeEventListener('mouseleave', handleMouseLeave);
    }
  };
}

let tooltipText = $state('Hover me');
</script>

<!-- Using with action (old way) -->
<button use:tooltip={tooltipText}>With action</button>

<!-- Converting to attachment (new way) -->
<button {@attach fromAction(tooltip, () => tooltipText)}>With attachment</button>

<!-- Without parameter -->
<button {@attach fromAction(autofocus)}>Auto-focused</button>
```

### Compiler API

**compile** - Compile Svelte component to JavaScript

```javascript
import { compile } from 'svelte/compiler';
import fs from 'fs';

const source = fs.readFileSync('App.svelte', 'utf-8');

const result = compile(source, {
  filename: 'App.svelte',
  name: 'App',
  generate: 'client', // 'client' | 'server'
  dev: false,
  css: 'injected', // 'injected' | 'external' | 'none'
  cssHash: ({ hash, css, name, filename }) => `svelte-${hash(css)}`,
  runes: true, // Enable runes (default in Svelte 5)
  warningFilter: (warning) => {
    // Ignore specific warnings
    return warning.code !== 'css-unused-selector';
  }
});

// Output
console.log('JavaScript:', result.js.code);
console.log('CSS:', result.css?.code);
console.log('Warnings:', result.warnings);
console.log('AST:', result.ast);

// Write compiled output
fs.writeFileSync('App.js', result.js.code);
if (result.css) {
  fs.writeFileSync('App.css', result.css.code);
}

// Handle warnings
result.warnings.forEach(warning => {
  console.warn(`${warning.filename}:${warning.start?.line} - ${warning.message}`);
});
```

**parse** - Parse Svelte component to AST

```javascript
import { parse } from 'svelte/compiler';

const source = `
<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>
`;

// Modern AST (Svelte 5+)
const modernAst = parse(source, { modern: true });
console.log('Modern AST:', JSON.stringify(modernAst, null, 2));

// Legacy AST
const legacyAst = parse(source, { modern: false });
console.log('Legacy AST:', legacyAst);

// Loose parsing (tries to parse invalid code)
const invalidSource = '<div>Unclosed';
const looseAst = parse(invalidSource, {
  modern: true,
  loose: true
});
console.log('Parsed despite errors:', looseAst);
```

**preprocess** - Transform component source before compilation

```javascript
import { preprocess } from 'svelte/compiler';

const source = `
<script lang="ts">
  let count: number = 0;
</script>

<style lang="scss">
  div {
    button {
      color: red;
    }
  }
</style>

<div>
  <button on:click={() => count++}>
    Count: {count}
  </button>
</div>
`;

const result = await preprocess(source, [
  {
    // TypeScript preprocessor
    script: ({ content, attributes }) => {
      if (attributes.lang !== 'ts') return;

      // Use TypeScript compiler or esbuild
      const code = transformTypeScript(content);
      return { code };
    }
  },
  {
    // SCSS preprocessor
    style: async ({ content, attributes }) => {
      if (attributes.lang !== 'scss') return;

      const { css } = await compileSass(content);
      return { code: css };
    }
  },
  {
    // Markup preprocessor (e.g., add JSDoc comments)
    markup: ({ content }) => {
      const enhanced = content.replace(
        /<script>/g,
        '<script>\n/** @component */\n'
      );
      return { code: enhanced };
    }
  }
], {
  filename: 'App.svelte'
});

console.log('Preprocessed code:', result.code);
console.log('Dependencies:', result.dependencies); // Files to watch
console.log('Source map:', result.map);
```

### Server-Side Rendering

**render** - Server-side render a component

```javascript
import { render } from 'svelte/server';
import App from './App.svelte';

// Basic rendering
const result = render(App, {
  props: {
    name: 'World',
    items: [1, 2, 3]
  }
});

const html = `
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  ${result.head}
</head>
<body>
  ${result.body}
</body>
</html>
`;

console.log(html);

// With context
const resultWithContext = render(App, {
  props: { userId: 123 },
  context: new Map([
    ['apiUrl', 'https://api.example.com'],
    ['theme', { mode: 'dark' }]
  ])
});

// With ID prefix (for multiple instances on same page)
const widget1 = render(Widget, {
  props: { title: 'Widget 1' },
  idPrefix: 'widget-1-'
});

const widget2 = render(Widget, {
  props: { title: 'Widget 2' },
  idPrefix: 'widget-2-'
});
```

### Component Snippets

**createRawSnippet** - Create snippet programmatically

```javascript
<script>
import { createRawSnippet } from 'svelte';

const dynamicSnippet = createRawSnippet((getName) => {
  const name = getName();

  return {
    render: () => `
      <div class="greeting">
        <h2>Hello, ${name}!</h2>
        <p>Welcome to our site.</p>
      </div>
    `,
    setup: (element) => {
      console.log('Snippet mounted:', element);
      element.classList.add('animated');

      // Return cleanup function
      return () => {
        console.log('Snippet unmounted');
      };
    }
  };
});

let userName = $state('Alice');
</script>

{@render dynamicSnippet(() => userName)}

<!-- Complex example with interactivity -->
<script>
const counter = createRawSnippet((getCount, onIncrement) => {
  return {
    render: () => {
      const count = getCount();
      return `
        <div>
          <p>Count: ${count}</p>
          <button data-action="increment">+</button>
        </div>
      `;
    },
    setup: (element) => {
      const button = element.querySelector('[data-action="increment"]');
      const handler = () => onIncrement();
      button.addEventListener('click', handler);

      return () => {
        button.removeEventListener('click', handler);
      };
    }
  };
});

let count = $state(0);
</script>

{@render counter(() => count, () => count++)}
```

### Easing Functions

**Built-in easing functions** - Animation timing functions

```javascript
import {
  linear,
  cubicOut,
  cubicInOut,
  quintOut,
  elasticOut,
  bounceOut
} from 'svelte/easing';
import { tweened } from 'svelte/motion';
import { fly } from 'svelte/transition';

const linearValue = tweened(0, { easing: linear });
const smoothValue = tweened(0, { easing: cubicOut });
const elasticValue = tweened(0, { easing: elasticOut });
const bounceValue = tweened(0, { easing: bounceOut });

// Available easing functions:
// linear, backIn, backOut, backInOut
// bounceIn, bounceOut, bounceInOut
// circIn, circOut, circInOut
// cubicIn, cubicOut, cubicInOut
// elasticIn, elasticOut, elasticInOut
// expoIn, expoOut, expoInOut
// quadIn, quadOut, quadInOut
// quartIn, quartOut, quartInOut
// quintIn, quintOut, quintInOut
// sineIn, sineOut, sineInOut
```

## Summary

Svelte provides a comprehensive and modern approach to building reactive web applications through its compilation-based architecture. The framework's APIs are designed to be intuitive and ergonomic, reducing boilerplate while maintaining full type safety. Core runtime functions like `mount`, `hydrate`, and the lifecycle hooks (`onMount`, `onDestroy`) give developers fine-grained control over component behavior. The context API enables clean dependency injection patterns, while the reactivity system—powered by runes (`$state`, `$derived`, `$effect`)—provides automatic tracking of dependencies with options for optimization through `untrack` and `getAbortSignal`. Async utilities like `tick` and `settled` help coordinate DOM updates and state changes. The experimental `fork` API enables off-screen state evaluation for advanced use cases like route preloading. The store APIs (`writable`, `readable`, `derived`) offer robust state management that integrates seamlessly with the runes system via `toStore` and `fromStore` bridges.

Beyond basic reactivity, Svelte includes a rich ecosystem of utilities for common frontend tasks. The reactive data structures (`SvelteMap`, `SvelteSet`, `SvelteDate`, `SvelteURL`, `SvelteURLSearchParams`) wrap built-in JavaScript objects with automatic change tracking. The `createSubscriber` API allows seamless integration of external event systems (WebSockets, IntersectionObserver, etc.) with Svelte's reactivity. Window properties (`scrollX`, `scrollY`, `innerWidth`, `innerHeight`, `online`, etc.) are available as reactive values through `svelte/reactivity/window`, making it trivial to build responsive and scroll-aware interfaces. Built-in transitions (`fade`, `fly`, `slide`, `scale`) and animations (`flip`, `crossfade`) make UI polish straightforward, while `Spring` and `tweened` enable physics-based and interpolated animations with minimal code. The action system (`use:action`) provides a powerful way to encapsulate reusable DOM behaviors, while the newer attachment API (`createAttachmentKey`, `fromAction`) offers a modern alternative for library authors. Event handling is enhanced with the `on` function that preserves proper event delegation ordering. On the tooling side, the compiler API (`compile`, `parse`, `preprocess`) enables custom build pipelines and editor integrations, while server-side rendering through the `render` function supports universal/isomorphic applications. This combination of compiler intelligence, reactive primitives, and practical utilities makes Svelte an excellent choice for projects ranging from simple widgets to complex full-stack applications.