Svelte

Compiler-driven reactive UIs with Svelte.

Quick Start

npm create svelte@latest my-app
cd my-app && npm install && npm run dev

When to Use

• Highly interactive frontends
• Small bundle sizes (compiled, no runtime)
• Teams wanting simple reactivity
• SvelteKit full-stack apps

Best Practices

Runes (Svelte 5)

• Use `$state` for reactive state
• Use `$derived` for computed values
• Use `$props` for component inputs
• Avoid direct mutation of `$state` from outside

Components

• Compose small focused components
• Pass data with props; emit with callbacks
• Use snippets for reusable markup
• Keep stores for shared state

Stores

• Use writable/readable for shared state
• Derive with `derived`
• Subscribe minimally; unsubscribe
• Prefer runes for local state

Performance

• Compiler removes unused code automatically
• Use `{#key}` to recreate blocks
• Lazy-load routes and heavy components
• Virtualize long lists

Dependencies

npm create svelte@latest my-app -- --template demo
npm i svelte

Examples

<script lang="ts">
  let count = $state(0);
  const doubled = $derived(count * 2);
</script>

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

<script>
  let { title, done = false } = $props();
</script>

<h2>{title}</h2>
{#if done}<span>done</span>{/if}

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

  const cart = writable<string[]>([]);
  function add(item: string) {
    cart.update(items => [...items, item]);
  }
</script>

{#each $cart as item}<p>{item}</p>{/each}

<!-- Transitions and keyed blocks -->
<script>
  import { fade } from "svelte/transition";
  let items = $state([1, 2, 3]);
</script>

{#each items as item, i (item)}
  <p transition:fade>{item}</p>
{/each}

Step-by-Step

1. Scaffold with SvelteKit.

2. Set up routing and a global layout.

3. Build pages with runes and components.

4. Extract shared logic into stores.

5. Add transitions and animations.

6. Load data with SvelteKit load functions.

7. Optimize with lazy loading.

8. Write tests with Vitest + Testing Library.

Validation

1. `npm run build` passes

2. State updates reflect in the DOM

3. Stores update subscribers correctly

4. No memory leaks from subscriptions

5. Bundle size stays small

Troubleshooting

• State not reactive: use `$state`, not plain `let`.
• Store leaks: unsubscribe in `onDestroy`.
• SSR mismatch: avoid browser-only APIs in load.