> Canonical URL: https://codingcat.dev/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-logic-each-block # Svelte Basics - Sugar Syntax Logic and Each Blocks | Intro to Svelte | CodingCat.dev Course [šŸ§¶ Intro to Svelte](/course/intro-to-svelte)Section 3.3 Ā· Lesson 10 of 14[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[![](/logos/tags/sveltekit-symbol-light.svg)![](/logos/tags/sveltekit-symbol-dark.svg)SvelteKit](/topic/sveltekit)[ā† Prev Lesson](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-markup)[Next Lesson ā†’](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-await-and-key-blocks) # Svelte Basics - Sugar Syntax Logic and Each Blocks ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/5e283fb0d0ffe55c9c179aca147a1c03dd88d599-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTubeā†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ā†—](https://www.youtube.com/watch?v=tEvjQygygcA&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 10 / 14Course Lessons Outlineā–¾1Section 1 - [1.1VSCode Extensions and Settings](/course/intro-to-svelte/lesson/svelte-fundamentals-vscode-extensions-and-settings) 2Fundamentals - [2.1Fundamentals - What is Svelte](/course/intro-to-svelte/lesson/fundamentals-what-is-svelte) - [2.2Fundamentals - Why SvelteKit](/course/intro-to-svelte/lesson/fundamentals-why-sveltekit) - [2.3Fundamentals - Benefits of SvelteKit](/course/intro-to-svelte/lesson/fundamentals-benefits-of-sveltekit) - [2.4Fundamentals - Performance](/course/intro-to-svelte/lesson/fundamentals-performance) - [2.5Fundamentals - File Based Routing](/course/intro-to-svelte/lesson/fundamentals-file-based-routing) - [2.6Svelte Fundamentals - Styling in Svelte](/course/intro-to-svelte/lesson/fundamentals-styling-in-sveltekit) 3Svelte Basics - [3.1Svelte Basics](/course/intro-to-svelte/lesson/svelte-basics-getting-started) - [3.2Svelte Basics - Sugar Syntax Markup](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-markup) - [3.3Svelte Basics - Sugar Syntax Logic and Each Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-logic-each-block) - [3.4Svelte Basics - Sugar Syntax Await and Key Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-await-and-key-blocks) - [3.5Svelte Basics - Reactivity](/course/intro-to-svelte/lesson/svelte-basics-reactivity) - [3.6Svelte Basics - Props](/course/intro-to-svelte/lesson/svelte-basics-props) - [3.7Svelte Basics - Slots](/course/intro-to-svelte/lesson/svelte-basics-slots) Svelte provides 3 different kinds of templating blocks to make it easier to conditionally render something in your markup. These are the Logic blocks (if, else if, and else), the Each block for looping over arrays, Await for when you are waiting on async data, and Key to allow a transition to be played each time and expression changes. ## If, Else, and Else If We can easily show or hide something in Svelte by creating a variable in the script tag and using Svelteā€™s if block, only show the content if the statement is truthy. I know thatā€™s a funny word, but it just means that something resolves to true and falsey refers to false values. You can also add multiple statements using else if or an else block. This time we set the count to 0 and display different text based on the value of count. ## Each For each loops can be a bit cumbersome to write in JavaScript and inside your markup it makes it difficult to tell what is going on. Svelte gives us an each block that will loop over an array. Here we created an array of different cat types and then in each loop we just say each cats as cat and can then use each value inside our list item. Iā€™m using an image from Cat as a Service to dynamically grab a different cat by our type and setting the alt text to be each type followed by the word cat. Here is what is shown by this block, a cute cat, a fluffy cat, and a funny cat. Next weā€™ll talk about the Await block. āœļø Visual Architecture Diagram ## how this course connects together. Follow AJ through the layered stack topology from input contract to production output. Letā€™s build it!āœļø Architecture Diagram: Intro to Svelte: Svelte Basics - Sugar Syntax Loā€¦LAYERED SYSTEM STACKARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven layered-stack diagram for Intro to Svelte: Svelte Basics - Sugar Syntax Logic and Each Blocks: Svelte Basics -> Intro to Svelte -> Verified Production Artifact.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![Remotion Skills: Teaching AI Agents to Build Videos the Right Way](https://cdn.sanity.io/images/hfh83o0w/production/1641179c642070c4916adc25ed918f587fe9a056-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/remotion-skills-ai-agents)November 4, 2026[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react) ### [Remotion Skills: Teaching AI Agents to Build Videos the Right Way](/course/remotion-skills-ai-agents) Install and customize remotion-dev/skills so Claude Code, Cursor, and Google Antigravity write deterministic, well-paced React video compositions on the first try. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Flagship 1: Programmatic Video with React, Remotion & Agent Skills](https://cdn.sanity.io/images/hfh83o0w/production/54b4fc00460fa6d05480e1e481b2048c7cce1325-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/programmatic-video-react-remotion-agent-skills)November 4, 2026[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react) ### [Flagship 1: Programmatic Video with React, Remotion & Agent Skills](/course/programmatic-video-react-remotion-agent-skills) Master declarative React video composition with Remotion and Remotion Skills. Learn how to teach AI coding agents to render multi-aspect-ratio 60fps product launch videos without timer drift. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/intro-to-svelte) ## Intro to Svelte 10/141 ### Section 1 - [1.1VSCode Extensions and Settings](/course/intro-to-svelte/lesson/svelte-fundamentals-vscode-extensions-and-settings) 2 ### Fundamentals - [2.1Fundamentals - What is Svelte](/course/intro-to-svelte/lesson/fundamentals-what-is-svelte) - [2.2Fundamentals - Why SvelteKit](/course/intro-to-svelte/lesson/fundamentals-why-sveltekit) - [2.3Fundamentals - Benefits of SvelteKit](/course/intro-to-svelte/lesson/fundamentals-benefits-of-sveltekit) - [2.4Fundamentals - Performance](/course/intro-to-svelte/lesson/fundamentals-performance) - [2.5Fundamentals - File Based Routing](/course/intro-to-svelte/lesson/fundamentals-file-based-routing) - [2.6Svelte Fundamentals - Styling in Svelte](/course/intro-to-svelte/lesson/fundamentals-styling-in-sveltekit) 3 ### Svelte Basics - [3.1Svelte Basics](/course/intro-to-svelte/lesson/svelte-basics-getting-started) - [3.2Svelte Basics - Sugar Syntax Markup](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-markup) - [3.3Svelte Basics - Sugar Syntax Logic and Each Blocksā–¶](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-logic-each-block) - [3.4Svelte Basics - Sugar Syntax Await and Key Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-await-and-key-blocks) - [3.5Svelte Basics - Reactivity](/course/intro-to-svelte/lesson/svelte-basics-reactivity) - [3.6Svelte Basics - Props](/course/intro-to-svelte/lesson/svelte-basics-props) - [3.7Svelte Basics - Slots](/course/intro-to-svelte/lesson/svelte-basics-slots) @CodingCatDev on YouTube62.5K / 100K Subscribe for new course lessons and architecture deep dives every week. [Subscribe for New Lessons ā†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)