Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Svelte 5, reuse a small piece of markup without creating another component by declaring a snippet with {#snippet name(parameters)}...{/snippet} and rendering it with {@render name(arguments)}. Snippets can also be passed to another component so its caller can customize the markup. They are component-scoped template constructs, not a universal replacement for components.
How do Svelte 5 snippets work?
A snippet is a named, reusable block of markup declared in a Svelte component. It can accept parameters, use values visible in its lexical scope, and be rendered wherever that snippet is in scope. The official Svelte snippet guide demonstrates extracting repeated figure markup into a parameterized snippet.
{#snippet figure(image)}
<figure>
<img src={image.src} alt={image.caption} />
<figcaption>{image.caption}</figcaption>
</figure>
{/snippet}
{#each images as image}
{#if image.href}
<a href={image.href}>{@render figure(image)}</a>
{:else}
{@render figure(image)}
{/if}
{/each}The snippet centralizes the figure’s structure; the conditional branches decide whether to wrap it in a link. Pass the current item as an argument when each rendering needs different data. Use {@render figure(image)} to render it—writing {figure} as though the snippet were an ordinary value is not the rendering syntax.
Free tools Windows power users keep installed
One-click scans. No signup required.
When should you use a snippet instead of a component?
Use a snippet when the repeated fragment belongs to a particular component’s template, or when a component should let its caller supply markup for a specific region. A separate component is usually clearer when the UI has independent responsibilities, state, or lifecycle, or needs broad reuse across component boundaries. That is a design choice, not a Svelte compiler rule.
#1 Best Overall
| Question | Snippet | Separate component |
|---|---|---|
| Where does reuse happen? | Within the defining component’s scope, or as markup passed to another component. | Across component boundaries as a distinct component. |
| Who controls the markup? | The defining component, or the caller when it supplies a snippet prop. | The component itself owns its template. |
| Does each rendering need different data? | Pass values through snippet parameters, such as the current item in a list. | Pass data through component props. |
| Is the UI independently responsible? | Best suited to a localized template fragment. | Often the clearer boundary for UI with its own responsibilities, state, or lifecycle. |
How do you pass a snippet to a Svelte component?
A caller can provide a snippet as a named prop, or declare one inside a component element to make it an implicit prop. Ordinary content between the component’s tags is received as the implicit children snippet. The receiving component chooses where and with what arguments to render supplied snippets. The Svelte snippet guide shows a table receiving header and row snippets.
Pass named snippets explicitly
For example, a caller can declare header and row snippets, then pass them to a table component with <Table data={fruits} {header} {row} />. The table can render the header with {@render header()} and render each row with {@render row(d)}, supplying the current item as an argument.
Use implicit snippets and children
A snippet declared inside a component element becomes an implicit prop of that component. Plain content such as <Button>click me</Button> is received as children; the child component reads it from $props() and displays it with {@render children()}. If the component also has content between its tags, do not pass a separate children prop.
Handle optional snippet props
If a snippet prop may be absent, render it conditionally or use optional chaining, for example {@render header?.()}. Use an {#if} branch when the missing-snippet case needs fallback markup.
How do you type snippet props with TypeScript?
Import the Snippet type from svelte. Use Snippet for a snippet with no parameters and Snippet<[T]> for one that takes a value of type T. The tuple describes the snippet’s arguments.
import type { Snippet } from 'svelte';
type Props<T> = {
data: T[];
row: Snippet<[T]>;
};In a generic table, typing data as T[] and row as Snippet<[T]> keeps the row argument aligned with the collection’s element type. See the Svelte snippet reference for snippet typing details.
What does snippet scope allow?
Snippets follow lexical visibility: a snippet can refer to declarations visible where it is defined. Snippets can also be nested, recursive, or mutually referential. A snippet declared inside a block is not necessarily available outside that block, so declare it in a scope that includes every place you intend to render it. The snippet reference documents these scope behaviors.
Exporting a snippet from a module script
A top-level snippet can be exported from <script module> only when it does not refer, directly or indirectly, to declarations in a non-module script. The Svelte documentation identifies this capability as requiring Svelte 5.5.0 or newer. Do not treat it as a way to export any component-local snippet unchanged.
How do snippets differ from slots?
For Svelte 5 content passing, use snippets and {@render ...}. Svelte deprecates slots in favor of snippets. Existing Svelte 4 projects may still use older slot APIs, so the right migration approach depends on the project’s version and current code. Consult the snippet guide and compiler error reference when resolving slot-related errors.
Do not mix legacy <slot> syntax and {@render} tags in the same component; the compiler reports an error for that combination. Also, combining legacy let: directives with the implicit children snippet render pattern is invalid. In that case, use a named snippet instead.
Common snippet rendering errors
- Trying to render a snippet as a value: use
{@render snippet()}, not{snippet}. - Rendering a missing optional prop: use
{@render snippet?.()}or an{#if}branch with fallback markup. - Rendering outside the snippet’s scope: move the declaration to a scope visible at each render location, or pass the markup across a component boundary as a snippet prop.
- Mixing slots and render tags: keep legacy slot syntax and Svelte 5 snippet rendering out of the same component.
The Svelte runtime error reference covers snippet rendering errors; the compiler error reference documents the slot/render-tag conflict.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
