Svelte Tutorial — Compile-Time Framework

Svelte compiles components to vanilla JavaScript — no Virtual DOM, minimal bundle size, intuitive syntax. Unlike React and Vue, which ship a runtime framework to the browser, Svelte shifts the work to the build step. The result is a smaller bundle, faster rendering, and simpler code. Reactivity is straightforward — assigning to a variable automatically updates the DOM.

Basic Component¶

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

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

Svelte 5 introduces runes — a new reactivity system with explicit $state(), $derived(), and $effect(). Compared to the earlier implicit $: syntax, runes are clearer and work better with TypeScript. Components are simple .svelte files combining HTML, CSS, and JavaScript with automatic style scoping.

SvelteKit¶

// src/routes/+page.server.ts — server load
export async function load({ fetch }) {
  const posts = await fetch('/api/posts').then(r => r.json());
  return { posts };
}

<!-- src/routes/+page.svelte -->
{#each data.posts as post}
  <h2>{post.title}</h2>
{/each}

SvelteKit is the fullstack framework for Svelte — server-side rendering, API routes, file-based routing, and deployment to the edge (Cloudflare Workers, Vercel Edge). Load functions run on the server and pass data to components. Form actions enable progressive enhancement of forms without client-side JavaScript.

Why Svelte¶

Key advantages over React/Vue: smaller bundle size (no runtime), faster DOM operations (direct manipulation without diffing), simpler state management (stores instead of Redux/Pinia), and less boilerplate code. Svelte has a growing ecosystem and strong community, though smaller than React.

Key Takeaway¶

Svelte 5 with runes brings simpler reactivity. SvelteKit for fullstack applications. Minimal bundle size and excellent developer experience make Svelte a strong candidate for new projects.