{@render ...}

To render a snippet, use a {@render ...} tag.

{#snippet sum(a, b)}
	<p>{a} + {b} = {a + b}</p>
{/snippet}

{@render sum(1, 2)}
{@render sum(3, 4)}
{@render sum(5, 6)}

The expression can be an identifier like sum, or an arbitrary JavaScript expression:

{@render (cool ? coolSnippet : lameSnippet)()}

Optional snippets

If the snippet is potentially undefined — for example, because it’s an incoming prop — then you can use optional chaining to only render it when it is defined:

{@render children?.()}

Alternatively, use an {#if ...} block with an :else clause to render fallback content:

{#if children}
	{@render children()}
{:else}
	<p>fallback content</p>
{/if}