{@html ...}

{@html expression}

In a text expression, characters like < and > are escaped; however, with HTML expressions, they're not.

The expression should be valid standalone HTML — {@html "<div>"}content{@html "</div>"} will not work, because </div> is not valid HTML. It also will not compile Svelte code.

<div class="blog-post">
	<h1>{post.title}</h1>
	{@html post.content}
</div>

{@debug ...}

{@debug}
{@debug var1, var2, ..., varN}

The {@debug ...} tag offers an alternative to console.log(...). It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.

<script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
	};
</script>
{@debug user}
<h1>Hello {user.firstname}!</h1>

{@debug ...} accepts a comma-separated list of variable names (not arbitrary expressions).

<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}
<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

The {@debug} tag without any arguments will insert a debugger statement that gets triggered when any state changes, as opposed to the specified variables.

{@const ...}

{@const assignment}

The {@const ...} tag defines a local constant.

<script>
  export let boxes;
</script>
{#each boxes as box}
  {@const area = box.width * box.height}
	{box.width} * {box.height} = {area}
{/each}

{@const} is only allowed as direct child of {#each}, {:then}, {:catch}, <Component /> or <svelte:fragment />.

Svelte Tutorial Index

Svelte Tutorial Index

Svelte Template Syntax - 3

{@html ...}

{@debug ...}

{@const ...}