svelte

Topics in the source

• Svelte
• Quick Start
• When to Use
• Best Practices
• Runes (Svelte 5)
• Components
• Stores
• Performance

Compiler-driven reactive UIs with Svelte. Highly interactive frontends Small bundle sizes (compiled, no runtime) Teams wanting simple reactivity SvelteKit full-stack apps Use $state for reactive state Use $derived for computed values Use $props for component inputs Avoid direct mutation of $state from outside Compose small focused components Pass data with props; emit with callbacks Use snippets for reusable markup Keep stores for shared state Use writable/readable for shared state Derive with derived Subscribe minimally; unsubscribe Prefer runes for local state Compiler removes unused code automatically Use {#key} to recreate blocks Lazy-load routes and heavy components Virtualize long lists 1. Scaffold with SvelteKit. 2. Set up routing and a global layout. 3. Build pages with runes and components. 4. Extract shared logic into stores. 5. Add transitions and animations. 6. Load data with SvelteKit load functions. 7. Optimize with lazy loading. 8. Write tests with Vitest + Testing Library. 1. npm run build passes 2. State updates reflect in the DOM 3. Stores update subscribers correctly 4. No memory leaks from subscriptions 5. Bundle size stays small State not reactive: use $state,

This is an excerpt. Refer to the complete source and its current requirements.