Skip to main content

HTML doesn’t have a way of expressing logic, like conditionals and loops. Svelte does.

To conditionally render some markup, we wrap it in an if block. Let’s add some text that appears when count is greater than 10:

App
<button onclick={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

{#if count > 10}
	<p>{count} is greater than 10</p>
{/if}

Try it — update the component, and click on the button a few times.

Edit this page on GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	let count = $state(0);
 
	function increment() {
		count += 1;
	}
</script>
 
<button onclick={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>