Ultimate Svelte 5 & SvelteKit Development Guide: From Beginner Setup to Advanced Mastery

Unlock the power of Svelte 5's revolutionary runes and SvelteKit's full-stack magic! This hands-on guide propels you from zero to hero with practical tips, code examples, and pro workflows.

Kickstarting Your Svelte 5 Adventure

Hey there, future Svelte wizard! 🚀 If you're diving into Svelte 5 and SvelteKit, you're in for a treat. Svelte 5 introduces runes – a game-changing reactivity system that makes your code cleaner, faster, and more intuitive. No more magic stores or confusing reactivity puzzles! Pair it with SvelteKit for seamless full-stack development, and you'll build blazing-fast apps that scale effortlessly.

This guide ramps up from absolute beginner basics to pro-level techniques. We'll cover setup, core concepts, real-world examples, and even migration tips from Svelte 4. Grab your code editor (shoutout to Cursor for AI-powered superpowers), and let's build something awesome!

Why Svelte 5 + SvelteKit Rocks

• Runes for Explicit Reactivity: $state, $derived, $effect – declare state like a boss.
• SvelteKit's Superpowers: File-based routing, SSR/SSG, API routes, and adapter flexibility.
• Tiny Bundle Sizes: Compile-time magic means less JS shipped to users.
• TypeScript-First: Full TS support out of the box.

Check the official repos for the latest: Svelte and SvelteKit.

Beginner Setup: Get Coding in Minutes

Prerequisites

• Node.js 18+
• Your favorite editor (VS Code or Cursor with Svelte extensions)
• Basic JS/TS knowledge

Create a New SvelteKit Project

Fire up your terminal and run:

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

Boom! Your app is live at http://localhost:5173. SvelteKit scaffolds everything: pages, layouts, and static assets.

Pro Tip: Choose Skeleton project, add TypeScript, ESLint, Prettier, and Playwright for testing. This sets a rock-solid foundation.

First Component with Runes

In src/routes/+page.svelte, replace the default with this rune-powered counter:

<script>
  let count = $state(0);
  
  $effect(() => {
    console.log(`Count is now: ${count}`);
  });
</script>

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

See? No reactive declarations needed. $state makes count reactive automatically. Click away and watch the effect log!

Intermediate: Mastering Runes Deep Dive

Runes are Svelte 5's secret sauce. They make reactivity explicit and portable – even outside components!

Key Runes Breakdown

• $state(primitive | object): Creates reactive state. Mutate deeply without $: hacks.

  let user = $state({ name: 'Alice', age: 30 });
  function birthday() { user.age++; } // Reactive everywhere!
  

• $derived(...dependencies): Computes derived values, re-runs only when deps change.

  let firstName = $state('John');
  let lastName = $state('Doe');
  let fullName = $derived(`${firstName} ${lastName}`);
  

• $effect.pre(...): Runs before DOM updates – perfect for measurements.

  let rect = $state({ width: 0 });
  let el;
  $effect.pre(() => {
    rect.width = el.getBoundingClientRect().width;
  });
  

• $props(): Define component props with types.

  let { name = $bindable('Guest'), onClick } = $props();
  

Real-World Example: Todo App Snippet

Build a reactive todo list:

<script>
  let todos = $state([
    { id: 1, text: 'Learn runes', done: false }
  ]);
  
  let newTodo = $state('');
  
  $effect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  });
</script>

<input bind:value={newTodo} />
<button onclick={() => {
  todos = [...todos, { id: Date.now(), text: newTodo, done: false }];
  newTodo = '';
}}>Add</button>

<ul>
  {#each todos as todo (todo.id)}
    <li>
      <input type="checkbox" bind:checked={todo.done} />
      <span class:done={todo.done}>{todo.text}</span>
    </li>
  {/each}
</ul>

<style>
  .done { text-decoration: line-through; }
</style>

This persists to localStorage and updates smoothly. Runes handle the reactivity magic!

Advanced: SvelteKit Full-Stack Features

Now level up with SvelteKit's routing and server-side powers.

File-Based Routing

• src/routes/+page.svelte: Home page
• src/routes/about/+page.svelte: /about
• src/routes/blog/[slug]/+page.svelte: Dynamic /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)
  };
}

In +page.svelte:

<script>
  export let data;
</script>

<h1>{data.post.title}</h1>

API Routes and Forms

src/routes/api/todos/+server.js:

import { json } from '@sveltejs/kit';

export async function GET() {
  return json([{ id: 1, text: 'Server todo' }]);
}

Forms use +page.server.js with actions for mutations.

SSR, SSG, and Adapters

• Prerender: export const prerender = true; for static pages.
• CSR Only: export const ssr = false;

Deploy anywhere with adapters:

npm i -D @sveltejs/adapter-vercel
# Edit svelte.config.js

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: { adapter: adapter() }
};

Migrating from Svelte 4

Upgrading? Piece of cake!

1. Update svelte.config.js: Enable runes mode.

   sveltekit: { runes: true }
   

2. Replace let count = 0; with let count = $state(0);
3. Convert stores to runes.
4. Update contexts to getContext('key') or setContext.
5. Test thoroughly!

Svelte Migration Guide has all deets.

Pro Tips & Best Practices

• TypeScript Everything: Use svelte-check and VS Code's Svelte extension (Language Tools).
• Testing: Vitest + Playwright.

  npm i -D vitest @sveltejs/vite-plugin-svelte
  

• Performance: Use $inspect for debugging runes graphs.
• Cursor Rules: For AI-assisted coding, add a .cursorrules file:

  Always use Svelte 5 runes for reactivity.
  Prefer $props() and $bindable.
  Follow SvelteKit conventions strictly.
  

Real-World App Idea: Build a dashboard with charts (use D3 or Chart.js). Fetch data server-side, render client-side with runes.

Deployment & Next Steps

• Vercel/Netlify: One-click deploys.
• Production: npm run build && npm start.

Explore more in the Svelte Discord and contribute to Svelte or SvelteKit.

You're now equipped to conquer Svelte 5! Build, experiment, and share your creations. What's your first project? Let's code! 💥

(Word count: ~1250)