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

## 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](https://cursor.com) 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](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit). ## 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: ```bash 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: ```svelte <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. ```svelte let user = $state({ name: 'Alice', age: 30 }); function birthday() { user.age++; } // Reactive everywhere! ``` - **$derived(...dependencies)**: Computes derived values, re-runs only when deps change. ```svelte let firstName = $state('John'); let lastName = $state('Doe'); let fullName = $derived(`${firstName} ${lastName}`); ``` - **$effect.pre(...)**: Runs before DOM updates – perfect for measurements. ```svelte let rect = $state({ width: 0 }); let el; $effect.pre(() => { rect.width = el.getBoundingClientRect().width; }); ``` - **$props()**: Define component props with types. ```svelte let { name = $bindable('Guest'), onClick } = $props(); ``` **Real-World Example: Todo App Snippet** Build a reactive todo list: ```svelte <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**: ```js // src/routes/blog/[slug]/+page.js export async function load({ params }) { return { post: await fetchPost(params.slug) }; } ``` In `+page.svelte`: ```svelte <script> export let data; </script> <h1>{data.post.title}</h1> ``` ### API Routes and Forms `src/routes/api/todos/+server.js`: ```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: ```bash npm i -D @sveltejs/adapter-vercel # Edit svelte.config.js ``` ```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. ```js 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](https://svelte.dev/docs/svelte/migration-guide) has all deets. ## Pro Tips & Best Practices - **TypeScript Everything**: Use `svelte-check` and VS Code's Svelte extension ([Language Tools](https://github.com/sveltejs/language-tools)). - **Testing**: Vitest + Playwright. ```bash 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: ```md 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](https://d3js.org) or [Chart.js](https://www.chartjs.org)). 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](https://discord.com/invite/svelte) and contribute to [Svelte](https://github.com/sveltejs/svelte) or [SvelteKit](https://github.com/sveltejs/kit). 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)* <div style="text-align: center; margin-top: 2rem;"> <a href="https://cursor.directory/svelte5-sveltekit-development-guide" target="_blank" rel="noopener noreferrer" class="view-full-resource-btn" style="display: inline-block; background-color: #f97316; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background-color 0.2s;">View Full Resource</a> </div>