diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/Card.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/Card.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/Card.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/paper.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/paper.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/paper.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/paper.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/wood.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/wood.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/wood.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/wood.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-b/src/lib/Card.svelte
similarity index 91%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/Card.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-b/src/lib/Card.svelte
index e0083f0c62..5f93bc50b0 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/Card.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-b/src/lib/Card.svelte
@@ -1,5 +1,9 @@
+<script>
+	const { children } = $props();
+</script>
+
 <div class="card">
-	<slot />
+	{@render children()}
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/index.md
similarity index 57%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/index.md
index 1f9fe948cc..098db34f8b 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/index.md
@@ -1,5 +1,5 @@
 ---
-title: Slots
+title: Snippets
 ---
 
 Just like elements can have children...
@@ -11,12 +11,15 @@ Just like elements can have children...
 </div>
 ```
 
-...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Card.svelte`:
+...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `children` prop and the render tag `{@render children()}` – which is a bit like a function call. Put this inside `Card.svelte`:
 
 ```svelte
 /// file: Card.svelte
++++<script>+++
++++	const { children } = $props();+++
++++</script>+++
 <div class="card">
-	+++<slot></slot>+++
+	+++{@render children()}+++
 </div>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/App.svelte
deleted file mode 100644
index a9bde36e57..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/App.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import Card from './Card.svelte';
-</script>
-
-<main>
-	<Card>
-		<span>Patrick BATEMAN</span>
-		<span>Vice President</span>
-
-		<span slot="telephone">212 555 6342</span>
-
-		<span slot="company">
-			Pierce &amp; Pierce
-			<small>Mergers and Aquisitions</small>
-		</span>
-		
-		<span slot="address">358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
-	</Card>
-</main>
-
-<style>
-	main {
-		display: grid;
-		place-items: center;
-		height: 100%;
-		background: url(./wood.svg);
-	}
-</style>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..8710b69e13
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,34 @@
+<script>
+	import Card from './Card.svelte';
+</script>
+
+<main>
+	<Card>
+		<span>Patrick BATEMAN</span>
+		<span>Vice President</span>
+
+		{#snippet telephone()}
+			<span>212 555 6342</span>
+		{/snippet}
+
+		{#snippet company()}
+			<span>
+				Pierce &amp; Pierce
+				<small>Mergers and Aquisitions</small>
+			</span>
+		{/snippet}
+
+		{#snippet address()}
+			<span>358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
+		{/snippet}
+	</Card>
+</main>
+
+<style>
+	main {
+		display: grid;
+		place-items: center;
+		height: 100%;
+		background: url(./wood.svg);
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/Card.svelte
similarity index 91%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/Card.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/Card.svelte
index e0083f0c62..5f93bc50b0 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/Card.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/Card.svelte
@@ -1,5 +1,9 @@
+<script>
+	const { children } = $props();
+</script>
+
 <div class="card">
-	<slot />
+	{@render children()}
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/paper.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/paper.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/paper.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/paper.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/wood.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/wood.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/wood.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/wood.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-b/src/lib/App.svelte
similarity index 50%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-b/src/lib/App.svelte
index 6ddf52dcca..75f60dd02e 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-b/src/lib/App.svelte
@@ -7,14 +7,20 @@
 		<span>Patrick BATEMAN</span>
 		<span>Vice President</span>
 
-		<span slot="telephone">212 555 6342</span>
+		{#snippet telephone()}
+			<span>212 555 6342</span>
+		{/snippet}
 
-		<span slot="company">
-			Pierce &amp; Pierce
-			<small>Mergers and Aquisitions</small>
-		</span>
-		
-		<span slot="address">358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
+		{#snippet company()}
+			<span>
+				Pierce &amp; Pierce
+				<small>Mergers and Aquisitions</small>
+			</span>
+		{/snippet}
+
+		{#snippet address()}
+			<span>358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
+		{/snippet}
 	</Card>
 </main>
 
@@ -31,4 +37,4 @@
 		font-size: 0.6em;
 		text-align: right;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-b/src/lib/Card.svelte
similarity index 82%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/Card.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-b/src/lib/Card.svelte
index 7395157ba0..6ab4821843 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/Card.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-b/src/lib/Card.svelte
@@ -1,13 +1,17 @@
+<script>
+	const { children, address, company, telephone } = $props();
+</script>
+
 <div class="card">
 	<header>
-		<slot name="telephone" />
-		<slot name="company" />
+	  {@render telephone()}
+		{@render company()}
 	</header>
 
-	<slot />
-		
+	{@render children()}
+
 	<footer>
-		<slot name="address" />
+		{@render address()}
 	</footer>
 </div>
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/index.md
similarity index 67%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/index.md
index 901e987ce4..22e5d71efb 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-snippets/index.md
@@ -1,23 +1,27 @@
 ---
-title: Named slots
+title: Named snippets
 ---
 
-The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement. In those cases, we can use _named slots_.
+The previous example contained a _default snippet_, which renders the direct children of a component. Sometimes you will need more control over placement. In those cases, we can use _named snippets_.
 
-Inside `App.svelte`, we're rendering a `<Card>` component that contains `<span slot="telephone">` and others for `company` and `address`. Let's add the corresponding named slots in `Card.svelte`:
+Inside `App.svelte`, we're rendering a `<Card>` component that contains `{#snippet telephone()}` and others for `company` and `address`. Let's add the corresponding named snippets in `Card.svelte`:
 
 ```svelte
 /// file: Card.svelte
+<script>
+	const { children+++, address, company, telephone+++ } = $props();
+</script>
+
 <div class="card">
 +++	<header>
-		<slot name="telephone"></slot>
-		<slot name="company"></slot>
+	  {@render telephone()}
+		{@render company()}
 	</header>+++
 
-	<slot></slot>
+	{@render children()}
 
 +++	<footer>
-		<slot name="address"></slot>
+		{@render address()}
 	</footer>+++
 </div>
 ```