diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/02-layouts/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/02-layouts/+assets/app-b/src/routes/+layout.svelte
index 439e52c54c..1026ad3624 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/02-layouts/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/02-layouts/+assets/app-b/src/routes/+layout.svelte
@@ -1,6 +1,10 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/about">about</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/02-layouts/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/02-layouts/index.md
index 79898d1682..c24e1f55a3 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/02-layouts/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/02-layouts/index.md
@@ -14,16 +14,20 @@ src/routes/
 └ +page.svelte
 ```
 
-...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `<slot></slot>` element is where the page content will be rendered:
+...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `{@render children()}` tag is where the page content will be rendered:
 
 ```svelte
 /// file: src/routes/+layout.svelte
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/about">about</a>
 </nav>
 
-<slot></slot>
+{@render children()}
 ```
 
 A `+layout.svelte` file applies to every child route, including the sibling `+page.svelte` (if it exists). You can nest layouts to arbitrary depth.
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/03-params/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/03-params/+assets/app-a/src/routes/+layout.svelte
index 307ba0a2c0..0562f71bb8 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/03-params/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/03-params/+assets/app-a/src/routes/+layout.svelte
@@ -1,6 +1,10 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/blog">blog</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-a/src/routes/+layout.svelte
index 307ba0a2c0..0562f71bb8 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-a/src/routes/+layout.svelte
@@ -1,6 +1,10 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/blog">blog</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-a/src/routes/blog/[slug]/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-a/src/routes/blog/[slug]/+layout.svelte
index 58f03262ef..b367c6a8f6 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-a/src/routes/blog/[slug]/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-a/src/routes/blog/[slug]/+layout.svelte
@@ -1,10 +1,10 @@
 <script>
-	export let data;
+	let { data, children } = $props();
 </script>
 
 <div class="layout">
 	<main>
-		<slot />
+		{@render children()}
 	</main>
 </div>
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/+page.svelte
index 4e5bc4a2e5..3e9641bd5d 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>blog</h1>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/[slug]/+page.server.js b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/[slug]/+page.server.js
index 99e67c2815..e3c4fbfbf6 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/[slug]/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/[slug]/+page.server.js
@@ -4,7 +4,7 @@ import { posts } from '../data.js';
 export function load({ params }) {
 	const post = posts.find((post) => post.slug === params.slug);
 
-	if (!post) throw error(404);
+	if (!post) error(404);
 
 	return {
 		post
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/[slug]/+page.svelte
index e54908bf92..ae3435400d 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/+assets/app-b/src/routes/blog/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>{data.post.title}</h1>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/index.md
index 8d9b4049b9..7040400ced 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/index.md
@@ -34,7 +34,7 @@ We can access this data in `src/routes/blog/+page.svelte` via the `data` prop:
 ```svelte
 /// file: src/routes/blog/+page.svelte
 +++<script>
-	export let data;
+	let { data } = $props();
 </script>+++
 
 <h1>blog</h1>
@@ -67,7 +67,7 @@ export function load({ params }) {
 ```svelte
 /// file: src/routes/blog/[slug]/+page.svelte
 +++<script>
-	export let data;
+	let { data } = $props();
 </script>+++
 
 ---<h1>blog post</h1>---
@@ -85,7 +85,7 @@ import { posts } from '../data.js';
 export function load({ params }) {
 	const post = posts.find((post) => post.slug === params.slug);
 
-	+++if (!post) throw error(404);+++
+	+++if (!post) error(404);+++
 
 	return {
 		post
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/+assets/app-b/src/routes/blog/[slug]/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/+assets/app-b/src/routes/blog/[slug]/+layout.svelte
index d455eefcef..524f014e83 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/+assets/app-b/src/routes/blog/[slug]/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/+assets/app-b/src/routes/blog/[slug]/+layout.svelte
@@ -1,10 +1,10 @@
 <script>
-	export let data;
+	let { data, children } = $props();
 </script>
 
 <div class="layout">
 	<main>
-		<slot />
+		{@render children()}
 	</main>
 
 	<aside>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/index.md
index a96aab1ad8..387b1fcf2b 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/index.md
@@ -14,12 +14,12 @@ Now, add a sidebar in the layout for the post page:
 ```svelte
 /// file: src/routes/blog/[slug]/+layout.svelte
 <script>
-	export let data;
+	let { data, children } = $props();
 </script>
 
 <div class="layout">
 	<main>
-		<slot></slot>
+		{@render children()}
 	</main>
 
 +++	<aside>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/+assets/app-a/src/routes/+page.svelte
index ae04053e53..8608cfbeec 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/+assets/app-a/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>Hello {data.visited ? 'friend' : 'stranger'}!</h1>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/05-shared-modules/01-lib/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/05-shared-modules/01-lib/+assets/app-a/src/routes/+layout.svelte
index 01a298fe1c..401191423d 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/05-shared-modules/01-lib/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/05-shared-modules/01-lib/+assets/app-a/src/routes/+layout.svelte
@@ -1,6 +1,10 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/a/deeply/nested/route">a deeply nested route</a>
 </nav>
 
-<slot />
\ No newline at end of file
+{@render children()}
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/01-the-form-element/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/01-the-form-element/+assets/app-a/src/routes/+page.svelte
index 8295cb33f3..2f42360a17 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/01-the-form-element/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/01-the-form-element/+assets/app-a/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <div class="centered">
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/01-the-form-element/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/01-the-form-element/+assets/app-b/src/routes/+page.svelte
index e1d5603ece..71824ecbdd 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/01-the-form-element/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/01-the-form-element/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <div class="centered">
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/+assets/app-b/src/routes/+page.svelte
index f5cf596ce5..72f6b0f111 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <div class="centered">
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/+assets/app-b/src/routes/+page.svelte
index ae217b114a..5a927edb8a 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/+assets/app-b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script>
-	export let data;
-	export let form;
+	let { data, form } = $props();
 </script>
 
 <div class="centered">
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/index.md
index 31223818e7..a9c079070c 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/index.md
@@ -78,8 +78,7 @@ In `src/routes/+page.svelte`, we can access the returned value via the `form` pr
 ```svelte
 /// file: src/routes/+page.svelte
 <script>
-	export let data;
-	+++export let form;+++
+	let { data, +++form+++ } = $props();
 </script>
 
 <div class="centered">
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/+assets/app-b/src/routes/+page.svelte
index dba733d185..13d1456975 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/+assets/app-b/src/routes/+page.svelte
@@ -2,8 +2,7 @@
 	import { fly, slide } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 
-	export let data;
-	export let form;
+	let { data, form } = $props();
 </script>
 
 <div class="centered">
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/index.md
index 66b9f29697..ad03e7222b 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/index.md
@@ -13,8 +13,7 @@ Import the `enhance` function from `$app/forms`...
 <script>
 	+++import { enhance } from '$app/forms';+++
 
-	export let data;
-	export let form;
+	let { data, form } = $props();
 </script>
 ```
 
@@ -45,8 +44,7 @@ Now that we're updating the page rather than reloading it, we can get fancy with
 	+++import { fly, slide } from 'svelte/transition';+++
 	import { enhance } from '$app/forms';
 
-	export let data;
-	export let form;
+	let { data, form } = $props();
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/+assets/app-b/src/routes/+page.svelte
index 51c5b92513..b62b6e6570 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/+assets/app-b/src/routes/+page.svelte
@@ -2,11 +2,10 @@
 	import { fly, slide } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 
-	export let data;
-	export let form;
+	let { data, form } = $props();
 
-	let creating = false;
-	let deleting = [];
+	let creating = $state(false);
+	let deleting = $state([]);
 </script>
 
 <div class="centered">
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/index.md
index 3e8e0e82da..89ce68391a 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/index.md
@@ -27,11 +27,10 @@ When we create or delete items, it now takes a full second before the UI updates
 	import { fly, slide } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 
-	export let data;
-	export let form;
+	let { data, form } = $props();
 
-+++	let creating = false;
-	let deleting = [];+++
++++	let creating = $state(false);
+	let deleting = $state([]);+++
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/01-get-handlers/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/01-get-handlers/+assets/app-a/src/routes/+page.svelte
index 99955f2edc..541c856b27 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/01-get-handlers/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/01-get-handlers/+assets/app-a/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	/** @type {number} */
-	let number;
+	let number = $state();
 
 	async function roll() {
 		const response = await fetch('/roll');
@@ -8,7 +8,7 @@
 	}
 </script>
 
-<button on:click={roll}>Roll the dice</button>
+<button onclick={roll}>Roll the dice</button>
 
 {#if number !== undefined}
 	<p>You rolled a {number}</p>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-a/src/routes/+page.svelte
index 2d6b71bae4..8ef2818c8b 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-a/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <div class="centered">
@@ -10,7 +10,7 @@
 		<input
 			type="text"
 			autocomplete="off"
-			on:keydown={async (e) => {
+			onkeydown={async (e) => {
 				if (e.key !== 'Enter') return;
 
 				const input = e.currentTarget;
@@ -30,7 +30,7 @@
 					<input
 						type="checkbox"
 						checked={todo.done}
-						on:change={async (e) => {
+						onchange={async (e) => {
 							const done = e.currentTarget.checked;
 
 							// TODO handle change
@@ -39,7 +39,7 @@
 					<span>{todo.description}</span>
 					<button
 						aria-label="Mark as complete"
-						on:click={async (e) => {
+						onclick={async (e) => {
 							// TODO handle delete
 						}}
 					></button>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
index 50ed0a9c01..89ff6d39be 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data = $bindable() } = $props();
 </script>
 
 <div class="centered">
@@ -10,7 +10,7 @@
 		<input
 			type="text"
 			autocomplete="off"
-			on:keydown={async (e) => {
+			onkeydown={async (e) => {
 				if (e.key !== 'Enter') return;
 
 				const input = e.currentTarget;
@@ -43,7 +43,7 @@
 					<input
 						type="checkbox"
 						checked={todo.done}
-						on:change={async (e) => {
+						onchange={async (e) => {
 							const done = e.currentTarget.checked;
 
 							// TODO handle change
@@ -52,7 +52,7 @@
 					<span>{todo.description}</span>
 					<button
 						aria-label="Mark as complete"
-						on:click={async (e) => {
+						onclick={async (e) => {
 							// TODO handle delete
 						}}
 					></button>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
index 7be2a7929f..8a02c6aff1 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
@@ -11,7 +11,7 @@ Inside the `keydown` event handler of the 'add a todo' `<input>`, let's post som
 <input
 	type="text"
 	autocomplete="off"
-	on:keydown={async (e) => {
+	onkeydown={async (e) => {
 		if (e.key !== 'Enter') return;
 
 		const input = e.currentTarget;
@@ -58,7 +58,7 @@ We're returning a response with a [201 Created](https://http.dog/201) status and
 <input
 	type="text"
 	autocomplete="off"
-	on:keydown={async (e) => {
+	onkeydown={async (e) => {
 		if (e.key !== 'Enter') return;
 
 		const input = e.currentTarget;
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte
index f5b26108a8..ce0b7d145e 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data = $bindable() } = $props();
 </script>
 
 <div class="centered">
@@ -10,7 +10,7 @@
 		<input
 			type="text"
 			autocomplete="off"
-			on:keydown={async (e) => {
+			onkeydown={async (e) => {
 				if (e.key !== 'Enter') return;
 
 				const input = e.currentTarget;
@@ -43,7 +43,7 @@
 					<input
 						type="checkbox"
 						checked={todo.done}
-						on:change={async (e) => {
+						onchange={async (e) => {
 							const done = e.currentTarget.checked;
 
 							await fetch(`/todo/${todo.id}`, {
@@ -58,7 +58,7 @@
 					<span>{todo.description}</span>
 					<button
 						aria-label="Mark as complete"
-						on:click={async (e) => {
+						onclick={async (e) => {
 							await fetch(`/todo/${todo.id}`, {
 								method: 'DELETE'
 							});
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
index 499744d038..eb0d345a4a 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
@@ -34,7 +34,7 @@ We can now interact with this endpoint inside our event handlers:
 	<input
 		type="checkbox"
 		checked={todo.done}
-		on:change={async (e) => {
+		onchange={async (e) => {
 			const done = e.currentTarget.checked;
 
 +++			await fetch(`/todo/${todo.id}`, {
@@ -49,7 +49,7 @@ We can now interact with this endpoint inside our event handlers:
 	<span>{todo.description}</span>
 	<button
 		aria-label="Mark as complete"
-		on:click={async (e) => {
+		onclick={async (e) => {
 +++			await fetch(`/todo/${todo.id}`, {
 				method: 'DELETE'
 			});
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+layout.svelte
index b8898953dc..8e2fbdf72b 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">
 		home
@@ -8,4 +12,4 @@
 	</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-b/src/routes/+layout.svelte
index d364e96498..838ab60041 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/stores';
+	let { children } = $props();
 </script>
 
 <nav>
@@ -12,4 +13,4 @@
 	</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/index.md
index dddb212205..582c0ec682 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/index.md
@@ -18,9 +18,11 @@ As with any other store, you can reference its value in a component by prefixing
 
 ```svelte
 /// file: src/routes/+layout.svelte
-+++<script>
-	import { page } from '$app/stores';
-</script>+++
+<script>
+	+++import { page } from '$app/stores';+++
+
+	let { children } = $props();
+</script>
 
 <nav>
 	<a href="/" +++aria-current={$page.url.pathname === '/'}+++>
@@ -32,5 +34,5 @@ As with any other store, you can reference its value in a component by prefixing
 	</a>
 </nav>
 
-<slot></slot>
+{@render children()}
 ```
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+layout.svelte
index d364e96498..838ab60041 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/stores';
+	let { children } = $props();
 </script>
 
 <nav>
@@ -12,4 +13,4 @@
 	</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-b/src/routes/+layout.svelte
index 4f8e930c5e..0965c80ed5 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { page, navigating } from '$app/stores';
+	let { children } = $props();
 </script>
 
 <nav>
@@ -16,4 +17,4 @@
 	{/if}
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
index 6da1d963e9..2145760bc6 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
@@ -15,6 +15,8 @@ It can be used to show a loading indicator for long-running navigations. In this
 /// file: src/routes/+layout.svelte
 <script>
 	import { page, +++navigating+++ } from '$app/stores';
+
+	let { children } = $props();
 </script>
 
 <nav>
@@ -31,5 +33,5 @@ It can be used to show a loading indicator for long-running navigations. In this
 	{/if}+++
 </nav>
 
-<slot></slot>
+{@render children()}
 ```
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+layout.svelte
index 6932ab0247..bfceacd616 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { page, navigating } from '$app/stores';
+	let { children } = $props();
 </script>
 
 <nav>
@@ -16,13 +17,13 @@
 	{/if}
 </nav>
 
-<slot />
+{@render children()}
 
 <div class="toast">
 	<p>
 		A new version of the app is available
 
-		<button on:click={() => location.reload()}>
+		<button onclick={() => location.reload()}>
 			reload the page
 		</button>
 	</p>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-b/src/routes/+layout.svelte
index b3e8607c11..5cae6c8c82 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { page, navigating, updated } from '$app/stores';
+	let { children } = $props();
 </script>
 
 <nav>
@@ -16,14 +17,14 @@
 	{/if}
 </nav>
 
-<slot />
+{@render children()}
 
 {#if $updated}
 	<div class="toast">
 		<p>
 			A new version of the app is available
 
-			<button on:click={() => location.reload()}>
+			<button onclick={() => location.reload()}>
 				reload the page
 			</button>
 		</p>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/index.md
index 9672845766..19ce190fb8 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/index.md
@@ -23,7 +23,7 @@ You can manually check for new versions, regardless of `pollInterval`, by callin
 		<p>
 			A new version of the app is available
 
-			<button on:click={() => location.reload()}>
+			<button onclick={() => location.reload()}>
 				reload the page
 			</button>
 		</p>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/+assets/app-a/src/routes/+layout.svelte
index 98719ede21..38d1ee4e97 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/+assets/app-a/src/routes/+layout.svelte
@@ -1,7 +1,11 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/expected">page with expected error</a>
 	<a href="/unexpected">page with unexpected error</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/+assets/app-a/src/routes/expected/+page.server.js b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/+assets/app-a/src/routes/expected/+page.server.js
index c3140a7c6b..f6cfd93dfa 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/+assets/app-a/src/routes/expected/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/+assets/app-a/src/routes/expected/+page.server.js
@@ -1,5 +1,5 @@
 import { error } from '@sveltejs/kit';
 
 export function load() {
-	throw error(420, 'Enhance your calm');
+	error(420, 'Enhance your calm');
 }
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
index dd4ac1e645..baa89050c1 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
@@ -4,14 +4,14 @@ title: Basics
 
 There are two types of errors in SvelteKit — _expected_ errors and _unexpected_ errors.
 
-An expected error is one that was created with the [`error`](https://kit.svelte.dev/docs/modules#sveltejs-kit-error) helper from `@sveltejs/kit`, as in `src/routes/expected/+page.server.js`:
+An expected error is one that was thrown via the [`error`](https://kit.svelte.dev/docs/modules#sveltejs-kit-error) helper from `@sveltejs/kit`, as in `src/routes/expected/+page.server.js`:
 
 ```js
 /// file: src/routes/expected/+page.server.js
 import { error } from '@sveltejs/kit';
 
 export function load() {
-	throw error(420, 'Enhance your calm');
+	error(420, 'Enhance your calm');
 }
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/+assets/app-a/src/routes/+layout.svelte
index f418852eaa..e381f17d50 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/+assets/app-a/src/routes/+layout.svelte
@@ -1,7 +1,11 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/a">a</a>
 	<a href="/b">b</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/+assets/app-b/src/routes/a/+page.server.js b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/+assets/app-b/src/routes/a/+page.server.js
index 4e4a8a37b5..ec6b0ae2de 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/+assets/app-b/src/routes/a/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/+assets/app-b/src/routes/a/+page.server.js
@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-	throw redirect(307, '/b');
+	redirect(307, '/b');
 }
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
index 3fd3a53136..5f4735ec18 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
@@ -11,13 +11,13 @@ Create a new `load` function in `src/routes/a/+page.server.js`:
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-	throw redirect(307, '/b');
+	redirect(307, '/b');
 }
 ```
 
 Navigating to `/a` will now take us straight to `/b`.
 
-You can `throw redirect(...)` inside `load` functions, form actions, API routes and the `handle` hook, which we'll discuss in a later chapter.
+You can `redirect(...)` inside `load` functions, form actions, API routes and the `handle` hook, which we'll discuss in a later chapter.
 
 The most common status codes you'll use:
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/+assets/app-a/src/routes/+layout.svelte
index 439e52c54c..1026ad3624 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/+assets/app-a/src/routes/+layout.svelte
@@ -1,6 +1,10 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/about">about</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/02-event/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/02-event/+assets/app-a/src/routes/+page.svelte
index 5c2e9d0f48..958e246961 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/02-event/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/02-event/+assets/app-a/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>{data.message}</h1>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/03-handlefetch/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/03-handlefetch/+assets/app-a/src/routes/+page.svelte
index 5c2e9d0f48..958e246961 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/03-handlefetch/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/03-handlefetch/+assets/app-a/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>{data.message}</h1>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/+assets/app-a/src/routes/+layout.svelte
index 912905cf05..63fb094ba7 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/+assets/app-a/src/routes/+layout.svelte
@@ -1,7 +1,11 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/the-good-place">the good place</a>
 	<a href="/the-bad-place">the bad place</a>
 </nav>
 
-<slot />
\ No newline at end of file
+{@render children()}
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/03-csr/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/03-csr/+assets/app-a/src/routes/+page.svelte
index 3f3888c81c..4028cedd4f 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/03-csr/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/03-csr/+assets/app-a/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { browser } from '$app/environment';
 
-	let count = 0;
+	let count = $state(0);
 
 	function increment() {
 		count += 1;
@@ -10,6 +10,6 @@
 
 <h1>Rendered {browser ? 'in the browser' : 'on the server'}</h1>
 
-<button on:click={increment}>
+<button onclick={increment}>
 	Clicks: {count}
 </button>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/05-trailingslash/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/05-trailingslash/+assets/app-a/src/routes/+layout.svelte
index 40c5435dc6..c6c550a4be 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/05-trailingslash/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/05-trailingslash/+assets/app-a/src/routes/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/always">/always</a>
 	<a href="/always/">/always/</a>
@@ -7,4 +11,4 @@
 	<a href="/never/">/never/</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte
index 14f9182473..1a419507b1 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte
@@ -1,17 +1,21 @@
 <script>
 	import { navigating } from '$app/stores';
 
-	let previous;
-	let start;
-	let end;
+	let { children } = $props();
 
-	$: if ($navigating) {
-		start = Date.now();
-		end = null;
-		previous = $navigating;
-	} else {
-		end = Date.now();
-	}
+	let previous = $state();
+	let start = $state();
+	let end = $state();
+
+	$effect(() => {
+		if ($navigating) {
+			start = Date.now();
+			end = null;
+			previous = $navigating;
+		} else {
+			end = Date.now();
+		}
+	});
 </script>
 
 <nav>
@@ -20,7 +24,7 @@
 	<a href="/slow-b">slow-b</a>
 </nav>
 
-<slot />
+{@render children()}
 
 {#if previous && end}
 	<p>navigated from {previous.from.url.pathname} to {previous.to.url.pathname} in <strong>{end - start}ms</strong></p>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte
index a722ab562a..a20c670f1f 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte
@@ -1,17 +1,21 @@
 <script>
 	import { navigating } from '$app/stores';
 
-	let previous;
-	let start;
-	let end;
+	let { children } = $props();
 
-	$: if ($navigating) {
-		start = Date.now();
-		end = null;
-		previous = $navigating;
-	} else {
-		end = Date.now();
-	}
+	let previous = $state();
+	let start = $state();
+	let end = $state();
+
+	$effect(() => {
+		if ($navigating) {
+			start = Date.now();
+			end = null;
+			previous = $navigating;
+		} else {
+			end = Date.now();
+		}
+	});
 </script>
 
 <nav>
@@ -20,7 +24,7 @@
 	<a href="/slow-b">slow-b</a>
 </nav>
 
-<slot />
+{@render children()}
 
 {#if previous && end}
 <p>navigated from {previous.from.url.pathname} to {previous.to.url.pathname} in <strong>{end - start}ms</strong></p>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/+assets/app-a/src/routes/+layout.svelte
index a4862467da..d5e6b989bc 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/+assets/app-a/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script>
 	import { onMount } from 'svelte';
 
-	let seconds = 0;
+	let { children } = $props();
+
+	let seconds = $state(0);
 
 	onMount(() => {
 		const interval = setInterval(() => {
@@ -19,6 +21,6 @@
 	<a href="/about">about</a>
 </nav>
 
-<slot />
+{@render children()}
 
 <p>the page has been open for {seconds} seconds</p>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/+assets/app-b/src/routes/+layout.svelte
index c8fb16273a..8e529aebbb 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/+assets/app-b/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script>
 	import { onMount } from 'svelte';
 
-	let seconds = 0;
+	let { children } = $props();
+
+	let seconds = $state(0);
 
 	onMount(() => {
 		const interval = setInterval(() => {
@@ -19,6 +21,6 @@
 	<a href="/about">about</a>
 </nav>
 
-<slot />
+{@render children()}
 
 <p>the page has been open for {seconds} seconds</p>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-a/src/routes/+layout.svelte
index 1b78382054..da08527a09 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-a/src/routes/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">default</a>
 	<a href="/en">english</a>
@@ -5,4 +9,4 @@
 	<a href="/fr">french</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-a/src/routes/[lang]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-a/src/routes/[lang]/+page.svelte
index a791437ec0..8611ddcfd3 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-a/src/routes/[lang]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-a/src/routes/[lang]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>{data.greeting}</h1>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-b/src/routes/[[lang]]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-b/src/routes/[[lang]]/+page.svelte
index a791437ec0..8611ddcfd3 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-b/src/routes/[[lang]]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/+assets/app-b/src/routes/[[lang]]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>{data.greeting}</h1>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-a/src/routes/[path]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-a/src/routes/[path]/+page.svelte
index afa47a04e3..ffc3424fc0 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-a/src/routes/[path]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-a/src/routes/[path]/+page.svelte
@@ -3,8 +3,8 @@
 
 	let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
 
-	$: depth = $page.params.path.split('/').filter(Boolean).length;
-	$: next = depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`;
+	let depth = $derived($page.params.path.split('/').filter(Boolean).length);
+	let next = $derived(depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`);
 </script>
 
 <div class="flex">
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-b/src/routes/[...path]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-b/src/routes/[...path]/+page.svelte
index afa47a04e3..ffc3424fc0 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-b/src/routes/[...path]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-b/src/routes/[...path]/+page.svelte
@@ -3,8 +3,8 @@
 
 	let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
 
-	$: depth = $page.params.path.split('/').filter(Boolean).length;
-	$: next = depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`;
+	let depth = $derived($page.params.path.split('/').filter(Boolean).length);
+	let next = $derived(depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`);
 </script>
 
 <div class="flex">
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
index bf1d709ca4..2ed8817e83 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
@@ -21,6 +21,6 @@ Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any
 > +│ │ └ +page.server.js
 > ```
 >
-> Inside the `+page.server.js` file, `throw error(404)` inside `load`.
+> Inside the `+page.server.js` file, `error(404)` inside `load`.
 
 Rest parameters do _not_ need to go at the end — a route like `/items/[...path]/edit` or `/items/[...path].json` is totally valid.
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-a/src/routes/+layout.svelte
index 287ab0a77e..98c807854d 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-a/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script>
+	let { children } = $props();
 	const colors = ['ff3e00', '676779', '42b4ff', 'invalid'];
 </script>
 
@@ -8,7 +9,7 @@
 	{/each}
 </nav>
 
-<slot />
+{@render children()}
 
 <style>
 	a {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/+layout.svelte
index fc8efa3fd8..8ca24b1552 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/about">about</a>
@@ -5,4 +9,4 @@
 	<a href="/app">app</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/login/+page.server.js b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/login/+page.server.js
index c267dbf804..67376b0051 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/login/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/login/+page.server.js
@@ -3,6 +3,6 @@ import { redirect } from '@sveltejs/kit';
 export const actions = {
 	default: ({ cookies, url }) => {
 		cookies.set('logged_in', 'true', { path: '/' });
-		throw redirect(303, url.searchParams.get('redirectTo') ?? '/');
+		redirect(303, url.searchParams.get('redirectTo') ?? '/');
 	}
 };
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/logout/+page.server.js b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/logout/+page.server.js
index 0b21aa2811..81ce768f96 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/logout/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-a/src/routes/logout/+page.server.js
@@ -3,6 +3,6 @@ import { redirect } from '@sveltejs/kit';
 export const actions = {
 	default: ({ cookies }) => {
 		cookies.delete('logged_in', { path: '/' });
-		throw redirect(303, '/');
+		redirect(303, '/');
 	}
 };
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-b/src/routes/(authed)/+layout.server.js b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-b/src/routes/(authed)/+layout.server.js
index cbccec496f..d394763934 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-b/src/routes/(authed)/+layout.server.js
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-b/src/routes/(authed)/+layout.server.js
@@ -2,6 +2,6 @@ import { redirect } from '@sveltejs/kit';
 
 export function load({ cookies, url }) {
 	if (!cookies.get('logged_in')) {
-		throw redirect(303, `/login?redirectTo=${url.pathname}`);
+		redirect(303, `/login?redirectTo=${url.pathname}`);
 	}
 }
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-b/src/routes/(authed)/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-b/src/routes/(authed)/+layout.svelte
index d2e2c27f4d..c518bbe526 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-b/src/routes/(authed)/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/+assets/app-b/src/routes/(authed)/+layout.svelte
@@ -1,4 +1,8 @@
-<slot />
+<script>
+	let { children } = $props();
+</script>
+
+{@render children()}
 
 <form method="POST" action="/logout">
 	<button>log out</button>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md
index 1acf11565f..27ea258d8b 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md
@@ -16,7 +16,7 @@ import { redirect } from '@sveltejs/kit';
 
 export function load({ cookies, url }) {
 	if (!cookies.get('logged_in')) {
-		throw redirect(303, `/login?redirectTo=${url.pathname}`);
+		redirect(303, `/login?redirectTo=${url.pathname}`);
 	}
 }
 ```
@@ -27,7 +27,9 @@ We can also add some UI to these two routes by adding a `src/routes/(authed)/+la
 
 ```svelte
 /// file: src/routes/(authed)/+layout.svelte
-<slot></slot>
+<script>
+	let { children } = $props();
+</script>
 
 <form method="POST" action="/logout">
 	<button>log out</button>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/+layout.svelte
index a3716f875c..e0f67ee0e8 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/">home</a>
 	<a href="/a">a</a>
@@ -6,7 +10,7 @@
 </nav>
 
 <div class="layout" data-name="root">
-	<slot />
+	{@render children()}
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/+layout.svelte
index 502a6de629..9dd3104d82 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <div class="layout" data-name="a">
-	<slot />
+	{@render children()}
 </div>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/b/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/b/+layout.svelte
index 0e7880ef22..b76bb068b8 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/b/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/b/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <div class="layout" data-name="b">
-	<slot />
+	{@render children()}
 </div>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/b/c/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/b/c/+layout.svelte
index c742401edb..36119e0cf0 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/b/c/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/+assets/app-a/src/routes/a/b/c/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <div class="layout" data-name="c">
-	<slot />
+	{@render children()}
 </div>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
index 5a88cab0e3..302d4f9f2d 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script>
 	import { page } from '$app/stores';
+
+	let { children } = $props();
 </script>
 
 <nav
@@ -12,7 +14,7 @@
 	<a href="/blue">blue</a>
 </nav>
 
-<slot />
+{@render children()}
 
 <style>
 	nav.has-color,
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
index 4a9e4726a6..9ac49389ed 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script>
 	import { page } from '$app/stores';
+
+	let { children } = $props();
 </script>
 
 <nav
@@ -12,11 +14,12 @@
 	<a href="/blue">blue</a>
 
 	{#if $page.data.component}
-		<svelte:component this={$page.data.component} />
+		{@const Component = $page.data.component}
+		<Component />
 	{/if}
 </nav>
 
-<slot />
+{@render children()}
 
 <style>
 	nav.has-color,
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/+page.svelte
index 736bcaa2ff..329011b86f 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
-<svelte:component this={data.component} message={data.message} />
+<data.component message={data.message} />
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/BoringComponent.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/BoringComponent.svelte
index 2a1aeca6db..9579475c90 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/BoringComponent.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/BoringComponent.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let message;
+	let { message } = $props();
 </script>
 
 <h1>{message}</h1>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/CoolComponent.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/CoolComponent.svelte
index c115e3d99c..873ed212cc 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/CoolComponent.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/+assets/app-a/src/routes/CoolComponent.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let message;
+	let { message } = $props();
 </script>
 
 <marquee>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/+assets/app-a/src/routes/sum/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/+assets/app-a/src/routes/sum/+page.svelte
index f3ebf32355..ef8dd3cd7a 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/+assets/app-a/src/routes/sum/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/+assets/app-a/src/routes/sum/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <p>{data.a} + {data.b} = {data.c}</p>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-a/src/routes/+layout.svelte
index 0e6e3f44bf..67d36a4671 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-a/src/routes/+layout.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <nav>
 	<a href="/America/New_York">New York</a>
 	<a href="/America/Sao_Paulo">São Paulo</a>
@@ -10,4 +14,4 @@
 	<a href="/America/Los_Angeles">Los Angeles</a>
 </nav>
 
-<slot />
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-a/src/routes/[...timezone]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-a/src/routes/[...timezone]/+page.svelte
index 22976ce1c4..ff19022581 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-a/src/routes/[...timezone]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-a/src/routes/[...timezone]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-b/src/routes/[...timezone]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-b/src/routes/[...timezone]/+page.svelte
index 6722ef9f07..d0cafffb4b 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-b/src/routes/[...timezone]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/+assets/app-b/src/routes/[...timezone]/+page.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { invalidate } from '$app/navigation';
 
-	export let data;
+	let { data } = $props();
 
 	onMount(() => {
 		const interval = setInterval(() => {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/index.md
index d3078f9d82..bf1257a466 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/index.md
@@ -17,7 +17,7 @@ In `src/routes/[...timezone]/+page.svelte`, add an `onMount` callback that calls
 	+++import { onMount } from 'svelte';+++
 	+++import { invalidate } from '$app/navigation';+++
 
-	export let data;
+	let { data } = $props();
 
 +++	onMount(() => {
 		const interval = setInterval(() => {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/05-custom-dependencies/+assets/app-b/src/routes/[...timezone]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/05-custom-dependencies/+assets/app-b/src/routes/[...timezone]/+page.svelte
index 7fcdc24715..e80bf00d32 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/05-custom-dependencies/+assets/app-b/src/routes/[...timezone]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/05-custom-dependencies/+assets/app-b/src/routes/[...timezone]/+page.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { invalidate } from '$app/navigation';
 
-	export let data;
+	let { data } = $props();
 
 	onMount(() => {
 		const interval = setInterval(() => {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/05-custom-dependencies/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/05-custom-dependencies/index.md
index fcc47e0999..2a10c6d7b1 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/05-custom-dependencies/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/05-custom-dependencies/index.md
@@ -28,7 +28,7 @@ Now, update the `invalidate` call in `src/routes/[...timezone]/+page.svelte`:
 	import { onMount } from 'svelte';
 	import { invalidate } from '$app/navigation';
 
-	export let data;
+	let { data } = $props();
 
 	onMount(() => {
 		const interval = setInterval(() => {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/+assets/app-b/src/routes/[...timezone]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/+assets/app-b/src/routes/[...timezone]/+page.svelte
index 4276591f6a..5e5fc019e1 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/+assets/app-b/src/routes/[...timezone]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/+assets/app-b/src/routes/[...timezone]/+page.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { invalidateAll } from '$app/navigation';
 
-	export let data;
+	let { data } = $props();
 
 	onMount(() => {
 		const interval = setInterval(() => {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/index.md
index e5343d4aea..2769bed54e 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/index.md
@@ -13,7 +13,7 @@ Update `src/routes/[...timezone]/+page.svelte` from the previous exercise:
 	import { onMount } from 'svelte';
 	import { +++invalidateAll+++ } from '$app/navigation';
 
-	export let data;
+	let { data } = $props();
 
 	onMount(() => {
 		const interval = setInterval(() => {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/+page.server.js b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/+page.server.js
index ebd2be0995..4b0764d41a 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/+page.server.js
@@ -2,7 +2,7 @@ import { redirect, fail } from '@sveltejs/kit';
 
 export function load({ cookies }) {
 	if (cookies.get('allowed')) {
-		throw redirect(307, '/welcome');
+		redirect(307, '/welcome');
 	}
 }
 
@@ -15,7 +15,7 @@ export const actions = {
 				path: '/'
 			});
 
-			throw redirect(303, '/welcome');
+			redirect(303, '/welcome');
 		}
 
 		return fail(403, {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/+page.svelte
index 492ac69154..82db6d309e 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let form;
+	let { form } = $props();
 </script>
 
 <form method="POST">
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/welcome/+page.server.js b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/welcome/+page.server.js
index 87b01cea18..f9a9efefea 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/welcome/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-a/src/routes/welcome/+page.server.js
@@ -3,13 +3,13 @@ import { error } from '@sveltejs/kit';
 
 export function load({ cookies }) {
 	if (!cookies.get('allowed')) {
-		throw error(403, 'Forbidden');
+		error(403, 'Forbidden');
 	}
 }
 
 export const actions = {
 	default: ({ cookies }) => {
 		cookies.delete('allowed', { path: '/' });
-		throw redirect(303, '/');
+		redirect(303, '/');
 	}
 };
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-b/src/routes/+page.server.js b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-b/src/routes/+page.server.js
index 761edc1d01..bb9c411af7 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-b/src/routes/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/+assets/app-b/src/routes/+page.server.js
@@ -3,7 +3,7 @@ import { PASSPHRASE } from '$env/static/private';
 
 export function load({ cookies }) {
 	if (cookies.get('allowed')) {
-		throw redirect(307, '/welcome');
+		redirect(307, '/welcome');
 	}
 }
 
@@ -16,7 +16,7 @@ export const actions = {
 				path: '/'
 			});
 
-			throw redirect(303, '/welcome');
+			redirect(303, '/welcome');
 		}
 
 		return fail(403, {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md
index 2160e5d1cd..15d472e275 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md
@@ -26,7 +26,7 @@ import { redirect, fail } from '@sveltejs/kit';
 
 export function load({ cookies }) {
 	if (cookies.get('allowed')) {
-		throw redirect(307, '/welcome');
+		redirect(307, '/welcome');
 	}
 }
 
@@ -39,7 +39,7 @@ export const actions = {
 				path: '/'
 			});
 
-			throw redirect(303, '/welcome');
+			redirect(303, '/welcome');
 		}
 
 		return fail(403, {
@@ -61,7 +61,7 @@ SvelteKit makes it easy to prevent this from happening. Notice what happens if w
 /// file: src/routes/+page.svelte
 <script>
 	+++import { PASSPHRASE } from '$env/static/private';+++
-	export let form;
+	let { form } = $props();
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/02-env-dynamic-private/+assets/app-b/src/routes/+page.server.js b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/02-env-dynamic-private/+assets/app-b/src/routes/+page.server.js
index 3339bff13f..22ca72bd9f 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/02-env-dynamic-private/+assets/app-b/src/routes/+page.server.js
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/02-env-dynamic-private/+assets/app-b/src/routes/+page.server.js
@@ -3,7 +3,7 @@ import { env } from '$env/dynamic/private';
 
 export function load({ cookies }) {
 	if (cookies.get('allowed')) {
-		throw redirect(307, '/welcome');
+		redirect(307, '/welcome');
 	}
 }
 
@@ -16,7 +16,7 @@ export const actions = {
 				path: '/'
 			});
 
-			throw redirect(303, '/welcome');
+			redirect(303, '/welcome');
 		}
 
 		return fail(403, {
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/02-env-dynamic-private/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/02-env-dynamic-private/index.md
index 4f7051798f..4f4a6f0450 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/02-env-dynamic-private/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/02-env-dynamic-private/index.md
@@ -11,7 +11,7 @@ import { +++env+++ } from '$env/+++dynamic+++/private';
 
 export function load({ cookies }) {
 	if (cookies.get('allowed')) {
-		throw redirect(307, '/welcome');
+		redirect(307, '/welcome');
 	}
 }
 
@@ -24,7 +24,7 @@ export const actions = {
 				path: '/'
 			});
 
-			throw redirect(303, '/welcome');
+			redirect(303, '/welcome');
 		}
 
 		return fail(403, {