> Canonical URL: https://codingcat.dev/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-markup # Svelte Basics - Sugar Syntax Markup | Intro to Svelte | CodingCat.dev Course [🧶 Intro to Svelte](/course/intro-to-svelte)Section 3.2 · Lesson 9 of 14[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/sveltekit-symbol-light.svg)![](/logos/tags/sveltekit-symbol-dark.svg)SvelteKit](/topic/sveltekit)[← Prev Lesson](/course/intro-to-svelte/lesson/svelte-basics-getting-started)[Next Lesson →](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-logic-each-block) # Svelte Basics - Sugar Syntax Markup ![](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=Zz_PnjFeomQ&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 9 / 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 gives you some nice features that allows you to write less code while still keeping all the functionality. You can easily write any JavaScript inside of your HTML by putting it in `{}` curly braces. Here we declared a variable called count set to zero and can display that value in our markup. This is really powerful, because not only can you use variables and call functions, you can dynamically change anything with a little bit of logic. Here we are saying if the count is equal to 1 display time, otherwise show the plural form times. Copied! 🐾 ``` count.svelte ``` Now let’s look at how Svelte handles events. Any DOM event can be used with the on colon on: directive. If we want to increase the count by clicking a button, then we only need to add the on:click to the button and write an inline function to increase the count by 1 each time it is clicked. It is important to note that Svelte is reactive by assignment. That means a variable needs to be assigned a new value in order to update. That equals is key here. The next bit of sugar syntax we’ll look at is Templating Blocks. Say you wanted to change a CSS class based on a variable like so: Copied! 🐾 ``` so: class= { active? 'active' : ''; } ``` This says that if the active variable is true, then give the element the class of active. If it is false, leave the class empty. Svelte takes this a step further though and makes it even easier with Copied! 🐾 ``` class:active={active} ``` If the name and the value match, you are able to shorten it even further to `class:active`. Copied! 🐾 ``` class: active; ``` We can do the same with an inline style Copied! 🐾 ``` style="color: red;" ``` can be dynamic with Copied! 🐾 ``` style:color={color} ``` or the shorthand if they match Copied! 🐾 ``` style: color; ``` ✏️ 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 Ma…LAYERED SYSTEM STACKARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven layered-stack diagram for Intro to Svelte: Svelte Basics - Sugar Syntax Markup: 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)[![The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](https://cdn.sanity.io/images/hfh83o0w/production/93736ccee5b8c088a202f319ce1223899a41f6bf-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-advanced-html-css-and-a11y)November 4, 2026[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[#Accessibility](/topic/a11y)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[+1](/course/odin-advanced-html-css-and-a11y) ### [The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](/course/odin-advanced-html-css-and-a11y) Build 60fps GPU-accelerated animations, multi-page Astro View Transitions, WCAG AAA focus rings, and accessible native and Popover components. [![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 9/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)