svelte5_snippets

svelte5_snippets.md

Svelte 5 Snippets

---

<script> let images = [ { src: "image1.jpg", caption: "Image 1", href: "https://example.com" }, { src: "image2.jpg", caption: "Image 2" } ]; </script>

{#snippet figure(image)}

{image.caption} {/snippet}

{#each images as image} {#if image.href} {@render figure(image)} {:else} {@render figure(image)} {/if} {/each}

---

---

{#snippet x()} {#snippet y()}

Inside y

{/snippet}

	<!-- Rendering `y` inside `x` is allowed -->
	{@render y()}
{/snippet}

<!-- This will cause an error because `y` is out of scope -->
{@render y()}

{@render x()}

---

---

{#snippet blastoff()} 🚀 {/snippet}

{#snippet countdown(n)} {#if n > 0} {n}... {@render countdown(n - 1)} {:else} {@render blastoff()} {/if} {/snippet}

{@render countdown(5)}

---

---

<script> let { data, header, row } = $props(); </script> {@render header()} {#each data as item} {@render row(item)} {/each}

---

<script> import Table from "./Table.svelte"; const fruits = [ { name: "Apples", qty: 5, price: 2 }, { name: "Bananas", qty: 10, price: 1 }, { name: "Cherries", qty: 20, price: 0.5 } ]; </script>

{#snippet header()} Fruit Qty Price Total {/snippet}

{#snippet row(d)} {d.name} {d.qty} {d.price} {d.qty * d.price} {/snippet}

---

---

<script> let { children } = $props(); </script>

{@render children()}

---

Click Me

---

---

<script> let { children } = $props(); </script>

{#if children} {@render children()} {:else}

Fallback content

{/if}

---

{#snippet children()}

Custom content

{/snippet}

---

---

<script module> export { add }; </script>

{#snippet add(a, b)} {a} + {b} = {a + b} {/snippet}

---

<script> import { add } from "./math.svelte"; </script>

{@render add(2, 3)}

---

---

<script> let { header, main, footer } = $props(); </script> {@render header?.()} {@render main?.()} {@render footer?.()}

---

<script> import Layout from "./Layout.svelte"; </script> {#snippet header()}

My Website

{/snippet}

{#snippet main()}
	<p>Welcome to my website!</p>
{/snippet}

{#snippet footer()}
	<p>© 2023 My Website</p>
{/snippet}

---

---

<script> let { items, item, empty } = $props(); </script>

{#if items.length}

{#each items as entry}
• {@render item(entry)}
{/each}

{:else} {@render empty?.()} {/if}

---

<script> import List from "./List.svelte"; const fruits = ['Apple', 'Banana', 'Cherry']; </script> {#snippet item(fruit)} {fruit} {/snippet}

{#snippet empty()}
	<span>No fruits available</span>
{/snippet}

---