Sveltekit
Wiki covering everything Svelte and Sveltekit - runes, template syntax, built-in components, Context API, routing, data loading, forms, adapters, authentication, and more.
CALM Systems Philosophy A comprehensive mental model for building maintainable Svelte 5 apps — Contained, Automatic, Local, Minimal — covering state management, data flow, error handling, testing, and team practices.Hackpile Practical Guides Collection of practical, real-world Svelte app building guides covering image optimization, Claude AI setup for Svelte 5, tag organization, and the Hackpile knowledge collection.Integrations and Email Integration patterns in Svelte 5 and SvelteKit — Nodemailer for email sending, advanced email templates, ad campaign integrations, and general third-party integration approaches.Svelte-5-Template-Directives Svelte Built-in Components Special <svelte:*> elements in Svelte 5 that provide framework-level integration with the browser and document — window, body, head, document, element, boundary, options, and more.Svelte Built-in Modules The standard modules in Svelte 5 — svelte/store, svelte/motion, svelte/transition, svelte/animate, svelte/easing, svelte/action, svelte/events, svelte/compiler, svelte/legacy, svelte/reactivity, svelte/server, svelte/attachments — plus compiler and runtime error/warning diagnostics.Svelte CLI and Project Setup Setting up Svelte and SvelteKit projects — the sv CLI, project types, project structure, web standards integration, and SvelteKit API reference for @sveltejs/kit packages, CLI, and configuration.Svelte Context API Complete guide to Svelte 5's Context API — providing and consuming context, reactive patterns, class-based context, practical examples, and comparison with other patterns.Svelte Legacy Patterns Svelte 4 patterns replaced by runes in Svelte 5 — let declarations, reactive assignments, export let, $$props/$$restProps, on:event directives, slots, and the imperative component API — and their modern equivalents.Svelte Migration Guides Step-by-step migration from Svelte 4 to Svelte 5 (runes migration) and from SvelteKit 1 to SvelteKit 2, covering breaking changes, automated migration tools, and manual steps.Svelte Styling and CSS Svelte 5 styling features — scoped CSS, global styles, CSS custom properties, dynamic class and inline style binding, nested style elements.SvelteKit Adapters and Deployment Deployment adapters for SvelteKit — adapter-auto, adapter-node, adapter-static, adapter-vercel, adapter-netlify, adapter-cloudflare, adapter-cloudflare-workers, writing custom adapters, and SPA mode.SvelteKit Advanced Features Advanced SvelteKit features covering performance optimization, SEO, accessibility, images, icons, observability, packaging, debugging, integrations, FAQs, and additional resources.SvelteKit Environment and Modules SvelteKit environment variable modules ($env/static/private, $env/static/public, $env/dynamic/private, $env/dynamic/public), the $lib alias, $service-worker module, and server-only module restrictions.SvelteKit Error Handling Error handling architecture in SvelteKit — expected errors, unexpected errors, error pages, error boundaries, redirects, and structured error patterns at route and application boundaries.SvelteKit Form Actions Handling forms in SvelteKit — the actions API, progressive enhancement with use:enhance, validation, error handling, redirects, and multipart form data.SvelteKit Hooks and Server Runtime Server runtime hooks in SvelteKit — hooks.server.js and hooks.client.js, the handle function, handleFetch, handleError, locals, and server-side middleware patterns.SvelteKit Navigation Client-side navigation in SvelteKit — anchor navigation, programmatic navigation, preloading, link options, shallow routing, and the $app/navigation and $app/stores modules.SvelteKit Page Options Configuring page rendering behavior in SvelteKit — prerender, ssr, csr, trailingSlash — plus project configuration, project types, and project structure.Svelte 5 Runes The five core runes ($state, $derived, $effect, $props, $bindable) plus $inspect and $host — Svelte 5's unified reactivity system.Svelte 5 Template Syntax Svelte 5 template blocks ({#if}, {#each}, {#key}, {#await}, {#snippet}) and tags ({@render}, {@html}, {@attach}, {@const}, {@debug}) for declarative UI logic.Svelte Motion The Svelte Motion animation library for Svelte 5 — motion component, hooks (useAnimate, useScroll, useSpring, useTime, useInView, etc.), AnimatePresence, variants, layout animations, gestures, drag, pan, motion values, and optimized appear animations.SvelteKit Authentication Authentication patterns in SvelteKit — session cookies, JWT, OAuth, Lucia auth, hook-based session validation, protected routes, and server-side authentication architecture.SvelteKit Data Loading Comprehensive guide to SvelteKit load functions — universal vs server load, page vs layout data, using parent, parallel loading, fetch, streaming, cookies and headers, URL data, invalidation, and re-running load functions.SvelteKit Routing Filesystem-based routing in SvelteKit — +page.svelte, +layout.svelte, +server.js, route parameters, optional/rest parameters, route groups, parameter matchers, advanced routing patterns, and link options.SvelteKit TypeScript TypeScript integration in SvelteKit — $types for typed load functions, app.d.ts declarations (App.Locals, App.PageData, App.PageState, App.Platform, App.Error), and type-safe patterns across routing boundaries.