diff --git a/examples/nextjs/app/[slug]/page.tsx b/examples/nextjs/app/[slug]/page.tsx
index 198fc66..b4eb070 100644
--- a/examples/nextjs/app/[slug]/page.tsx
+++ b/examples/nextjs/app/[slug]/page.tsx
@@ -1,5 +1,8 @@
 import { notFound } from 'next/navigation';
-import { ServerExperienceRenderer, resolveExperience } from '@contentful/experiences-react';
+import {
+  ExperienceRenderer,
+  resolveExperience,
+} from '@contentful/experiences-react';
 
 import { fetchExperience } from '@/lib/delivery-client';
 import { experienceConfig } from '@/lib/experience-config';
@@ -16,5 +19,11 @@ export default async function ExperiencePage({ params }: PageProps) {
 
   const experience = await resolveExperience(payload, experienceConfig);
 
-  return <ServerExperienceRenderer experience={experience} config={experienceConfig} />;
+  return (
+    <ExperienceRenderer
+      experience={experience}
+      config={experienceConfig}
+      enablePreview
+    />
+  );
 }
diff --git a/examples/nextjs/app/advanced/[slug]/page.tsx b/examples/nextjs/app/advanced/[slug]/page.tsx
index aed22d8..791547f 100644
--- a/examples/nextjs/app/advanced/[slug]/page.tsx
+++ b/examples/nextjs/app/advanced/[slug]/page.tsx
@@ -1,6 +1,9 @@
 import { headers } from 'next/headers';
 import { notFound } from 'next/navigation';
-import { ServerExperienceRenderer, resolveExperience } from '@contentful/experiences-react';
+import {
+  ExperienceRenderer,
+  resolveExperience,
+} from '@contentful/experiences-react';
 
 import { fetchExperience } from '@/lib/delivery-client';
 import { detectViewportFromUserAgent } from '@/lib/detect-viewport';
@@ -27,6 +30,13 @@ interface PageProps {
  *     `button` component and uppercases the editorial text. The SDK runs
  *     resolvers in parallel across nodes, so the slow resolver doesn't
  *     block the others.
+ *
+ * `ExperienceRenderer` is the hybrid renderer: this server component
+ * renders it directly, producing static first-paint HTML (via
+ * `ServerExperienceRenderer` internally). After hydration, it hands off
+ * to `ClientExperienceRenderer`, and the `enablePreview` flag arms the
+ * preview wire — a no-op outside the Contentful editor, an
+ * editor-driven live preview inside it.
  */
 export default async function AdvancedExperiencePage({ params, searchParams }: PageProps) {
   const { slug: experienceId } = await params;
@@ -49,11 +59,12 @@ export default async function AdvancedExperiencePage({ params, searchParams }: P
   });
 
   return (
-    <ServerExperienceRenderer
+    <ExperienceRenderer
       experience={experience}
       config={advancedExperienceConfig}
       initialViewportId={initialViewportId}
       context={{ isPreview: previewMode, metadata: { slug: experienceId, locale } }}
+      enablePreview
     />
   );
 }
diff --git a/examples/sveltekit/src/routes/[slug]/+page.svelte b/examples/sveltekit/src/routes/[slug]/+page.svelte
index 871acf2..d1076a2 100644
--- a/examples/sveltekit/src/routes/[slug]/+page.svelte
+++ b/examples/sveltekit/src/routes/[slug]/+page.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { ServerExperienceRenderer } from '@contentful/experiences-svelte';
+  import { ExperienceRenderer } from '@contentful/experiences-svelte';
 
   import { experienceConfig } from '$lib/experience-config.js';
 
   let { data } = $props();
 </script>
 
-<ServerExperienceRenderer
+<ExperienceRenderer
   experience={data.experience}
   config={experienceConfig}
   initialViewportId={data.initialViewportId}
   context={{ isPreview: data.previewMode, metadata: { slug: data.slug } }}
+  enablePreview
 />