diff --git a/e2e/kit/src/routes/svelte5-runes/component/Svelte5Component.svelte b/e2e/kit/src/routes/svelte5-runes/component/Svelte5Component.svelte
index f0d0d8321d..7d8bddfc3b 100644
--- a/e2e/kit/src/routes/svelte5-runes/component/Svelte5Component.svelte
+++ b/e2e/kit/src/routes/svelte5-runes/component/Svelte5Component.svelte
@@ -2,7 +2,10 @@
   import { graphql } from '$houdini';
   import type { Svelte5ComponentQueryVariables } from './$houdini';
 
-  const { id }: { id: string } = $props();
+  interface Props {
+    id: string;
+  }
+  const { id }: Props = $props();
 
   export const _Svelte5ComponentQueryVariables: Svelte5ComponentQueryVariables = ({ props }) => {
     return {
diff --git a/e2e/kit/src/routes/svelte5-runes/fragment/+page.svelte b/e2e/kit/src/routes/svelte5-runes/fragment/+page.svelte
index 3a7183abc0..3667c48b13 100644
--- a/e2e/kit/src/routes/svelte5-runes/fragment/+page.svelte
+++ b/e2e/kit/src/routes/svelte5-runes/fragment/+page.svelte
@@ -2,7 +2,10 @@
   import type { PageData } from './$houdini';
   import UserDetailsSvelte5 from './UserDetailsSvelte5.svelte';
 
-  const { data }: {data: PageData} = $props();
+  interface Props {
+    data: PageData;
+  }
+  const { data }: Props = $props();
   const { Svelte5UsersList } = $derived(data);
 </script>
 
diff --git a/e2e/kit/src/routes/svelte5-runes/fragment/UserDetailsSvelte5.svelte b/e2e/kit/src/routes/svelte5-runes/fragment/UserDetailsSvelte5.svelte
index b6b0bd6321..01edc748b4 100644
--- a/e2e/kit/src/routes/svelte5-runes/fragment/UserDetailsSvelte5.svelte
+++ b/e2e/kit/src/routes/svelte5-runes/fragment/UserDetailsSvelte5.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import { fragment, graphql, type Svelte5UserDetails } from '$houdini';
 
-  const { user }: { user: Svelte5UserDetails } = $props();
+  interface Props {
+    user: Svelte5UserDetails;
+  }
+  const { user }: Props = $props();
 
   const userDetails = fragment(
     user,
diff --git a/e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte b/e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte
index ffb328b8c0..ea3124bb15 100644
--- a/e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte
+++ b/e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte
@@ -2,7 +2,10 @@
   import { graphql } from '$houdini';
   import type { PageData } from './$houdini';
 
-  const { data }: { data: PageData } = $props();
+  interface Props {
+    data: PageData;
+  }
+  const { data }: Props = $props();
   const { Svelte5MutationGetData } = $derived(data);
 
   const changeNameMutation = graphql(`
diff --git a/e2e/kit/src/routes/svelte5-runes/pagination/+page.svelte b/e2e/kit/src/routes/svelte5-runes/pagination/+page.svelte
index 874e8d6fc0..fec87d8ec2 100644
--- a/e2e/kit/src/routes/svelte5-runes/pagination/+page.svelte
+++ b/e2e/kit/src/routes/svelte5-runes/pagination/+page.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { PageData } from './$houdini';
 
-  const { data }: { data: PageData } = $props();
+  interface Props {
+    data: PageData;
+  }
+  const { data }: Props = $props();
   const { Svelte5Pagination } = $derived(data);
 </script>
 
diff --git a/e2e/kit/src/routes/svelte5-runes/simple-ssr/+page.svelte b/e2e/kit/src/routes/svelte5-runes/simple-ssr/+page.svelte
index feeb1c3328..3fc2a6d70b 100644
--- a/e2e/kit/src/routes/svelte5-runes/simple-ssr/+page.svelte
+++ b/e2e/kit/src/routes/svelte5-runes/simple-ssr/+page.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { PageData } from './$houdini';
 
-  const { data }: { data: PageData } = $props();
+  interface Props {
+    data: PageData;
+  }
+  const { data }: Props = $props();
   const { Svelte5SimpleSSR } = $derived(data);
 </script>
 
diff --git a/site/src/routes/guides/svelte-5/+page.svx b/site/src/routes/guides/svelte-5/+page.svx
index 632f43f6eb..e2e07b3e4e 100644
--- a/site/src/routes/guides/svelte-5/+page.svx
+++ b/site/src/routes/guides/svelte-5/+page.svx
@@ -20,7 +20,10 @@ If your query is SSR'ed, you need to get the store from the PageData like so:
 <script lang="ts">
     import type { PageData } from './$houdini'
 
-    const { data }: { data: PageData } = $props();
+    interface Props {
+        data: PageData;
+    }
+    const { data }: Props = $props();
     const { MyProfile } = $derived(data);
 </script>
 
@@ -36,7 +39,10 @@ The only thing that changes with component queries is how your props are coming
     import { graphql } from '$houdini';
     import type { UserDetailsVariables } from './$houdini';
 
-    const { id }: { id: string } = $props();
+    interface Props {
+        id: string;
+    }
+    const { id }: Props = $props();
 
     export const _UserDetailsVariables: UserDetailsVariables = ({ props }) => {
         return {
@@ -64,7 +70,10 @@ Similar to component queries, the only thing that changes with fragments is how
 <script lang="ts">
     import { fragment, graphql, type UserCardFragment } from '$houdini';
 
-    const { user }: { user: UserCardFragment } = $props();
+    interface Props {
+        user: UserCardFragment
+    }
+    const { user }: Props = $props();
 
     const data = fragment(
         user,
@@ -103,5 +112,4 @@ Mutations are unchanged, simply use them as before:
 <button onclick={() => uncheckItem.mutate({ id: 'my-item' })}>
     Uncheck Item
 </button>
-
 ```