Master Svelte 5 & SvelteKit: Complete Development Guide with Runes, Routing, and Real-World Tips

Dive into Svelte 5's revolutionary Runes and supercharge your SvelteKit apps! This guide covers setup, reactivity magic, routing, forms, and pro tips for blazing-fast development.

Ready to Level Up Your Frontend Game with Svelte 5 and SvelteKit?

Ever wondered why developers are buzzing about Svelte 5? It's not just another update—it's a game-changer with Runes, a fresh take on reactivity that makes your code more explicit, portable, and powerful. Paired with SvelteKit, the ultimate full-stack framework, you're set for building lightning-fast web apps. Let's explore every nook and cranny, from setup to advanced patterns, with hands-on examples that'll have you coding like a pro!

What Makes Svelte 5 a Reactivity Revolution?

Question: How does Svelte 5 ditch the old magic for explicit power?

In previous versions, Svelte's compiler handled reactivity behind the scenes with $: labels. Svelte 5 flips the script with Runes—symbols like $state, $derived, and $effect that you explicitly declare. This means reactivity works anywhere in JavaScript, not just in .svelte files. No more context limitations; take your reactive logic to plain JS modules!

Why does this rock? It's more predictable, easier to debug, and scales like a dream for complex apps. Check out the official Svelte repo for the source of all this innovation.

Example: Basic State with $state

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

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

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

Boom! count is reactive. Update it anywhere, and the DOM updates surgically. Add value: This explicitness prevents subtle bugs from implicit dependencies.

Setting Up Your SvelteKit Playground: Let's Get Building!

Curious about starting fresh?

Fire up a new project with one command:

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

SvelteKit scaffolds everything: routing, SSR, adapters for deployment. During setup, pick Skeleton project, enable TypeScript, and opt into ESLint and Prettier for clean code. Real-world tip: For production, choose the adapter-auto for Vercel/Netlify magic.

Explore the SvelteKit GitHub for deep dives into its packages.

Unlocking Runes: The Building Blocks of Reactivity

What are Runes, and how do you wield them?

Runes are Svelte's explicit reactivity primitives. Here's the trio:

1. $state: Creates reactive state.

   // In a .svelte file or .svelte.js
   let name = $state('World');
   name = 'Svelte 5'; // Triggers updates!
   

   Pro tip: Nested objects? Use $state.raw() for deep reactivity control.

2. $derived: For computed values that auto-update.

   <script>
     let a = $state(2);
     let b = $state(3);
     let sum = $derived(a + b);
   </script>
   <p>Sum: {sum}</p> <!-- Always fresh! -->
   

   Exploration: Dependencies are tracked precisely—no stale data nightmares.

3. $effect: Side effects on steroids (pre, post, root, track).

   <script>
     let count = $state(0);
     $effect.pre(() => {
       document.title = `Count: ${count}`;
     });
   </script>
   

   Variants:

   • $effect.root(): Runs once, no deps.
   • $effect.pre(): Runs before DOM updates.
   • $effect.track(fn): Manual tracking.

Hands-on Challenge: Build a counter with localStorage persistence:

<script>
  let count = $state(0);
  $effect(() => {
    localStorage.setItem('count', count.toString());
  });
</script>

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

Props, Events, and Components: Seamless Communication

How do components talk in Svelte 5?

Props are reactive by default if they use $props(). Events? Just dispatch('eventName').

Parent:

<Child count={count} on:update={(e) => count = e.detail} />

Child:

<script>
  let { count } = $props();
  function increment() {
    dispatch('update', count + 1);
  }
</script>
<button onclick={increment}>Child: {count}</button>

Bonus: $bindable() for two-way binding. e.g., let count = $bindable(0);—parent and child stay in sync effortlessly.

Stores: Global State Supercharged

Need app-wide state?

Svelte stores evolve with Runes:

// stores.js
let count = $state(0);
export { count };

Import anywhere: import { count } from './stores.js';. Readable/writable stores use $state.frozen() for immutability.

Real-world: User auth store persists across pages.

Routing Mastery in SvelteKit

Question: How does file-based routing make life easy?

src/routes/+page.svelte = /, src/routes/blog/[slug]/+page.svelte = /blog/my-post.

Load data with +page.js:

// src/routes/blog/[slug]/+page.js
export async function load({ params }) {
  return { post: await fetchPost(params.slug) };
}

Layouts: +layout.svelte wraps pages. Error handling? +error.svelte.

Forms & Actions: Server-side validation FTW!

<!-- +page.svelte -->
<form method="POST">
  <input name="email" />
  <button>Submit</button>
</form>

<!-- +page.server.js -->
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    // Validate & save
    return { success: true };
  }
};

Progressive enhancement: Works without JS!

Deployment and Optimization Hacks

Ready to ship?

npm run build + npm run preview. Adapters: adapter-vercel, etc. Prerender with +page.js: export const prerender = true;.

Perf tips:

• Use $derived over getters.
• Snapshot blocks for islands architecture.
• Vite config for custom builds.

Migration: From Svelte 4 to 5 Without Tears

Worried about upgrades?

Codemod it! npx sv migrate svelte-5. Manual steps:

• Replace $: with Runes.
• Update props: $props().
• Test reactivity.

Full guide in SvelteKit repo.

Pro Patterns:

• Islands: <div use:enhance> for interactivity.
• Snapshots: $state.snapshot() for props passing.
• Contexts: $context() for DI.

Why Svelte 5 + Kit = Your New Favorite Stack?

Small bundle, zero runtime, full-stack joy. Build a todo app? Try this starter:

<!-- App.svelte -->
<script>
  let todos = $state([]);
  $effect(() => {
    todos = JSON.parse(localStorage.getItem('todos') || '[]');
  });
</script>
<ul>
  {#each todos as todo}
    <li>{todo.text}</li>
  {/each}
</ul>

You've got the tools—now build epic apps! Dive deeper via Svelte and experiment.