Svelte Logic Blocks: Template Control Flow

WHY IT EXISTS: Earlier frameworks forced developers to describe UI updates through runtime reconciliation, shipping a virtual DOM engine to the browser and paying its memory and performance tax. Svelte was designed around a compiler that understands your component at build time, so it needed a first-class way to express conditionals, loops, and async resolution directly inside HTML templates without relying on a client-side diffing algorithm.

THE MENTAL MODEL: Treat logic blocks as compile-time instructions that resemble HTML comments but evaporate before the page reaches the user. They are not components, elements, or runtime helpers. They are control-flow markers that tell the compiler exactly where to insert, remove, or reorder real DOM nodes. Because the compiler sees the block structure upfront, it generates precise surgical update code rather than a generic virtual tree comparison.

HOW IT WORKS: Svelte recognizes blocks prefixed with a hash symbol inside curly braces. An if block compiles into an update routine that mounts or destroys its nested nodes when the expression truthiness changes. An each block walks an array and produces keyed or unkeyed reconciliation logic to match data rows with DOM elements. An await block swaps between pending, resolved, and rejected markup sections as a promise changes state. A key block destroys and recreates its contents when an identifier changes, which is useful for resetting local component state or replaying transitions.

WHEN TO USE IT: Use logic blocks whenever the control flow is tightly coupled to the markup it governs. Use an if block for auth gates, feature flags, or error boundaries. Use an each block for any data-driven list, and always provide a key when list items contain form inputs or component state. Use an await block to colocate loading, success, and error UI with the asynchronous call that drives it. Use a key block when a route parameter or entity ID changes and you need a clean teardown rather than an incremental update.

WHEN NOT TO USE IT: Do not push complex business logic into template blocks; derive the needed values in the script section or a store and pass simple booleans or arrays to the template. Avoid deeply nesting multiple each and if blocks because flattened data structures in script land keep templates readable. Do not use an await block for synchronous values or for reactive streams that require backpressure handling, since it expects a single promise lifecycle.

ONE CANONICAL EXAMPLE: Consider a dashboard that fetches a list of alerts. The template uses an await block with a pending slot showing a shimmer row, a then slot containing an each block over the alerts array keyed by alert ID, and a catch slot for a retry banner. When the fetch resolves, Svelte replaces the shimmer with the list without manual node manipulation. If the user switches organizations, a key block wrapping the entire dashboard section destroys the old alert list and rebuilds it for the new context, preventing stale state from bleeding across sessions.