Snippets & Children

React passes UI content to components via children (JSX between tags) or render props (functions that return JSX). Svelte 5 replaces the old <slot> system with snippets — reusable, named, parameterized template fragments defined with {#snippet} and rendered with {@render}. The default snippet is still called children, so basic usage feels immediately familiar.

Default children

// Card.jsx
function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage:
<Card>
  <p>Hello from inside!</p>
</Card>

<!-- Card.svelte -->
<script>
  let { children } = $props();
</script>

<div class="card">
  {@render children()}
</div>

<!-- Usage in parent: -->
<!-- <Card><p>Hello from inside!</p></Card> -->

The children prop is a snippet function — you must call it with {@render children()}. React’s {children} is a value; Svelte’s children is a callable snippet.

Named snippets (like named slots / render props)

// Dialog.jsx
function Dialog({ header, body, footer }) {
  return (
    <div className="dialog">
      <div className="dialog-header">{header}</div>
      <div className="dialog-body">{body}</div>
      <div className="dialog-footer">{footer}</div>
    </div>
  );
}

// Usage:
<Dialog
  header={<h2>Confirm</h2>}
  body={<p>Are you sure?</p>}
  footer={<button>OK</button>}
/>

<!-- Dialog.svelte -->
<script>
  let { header, body, footer } = $props();
</script>

<div class="dialog">
  <div class="dialog-header">{@render header()}</div>
  <div class="dialog-body">{@render body()}</div>
  <div class="dialog-footer">{@render footer()}</div>
</div>

<!-- Usage in parent: -->
<!--
<Dialog>
  {#snippet header()}<h2>Confirm</h2>{/snippet}
  {#snippet body()}<p>Are you sure?</p>{/snippet}
  {#snippet footer()}<button>OK</button>{/snippet}
</Dialog>
-->

Snippets with parameters (render props pattern)

Snippets can receive arguments — this replaces the React render-prop pattern cleanly:

// List.jsx
function List({ items, renderItem }) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

// Usage:
<List
  items={fruits}
  renderItem={fruit => <strong>{fruit}</strong>}
/>

<!-- List.svelte -->
<script>
  let { items, renderItem } = $props();
</script>

<ul>
  {#each items as item}
    <li>{@render renderItem(item)}</li>
  {/each}
</ul>

<!-- Usage in parent:
<List {items}>
  {#snippet renderItem(fruit)}
    <strong>{fruit}</strong>
  {/snippet}
</List>
-->

Try it: card with children

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let items = $state(['Learn Svelte', 'Build something', 'Deploy to Vercel']);
</script>

{#snippet card(title, body)}
  <div class="card">
    <h3>{title}</h3>
    <p>{body}</p>
  </div>
{/snippet}

<h2>My Todo List</h2>
{#each items as item, i}
  {@render card('Task ' + (i + 1), item)}
{/each}

<style>
  .card { border: 1px solid #ccc; border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
  h3 { margin: 0 0 0.25rem; color: #FF3E00; }
  p { margin: 0; }
</style>