A complete beginner's guide to Svelte and SvelteKit. From reactivity basics to full-stack applications, learn the framework that compiles away.

Discover why Svelte takes a fundamentally different approach to building UIs. Learn how the compiler-first philosophy eliminates runtime overhead and simplifies your code.

Learn the anatomy of a Svelte component file. Understand how script, markup, and styles work together in a single .svelte file.

Master Svelte's reactive system. Learn how reactive declarations, statements, and the $: syntax make state management effortless.

Learn how to pass data between Svelte components using props. Understand the export keyword, default values, and one-way data flow.

Handle DOM events and create custom component events in Svelte. Learn event modifiers, dispatching, and forwarding patterns.

Control what appears in your UI with Svelte's if blocks. Learn {#if}, {:else}, {:else if}, and when to use them.

Render lists efficiently with Svelte's each blocks. Learn about keyed iteration, destructuring, and handling empty states.

Master Svelte's bind directive for seamless form handling. Learn to bind inputs, selects, checkboxes, and component props.

Build flexible, reusable components with Svelte slots. Learn default slots, named slots, slot props, and composition patterns.