Svelte

Svelte compiles declarative components into minimal vanilla JavaScript, utilizing explicit Runes for fine-grained reactivity without Virtual DOM overhead.

When to Use

• High Performance defaults: Svelte apps are tiny and fast by default.
• Embedded Apps: Great for widgets/embeds because of small bundle size.
• Simplicity: HTML, CSS, and JS in one file, with very little boilerplate.

Quick Start

<script>
  let count = $state(0);
  let double = $derived(count * 2);

  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>
  Count: {count} / Double: {double}
</button>

Core Concepts

Runes

Svelte 5 reactivity markers.

• $state: Declares reactive state.
• $derived: Declares a value that updates when dependencies change.
• $effect: Runs code when dependencies change (side effects).
• $props: Declares component props.

Snippets

Reusable chunks of markup within a component.

{#snippet figure(src, caption)}
  <figure>
    <img {src} alt={caption} />
    <figcaption>{caption}</figcaption>
  </figure>
{/snippet}

{@render figure(imageSrc, "A nice image")}

Common Patterns

Svelte 5 Runes for Fine-Grained Reactive State

Problem: Legacy Svelte 3/4 let bindings and $: labels lack universal TypeScript ergonomics across .svelte.ts modules.

Solution: Use modern Svelte 5 Runes ($state, $derived, $effect):

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

  $effect(() => {
    console.log(`Count changed to: ${count}`);
  });
</script>

<button on:click={() => count++}>
  Count: {count} (Double: {double})
</button>

Best Practices

Do:

• Use Runes: Migrate from legacy let syntax to $state and $derived for explicit reactivity.
• Use onclick: Svelte 5 prefers native attributes (onclick) over on:click directives.
• Use Snippets: Replace slots with Snippets for better type safety and flexibility.

Don't:

• Rely on auto-reactivity (Legacy): In Svelte 5 settings, opting into Runes disables the "magic" assignment tracking of Svelte 3/4.
• Mutate state directly across component boundaries without explicit callbacks or binding props.

Troubleshooting

References

• Svelte 5 Preview
• Svelte Documentation