The Complete Production SOP: How to Deploy and Run Svelte 5 Snippets & Render Delegation in Autonomous AI Agents

---
name: "svelte-5-snippets-render-props"
description: "Author reusable template fragments and custom slot replacements using Svelte 5 Snippets."
metadata:
  author: "Svelte"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write svelte 5 snippet"
  - "render snippet {@render}"
  - "replace slots svelte 5 snippets"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

<script lang="ts">
  import type { Snippet } from 'svelte';

  type User = { id: string; name: string; role: string };

  let {
    items,
    header,
    row,
    children
  }: {
    items: User[];
    header?: Snippet;
    row: Snippet<[User]>;
    children?: Snippet;
  } = $props();
</script>

<table class="min-w-full divide-y divide-gray-200">
  <thead>
    {#if header}
      {@render header()}
    {:else}
      <tr><th>Default Header</th></tr>
    {/if}
  </thead>
  <tbody>
    {#each items as item (item.id)}
      {@render row(item)}
    {/each}
  </tbody>
</table>

{#if children}
  <div class="table-footer">
    {@render children()}
  </div>
{/if}

<script lang="ts">
  import DataTable from '$lib/components/DataTable.svelte';

  let users = $state([
    { id: '1', name: 'Alice', role: 'Staff Engineer' },
    { id: '2', name: 'Bob', role: 'Security Architect' }
  ]);
</script>

{#snippet customHeader()}
  <tr>
    <th class="p-2 text-left">User Name</th>
    <th class="p-2 text-left">Role Title</th>
  </tr>
{/snippet}

<DataTable items={users} header={customHeader}>
  {#snippet row(user)}
    <tr class="hover:bg-slate-50">
      <td class="p-2 font-mono">{user.name}</td>
      <td class="p-2">{user.role}</td>
    </tr>
  {/snippet}

  <p class="text-xs text-gray-500">Showing {users.length} active team members.</p>
</DataTable>