Svelte 5 snippets and slots: reusable content without components

In Svelte 5 a snippet is markup with a name: you declare it with {#snippet}, run it with {@render}, and it takes the place of slots without going through a component.

A snippet is a markup function

The declaration takes parameters and the render receives them. A snippet stays in the scope where it is written, so it sees the component variables without taking them as props.

npx sv create snippets-demo

{#snippet card(title, body)}
  
    {title}
    {body}
  
{/snippet}

{@render card("Invoice", "Due on 12 May")}

To hand a snippet to a child you declare it as a prop, typed Snippet from svelte: it is a function, so you pass it as a function and not as a string.

  import type { Snippet } from "svelte";

  let { header, children }: { header: Snippet; children: Snippet } = $props();


{@render header()}
{@render children()}

children replaces the default slot

Content written between a component's tags arrives as the implicit children snippet. When the parent passes nothing the child finds no value, and the optional render {@render children?.()} avoids the error.

What changes from slots

The limitation to plan for

A snippet is not a component: it has no own state, no lifecycle, and you cannot import it from a .js file. It lives in the markup that declares it, so whoever receives it cannot subscribe to its changes without re-rendering.

Mistakes you will see

• Writing {@render card} without parentheses: the render wants the call, not the function.
• Looking for slot="header" in the parent: with snippets the name is a prop, not an attribute.
• Declaring the snippet inside an {#if} and using it outside: the declaration only holds in that block.
• Passing a snippet to a component that still uses <slot />: the two syntaxes do not talk.

The Svelte components in the catalogue already use this form: flowbite-svelte and svelte-bits install as source, and the faq block shows the case where a snippet is enough. Runes are in Svelte 5 runes, route files in routing and layouts in SvelteKit, the comparison in Svelte vs React.