Svelte

Svelte compiles your components to efficient JavaScript at build time. No virtual DOM, no runtime framework code - just the DOM operations your app actually needs.

Overview

• What: UI component framework (compiler, not a runtime library)
• Install: npm create svelte@latest my-app (creates a SvelteKit project)
• File extension: .svelte (HTML-like with <script>, markup, and <style>)
• Reactivity: Runes ($state, $derived, $effect) in Svelte 5+
• Scoped styles: CSS in <style> is scoped to the component by default

Contents

• Concepts - How Svelte works
  • Reactivity - Runes, state, derived values, effects
  • Components - Props, events, slots, lifecycle
• Quickstart - Get started
  • First App - Create and run a Svelte project
• Deep Dives - Advanced patterns
• Notes - Tips and gotchas

Resources

• Svelte docs
• Svelte tutorial
• Svelte REPL