> Canonical URL: https://codingcat.dev/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-await-and-key-blocks # Svelte Basics - Sugar Syntax Await and Key Blocks | Intro to Svelte | CodingCat.dev Course [🧶 Intro to Svelte](/course/intro-to-svelte)Section 3.4 · Lesson 11 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-logic-each-block)[Next Lesson →](/course/intro-to-svelte/lesson/svelte-basics-reactivity) # Svelte Basics - Sugar Syntax Await and Key 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=ADqGFpSUp8o&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 11 / 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) ## Await If we have asynchronous data coming in from an outside source that we need to wait on, we can “await” that data and do something with it using an await block. We can set a pending state or omit it completely and only show this markup once the data is received. We can also catch any errors that happen and display that to the user. ## Key The last templating block in Svelte is the key block. A key block is special to Svelte because it works in conjunction with Svelte’s built in animations and transitions. This is a bit more complex, but let’s break it down. We are importing the fly transition that comes out of the box with Svelte and setting the count to 0 in the script tag. In the markup, we have a p tag with the text Count and then our key block. The key block is going to rerender the element inside of it each time count changes so that the transition plays. The span tag is styled with display: inline-block to make it appear next to the Count text. Next we are using the in directive, which plays as the element comes in, with the fly transition that we want to start up 20 px from where it ends. In the span tag, we are displaying the value of count. Here is the final rendered transition. ✏️ 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 Aw…LAYERED SYSTEM STACKARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven layered-stack diagram for Intro to Svelte: Svelte Basics - Sugar Syntax Await and Key Blocks: Svelte Basics -> Intro to Svelte -> Verified Production Artifact.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](https://cdn.sanity.io/images/hfh83o0w/production/fce6fcae58667ff3143db133eb6b57fbd9ec471f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-web-development-foundations)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[+1](/course/odin-web-development-foundations) ### [The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations) Master the complete Odin Project Foundations path modernized for 2026: how the web works, semantic HTML5, CSS Box Model & Flexbox, and JavaScript DOM fundamentals. [![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)[![yt-dlp & Librosa: Reference Visual Grammar & 120 BPM Beat Extraction](https://cdn.sanity.io/images/hfh83o0w/production/929512d720fe800ce081851546bae7d1340e6c25-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/yt-dlp-librosa-reference-beat-extraction)November 4, 2026[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[![](/logos/tags/python-symbol-light.svg)![](/logos/tags/python-symbol-dark.svg)Python](/topic/python) ### [yt-dlp & Librosa: Reference Visual Grammar & 120 BPM Beat Extraction](/course/yt-dlp-librosa-reference-beat-extraction) Never animate in a vacuum. Learn how to pull reference clips with yt-dlp, slice 0.5s grammar frames into `style_guide.md`, and extract exact musical beats (`beats.json`) with Librosa. [![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 11/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)