Svelte Snippets & Composition: The LEGO Brick Story

Imagine you have a box of LEGO bricks. Some bricks are special—they have holes where you can snap in other pieces. That’s exactly what Snippets are in Svelte! They’re reusable chunks of your page that you can plug in anywhere.

🧩 What Are Snippets?

Think of a Snippet like a recipe card you keep in your kitchen.

• You write the recipe once
• You use it whenever you need it
• You can share it with friends

In Svelte, a Snippet is a reusable piece of HTML you define once and use many times.

Your First Snippet

{#snippet greeting()}
  <p>Hello, friend!</p>
{/snippet}

{@render greeting()}
{@render greeting()}

What happens?

• We created a recipe called greeting
• We used it twice with {@render greeting()}
• The page shows “Hello, friend!” two times!

graph TD
    A[Define Snippet] --> B[greeting recipe]
    B --> C[Render 1st time]
    B --> D[Render 2nd time]
    C --> E[Hello, friend!]
    D --> F[Hello, friend!]

🎁 Snippet Parameters: Giving Your Recipe Ingredients

What if you want to say hello to different people? You give your Snippet parameters—like ingredients!

Snippet with a Name Parameter

{#snippet greeting(name)}
  <p>Hello, {name}!</p>
{/snippet}

{@render greeting("Maya")}
{@render greeting("Leo")}

Output:

• Hello, Maya!
• Hello, Leo!

Multiple Parameters

You can pass many ingredients at once:

{#snippet card(title, color)}
  <div style="background: {color}">
    <h2>{title}</h2>
  </div>
{/snippet}

{@render card("Sun", "yellow")}
{@render card("Sky", "lightblue")}

Real-World Analogy: It’s like ordering pizza. You tell them the size and toppings. The pizza shop (Snippet) makes exactly what you asked for!

🏷️ Render Tags: The Magic Words

The {@render ...()} tag is your magic wand. You wave it, say the Snippet name, and poof—your content appears!

Basic Render

{@render mySnippet()}

Render with Values

{@render userCard(user.name, user.age)}

Conditional Render

Sometimes you only want to show something if it exists:

{@render header?.()}

The ?.() is like asking: “Hey, does this Snippet exist? If yes, show it. If no, do nothing.”

👶 The children Snippet: What’s Inside the Box?

Imagine you have a gift box. The box is pretty on the outside, but what matters is what’s inside.

In Svelte, when you wrap content inside a component, that content becomes children.

The Gift Box Component

Box.svelte

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

<div class="pretty-box">
  {@render children?.()}
</div>

Using the Box:

<Box>
  <p>I'm the gift inside!</p>
  <p>Me too!</p>
</Box>

What You See:

┌──────────────────┐
│ I'm the gift     │
│ inside!          │
│ Me too!          │
└──────────────────┘

The Box doesn’t know what’s inside. It just wraps it beautifully!

📬 Passing Snippets to Components

Sometimes you want to give a component special instructions. Like telling a picture frame: “Put THIS photo in the TOP, and THAT photo in the BOTTOM.”

Named Snippets

Frame.svelte

<script>
  let { top, bottom } = $props();
</script>

<div class="frame">
  <div class="top-section">
    {@render top?.()}
  </div>
  <div class="bottom-section">
    {@render bottom?.()}
  </div>
</div>

Using Named Snippets:

<Frame>
  {#snippet top()}
    <h1>Welcome!</h1>
  {/snippet}

  {#snippet bottom()}
    <p>Goodbye!</p>
  {/snippet}
</Frame>

graph TD
    A[Frame Component] --> B[top slot]
    A --> C[bottom slot]
    B --> D[Welcome!]
    C --> E[Goodbye!]

🏗️ Component Composition: Building Bigger Things

Composition means putting small things together to make big things. Like stacking blocks!

The Power of Combining

Imagine three simple components:

1. Header - Shows the title
2. Content - Shows the main stuff
3. Footer - Shows the bottom info

Page.svelte

<script>
  let { header, content, footer } = $props();
</script>

<article>
  <header>{@render header?.()}</header>
  <main>{@render content?.()}</main>
  <footer>{@render footer?.()}</footer>
</article>

Building a Complete Page:

<Page>
  {#snippet header()}
    <h1>My Blog</h1>
  {/snippet}

  {#snippet content()}
    <p>Today I learned Snippets!</p>
    <p>They are amazing!</p>
  {/snippet}

  {#snippet footer()}
    <small>Thanks for reading</small>
  {/snippet}
</Page>

Why Composition Rocks

🎯 Real-World Example: A Card System

Let’s build a flexible card that can show anything!

FlexCard.svelte

<script>
  let {
    icon,
    title,
    children,
    actions
  } = $props();
</script>

<div class="card">
  {#if icon}
    <div class="icon">{@render icon()}</div>
  {/if}

  <h3>{@render title?.()}</h3>

  <div class="body">
    {@render children?.()}
  </div>

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

Using FlexCard:

<FlexCard>
  {#snippet icon()}
    ⭐
  {/snippet}

  {#snippet title()}
    Featured Item
  {/snippet}

  <p>This card can hold anything!</p>

  {#snippet actions()}
    <button>Learn More</button>
  {/snippet}
</FlexCard>

🧠 Quick Summary

🚀 You Did It!

You now understand how Svelte lets you:

1. ✅ Create reusable Snippets
2. ✅ Pass parameters like ingredients
3. ✅ Use render tags to display them
4. ✅ Work with children content
5. ✅ Pass named Snippets to components
6. ✅ Build amazing things through composition

The secret? Think of your UI like LEGO. Small, reusable pieces that snap together to build anything you can imagine!

“The best code is like the best LEGO set—simple pieces that create endless possibilities.”