{@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}