Sveltejs Academy · Lesson

Render Props with Snippets

Pass rendering logic as snippet props to invert control and increase flexibility.

Render Props Pattern

Render props let a parent supply rendering logic to a child. In Svelte 5, snippets are the natural fit.

The parent defines a snippet and passes it as a prop.

<!-- Parent -->
{#snippet item(thing)}
  <li>{thing.name}</li>
{/snippet}
<List items={data} {item} />