diff --git a/eslint.config.mjs b/eslint.config.mjs
index f31a2e6..dafdd42 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -28,12 +28,22 @@ export default [
         Element: 'readonly',
         MediaQueryList: 'readonly',
         MediaQueryListEvent: 'readonly',
+        MessageEvent: 'readonly',
+        ErrorEvent: 'readonly',
+        PromiseRejectionEvent: 'readonly',
+        URL: 'readonly',
         crypto: 'readonly',
         globalThis: 'readonly',
         setTimeout: 'readonly',
         clearTimeout: 'readonly',
         setInterval: 'readonly',
         clearInterval: 'readonly',
+        // Svelte 5 runes — read by the language server as compiler-time
+        // magic; the ESLint parser doesn't know about them.
+        $state: 'readonly',
+        $effect: 'readonly',
+        $derived: 'readonly',
+        $props: 'readonly',
       },
     },
     plugins: {
diff --git a/package-lock.json b/package-lock.json
index a0f80ea..8aa35b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2153,6 +2153,22 @@
       "resolved": "examples/sveltekit",
       "link": true
     },
+    "node_modules/@contentful/experiences-preview-core": {
+      "resolved": "packages/preview-core",
+      "link": true
+    },
+    "node_modules/@contentful/experiences-preview-react": {
+      "resolved": "packages/preview-adapter-react",
+      "link": true
+    },
+    "node_modules/@contentful/experiences-preview-svelte": {
+      "resolved": "packages/preview-adapter-svelte",
+      "link": true
+    },
+    "node_modules/@contentful/experiences-preview-web": {
+      "resolved": "packages/preview-web",
+      "link": true
+    },
     "node_modules/@contentful/experiences-react": {
       "resolved": "packages/adapter-react",
       "link": true
@@ -13061,7 +13077,8 @@
       "license": "MIT",
       "dependencies": {
         "@contentful/experiences-core": "*",
-        "@contentful/experiences-design": "*"
+        "@contentful/experiences-design": "*",
+        "@contentful/experiences-preview-react": "*"
       },
       "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",
@@ -13079,7 +13096,8 @@
       "license": "MIT",
       "dependencies": {
         "@contentful/experiences-core": "*",
-        "@contentful/experiences-design": "*"
+        "@contentful/experiences-design": "*",
+        "@contentful/experiences-preview-svelte": "*"
       },
       "devDependencies": {
         "@sveltejs/package": "^2.3.0",
@@ -13107,6 +13125,54 @@
       "dependencies": {
         "@contentful/experiences-core": "*"
       }
+    },
+    "packages/preview-adapter-react": {
+      "name": "@contentful/experiences-preview-react",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@contentful/experiences-core": "*",
+        "@contentful/experiences-preview-core": "*",
+        "@contentful/experiences-preview-web": "*"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "packages/preview-adapter-svelte": {
+      "name": "@contentful/experiences-preview-svelte",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@contentful/experiences-core": "*",
+        "@contentful/experiences-preview-core": "*",
+        "@contentful/experiences-preview-web": "*"
+      },
+      "devDependencies": {
+        "@sveltejs/package": "^2.3.0",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0",
+        "publint": "^0.2.0",
+        "svelte": "^5.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0"
+      }
+    },
+    "packages/preview-core": {
+      "name": "@contentful/experiences-preview-core",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@contentful/experiences-core": "*"
+      }
+    },
+    "packages/preview-web": {
+      "name": "@contentful/experiences-preview-web",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@contentful/experiences-preview-core": "*"
+      }
     }
   }
 }
diff --git a/packages/adapter-react/package.json b/packages/adapter-react/package.json
index 7b58185..0546418 100644
--- a/packages/adapter-react/package.json
+++ b/packages/adapter-react/package.json
@@ -31,7 +31,8 @@
   },
   "dependencies": {
     "@contentful/experiences-core": "*",
-    "@contentful/experiences-design": "*"
+    "@contentful/experiences-design": "*",
+    "@contentful/experiences-preview-react": "*"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/adapter-react/src/client-renderer.tsx b/packages/adapter-react/src/client-renderer.tsx
index 97cd3f8..0101e88 100644
--- a/packages/adapter-react/src/client-renderer.tsx
+++ b/packages/adapter-react/src/client-renderer.tsx
@@ -1,23 +1,38 @@
 /*
  * Client-side Experience renderer. Uses `useActiveViewport` to react to
- * window.matchMedia changes.
+ * `window.matchMedia` changes; throws on the server so pair it with
+ * `ServerExperienceRenderer` for SSR, or use `ExperienceRenderer` for the
+ * hybrid case (SSR first paint + client hydration + preview wire).
  *
- * Throws if rendered on the server — pair with `ServerExperienceRenderer`
- * for SSR. Use `initialViewportId` (typically derived from User-Agent on the
+ * Use `initialViewportId` (typically derived from User-Agent on the
  * server) to seed the first render, matching what the server emitted; the
- * hook then takes over via media queries to switch viewports as the window
- * resizes.
+ * hook then takes over via media queries to switch viewports as the
+ * window resizes.
+ *
+ * When `enablePreview` is set, the renderer additionally connects to the
+ * parent editor via postMessage on mount. Before `init` arrives — or when
+ * the app is not embedded in a known editor origin — rendering falls back
+ * to the `experience` prop. Once `init` arrives, the editor-delivered
+ * plan is rendered instead and every subsequent `viewUpdate` from the
+ * editor replaces it in place. Safe to leave on in production: the
+ * preview SDK's `ancestorOrigins` check refuses to connect when no editor
+ * is above the iframe.
  */
 
 'use client';
 
-import type { ReactNode } from 'react';
+import { useMemo, type ReactNode } from 'react';
 
 import type {
   ExperienceContext,
   PortableRenderPlan,
   ViewportDef,
 } from '@contentful/experiences-core';
+import type { PreviewCapabilities } from '@contentful/experiences-preview-react';
+import {
+  usePreviewOverride,
+  useResolvedPreviewPlan,
+} from '@contentful/experiences-preview-react';
 
 import { MissingComponent } from './missing-component';
 import { NodesRenderer, WrapWithTemplate, type RenderUnknown } from './nodes-renderer';
@@ -49,6 +64,37 @@ export interface ClientExperienceRendererProps {
   initialViewportId?: string;
   context?: Partial<ExperienceContext>;
   renderUnknown?: RenderUnknown;
+
+  /**
+   * Opt in to Contentful editor preview.
+   *
+   * When enabled, the renderer connects to the parent editor via
+   * postMessage on mount. Before `init` arrives — or when the app is not
+   * embedded in a known editor origin — rendering falls back to the
+   * `experience` prop. Once `init` arrives, the editor's plan is rendered
+   * instead and every subsequent `viewUpdate` from the editor replaces it
+   * in place.
+   *
+   * Safe to leave on in production: the SDK checks `ancestorOrigins`
+   * against a hardcoded allow-list of Contentful editor origins and is a
+   * no-op when no match is found.
+   */
+  enablePreview?: boolean;
+
+  /**
+   * Preview capabilities advertised to the editor. Defaults to fully
+   * reactive (`liveUpdate: true`). Set `liveUpdate: false` to opt out of
+   * `viewUpdate` — the editor will reload the iframe on save instead of
+   * pushing incremental updates. Ignored when `enablePreview` is false.
+   */
+  previewCapabilities?: Partial<PreviewCapabilities>;
+
+  /**
+   * Optional origin override for the editor postMessage target. Accepts a
+   * single origin or an array. Useful for self-hosted proxies, staging
+   * setups, or tests. Ignored when `enablePreview` is false.
+   */
+  previewTargetOrigin?: string | string[];
 }
 
 export function ClientExperienceRenderer({
@@ -57,16 +103,46 @@ export function ClientExperienceRenderer({
   initialViewportId,
   context,
   renderUnknown = MissingComponent,
+  enablePreview = false,
+  previewCapabilities,
+  previewTargetOrigin,
 }: ClientExperienceRendererProps): ReactNode {
   if (typeof window === 'undefined') {
     throw new Error(
-      'ClientExperienceRenderer cannot be used on the server. Use ServerExperienceRenderer for SSR.'
+      'ClientExperienceRenderer cannot be used on the server. Use ServerExperienceRenderer for SSR-only routes, or ExperienceRenderer for the hybrid case.'
     );
   }
-  if (!experience) return null;
+
+  // Set of component-type ids the customer registered — used by the
+  // preview hook to detect missing components in the incoming view and
+  // report `partial` render status back to the editor.
+  const knownComponentTypeIds = useMemo(
+    () => new Set(Object.keys(config.components)),
+    [config.components]
+  );
+
+  const preview = usePreviewOverride(
+    {
+      enabled: enablePreview,
+      capabilities: previewCapabilities,
+      targetOrigin: previewTargetOrigin,
+    },
+    enablePreview ? knownComponentTypeIds : null
+  );
+
+  // Convert the API-generic HydratedView from the wire into the renderer's
+  // internal `PortableRenderPlan` via the same `resolveExperience` path
+  // customers use for their fetched payloads.
+  const previewPlan = useResolvedPreviewPlan(preview.view, config);
+
+  // postMessage view wins once it arrives (and finishes resolving);
+  // otherwise the prop is authoritative.
+  const activeExperience = previewPlan ?? experience;
+  if (!activeExperience) return null;
+
   return (
     <ClientExperienceRendererInner
-      experience={experience}
+      experience={activeExperience}
       config={config}
       initialViewportId={initialViewportId}
       context={context}
diff --git a/packages/adapter-react/src/experience-renderer.tsx b/packages/adapter-react/src/experience-renderer.tsx
new file mode 100644
index 0000000..d21036c
--- /dev/null
+++ b/packages/adapter-react/src/experience-renderer.tsx
@@ -0,0 +1,73 @@
+/*
+ * Hybrid Experience renderer — the one to pick for any route that needs
+ * both SSR (for first-paint HTML, SEO, LCP) and client-side interactivity
+ * (`enablePreview`, or any other feature exclusive to the client
+ * renderer).
+ *
+ * Behavior in one sentence: on the server, and on the very first client
+ * render (before hydration), emits exactly what `ServerExperienceRenderer`
+ * would; on every render after hydration, delegates to
+ * `ClientExperienceRenderer`. React's `useSyncExternalStore` with a
+ * `false` server snapshot gives us the two-phase behavior without a
+ * hydration mismatch.
+ *
+ * The three renderers form a clear split:
+ *   - `ServerExperienceRenderer` — RSC-only. No hydration, no state.
+ *   - `ClientExperienceRenderer` — client-only. Throws on the server.
+ *   - `ExperienceRenderer` (this file) — universal. SSR first paint +
+ *     client hydration + `enablePreview` in one component.
+ *
+ * Customers pick by intent: pure marketing routes take
+ * `ServerExperienceRenderer`; preview-capable and interactive routes take
+ * `ExperienceRenderer`; advanced client-only setups (tests, native
+ * shells) take `ClientExperienceRenderer`.
+ */
+
+'use client';
+
+import { useSyncExternalStore, type ReactNode } from 'react';
+
+import {
+  ClientExperienceRenderer,
+  type ClientExperienceRendererProps,
+} from './client-renderer';
+import { ServerExperienceRenderer } from './server-renderer';
+
+// Stable references so `useSyncExternalStore` doesn't refire on every
+// render. `NOOP_SUBSCRIBE` never invokes its listener; the store's value
+// is derived purely from the server-vs-client distinction.
+const NOOP_SUBSCRIBE = (): (() => void) => () => {};
+const IS_HYDRATED_TRUE = (): boolean => true;
+const IS_HYDRATED_FALSE = (): boolean => false;
+
+export type ExperienceRendererProps = ClientExperienceRendererProps;
+
+export function ExperienceRenderer(props: ExperienceRendererProps): ReactNode {
+  // Server snapshot returns `false`; first client render before hydration
+  // also returns `false` (matches SSR HTML); after hydration flips to
+  // `true` and re-renders as the client variant.
+  const isHydrated = useSyncExternalStore(
+    NOOP_SUBSCRIBE,
+    IS_HYDRATED_TRUE,
+    IS_HYDRATED_FALSE
+  );
+
+  if (!isHydrated) {
+    // Server-render and pre-hydration client-render take the same code
+    // path — byte-identical HTML on both sides means hydration doesn't
+    // warn. Preview-specific props are dropped here on purpose; the
+    // server renderer doesn't consume them and the client renderer picks
+    // them up on the very next render after hydration.
+    return (
+      <ServerExperienceRenderer
+        experience={props.experience}
+        config={props.config}
+        initialViewportId={props.initialViewportId}
+        context={props.context}
+        renderUnknown={props.renderUnknown}
+      />
+    );
+  }
+
+  return <ClientExperienceRenderer {...props} />;
+}
diff --git a/packages/adapter-react/src/index.ts b/packages/adapter-react/src/index.ts
index 54a2e81..1aed571 100644
--- a/packages/adapter-react/src/index.ts
+++ b/packages/adapter-react/src/index.ts
@@ -8,16 +8,19 @@
  * `@contentful/experiences-design` packages are workspace-only implementation
  * details; they are not part of the public API.
  *
- * `ExperienceRenderer` is an alias for `ClientExperienceRenderer`; SSR
- * consumers explicitly import `ServerExperienceRenderer`.
+ * Three renderers, one per intent:
+ *   - `ServerExperienceRenderer` — RSC-only, static HTML, zero client-JS.
+ *   - `ClientExperienceRenderer` — client-only; throws on the server.
+ *     Use for tests, native shells, or apps that never SSR.
+ *   - `ExperienceRenderer` — hybrid; SSR first paint + client hydration +
+ *     `enablePreview`. Pick this for any route that needs both.
  */
 
 // ─── Renderers ─────────────────────────────────────────────────────────────
-export {
-  ClientExperienceRenderer as ExperienceRenderer,
-  ClientExperienceRenderer,
-} from './client-renderer';
-export type { ClientExperienceRendererProps as ExperienceRendererProps } from './client-renderer';
+export { ExperienceRenderer } from './experience-renderer';
+export type { ExperienceRendererProps } from './experience-renderer';
+
+export { ClientExperienceRenderer } from './client-renderer';
 export type { ClientExperienceRendererProps } from './client-renderer';
 
 export { ServerExperienceRenderer } from './server-renderer';
@@ -31,6 +34,39 @@ export type { UseActiveViewportResult } from './use-active-viewport';
 
 export type { RenderUnknown } from './nodes-renderer';
 
+// ─── Preview (editor integration) ─────────────────────────────────────────
+// The React preview adapter is a sibling package; everything below is
+// re-exported so consumers of `@contentful/experiences-react` never need
+// to install or import from the preview packages directly.
+export { usePreviewOverride, useResolvedPreviewPlan } from '@contentful/experiences-preview-react';
+export type {
+  UsePreviewOverrideOptions,
+  UsePreviewOverrideResult,
+} from '@contentful/experiences-preview-react';
+
+// Advanced-use re-exports for customers building custom preview flows on
+// top of the primitives (custom transports, non-renderer consumers).
+export {
+  MESSAGE as PREVIEW_MESSAGE,
+  PROTOCOL_VERSION as PREVIEW_PROTOCOL_VERSION,
+  SOURCE as PREVIEW_SOURCE,
+  PreviewClient,
+  createPostMessageChannel,
+  isEnvelope as isPreviewEnvelope,
+  isMessage as isPreviewMessage,
+} from '@contentful/experiences-preview-react';
+export type {
+  CreatePostMessageChannelOptions,
+  HandshakeStatus as PreviewHandshakeStatus,
+  HydratedView,
+  MessageHandler as PreviewMessageHandler,
+  PreviewCapabilities,
+  PreviewChannel,
+  PreviewClientOptions,
+  PreviewSnapshot,
+  RenderStatus as PreviewRenderStatus,
+} from '@contentful/experiences-preview-react';
+
 // ─── Authoring helpers + Config types ─────────────────────────────────────
 export { defineComponent, defineTemplate } from './types';
 export type {
diff --git a/packages/adapter-react/src/server-renderer.tsx b/packages/adapter-react/src/server-renderer.tsx
index c830c2f..d9ec6b5 100644
--- a/packages/adapter-react/src/server-renderer.tsx
+++ b/packages/adapter-react/src/server-renderer.tsx
@@ -1,12 +1,15 @@
 /*
- * Server-safe Experience renderer. Resolves the active viewport once from
+ * Server-only Experience renderer. Resolves the active viewport once from
  * `initialViewportId` (typically derived from User-Agent on the request)
- * and renders without any reactive subscription. RSC-friendly.
+ * and renders without any reactive subscription. RSC-friendly; produces
+ * static HTML with zero client-JS overhead.
  *
- * SSR + interactive editor mode are mutually exclusive — the message-event
- * preview client requires window listeners and lives only in the client
- * renderer. For editor mode, dynamically import the client variant behind
- * a `"use client"` boundary.
+ * Pick this when the route has no client-side interactivity — pure
+ * marketing pages, blog posts, landing pages. For routes that also need
+ * `enablePreview` (or any other client-side behavior once hydrated), use
+ * `ExperienceRenderer` — it emits the same SSR HTML this component would
+ * for first paint, then hands off to `ClientExperienceRenderer` on
+ * hydration.
  */
 
 import type { ReactNode } from 'react';
diff --git a/packages/adapter-svelte/package.json b/packages/adapter-svelte/package.json
index b0187a4..4ac1fbf 100644
--- a/packages/adapter-svelte/package.json
+++ b/packages/adapter-svelte/package.json
@@ -36,7 +36,8 @@
   },
   "dependencies": {
     "@contentful/experiences-core": "*",
-    "@contentful/experiences-design": "*"
+    "@contentful/experiences-design": "*",
+    "@contentful/experiences-preview-svelte": "*"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
diff --git a/packages/adapter-svelte/src/ClientExperienceRenderer.svelte b/packages/adapter-svelte/src/ClientExperienceRenderer.svelte
index 3505aaa..3bfcc0a 100644
--- a/packages/adapter-svelte/src/ClientExperienceRenderer.svelte
+++ b/packages/adapter-svelte/src/ClientExperienceRenderer.svelte
@@ -1,15 +1,28 @@
 <!--
  * Client-side Experience renderer. Uses the `useActiveViewport` rune to
- * react to `window.matchMedia` changes.
+ * react to `window.matchMedia` changes; throws on the server so pair it
+ * with `ServerExperienceRenderer` for SSR, or use `ExperienceRenderer`
+ * for the hybrid case (SSR first paint + client hydration + preview
+ * wire).
  *
- * Throws if rendered on the server — pair with `ServerExperienceRenderer`
- * for SSR. Use `initialViewportId` (typically derived from User-Agent on
- * the server) to seed the first render, matching what the server emitted;
+ * Use `initialViewportId` (typically derived from User-Agent on the
+ * server) to seed the first render, matching what the server emitted;
  * the rune then takes over via media queries to switch viewports as the
  * window resizes.
+ *
+ * When `enablePreview` is set, the renderer additionally connects to the
+ * parent editor via postMessage on mount. Before `init` arrives — or
+ * when the app is not embedded in a known editor origin — rendering
+ * stays with the `experience` prop. Once `init` arrives, the editor's
+ * plan is rendered instead and subsequent `viewUpdate` messages replace
+ * it in place.
 -->
 <script lang="ts">
   import type { ExperienceContext, ViewportDef } from '@contentful/experiences-core';
+  import {
+    createPreviewOverride,
+    createResolvedPreviewPlan,
+  } from '@contentful/experiences-preview-svelte';
 
   import MissingComponent from './MissingComponent.svelte';
   import NodesRenderer from './NodesRenderer.svelte';
@@ -37,36 +50,63 @@
     initialViewportId,
     context,
     renderUnknown = MissingComponent,
+    enablePreview = false,
+    previewCapabilities,
+    previewTargetOrigin,
   }: ClientExperienceRendererProps = $props();
 
   if (typeof window === 'undefined') {
     throw new Error(
-      'ClientExperienceRenderer cannot be used on the server. Use ServerExperienceRenderer for SSR.'
+      'ClientExperienceRenderer cannot be used on the server. Use ServerExperienceRenderer for SSR-only routes, or ExperienceRenderer for the hybrid case.'
     );
   }
 
-  const viewports = $derived(experience?.viewports ?? []);
+  // Set of component-type ids the customer registered — used by the
+  // preview override to detect missing components in the incoming view
+  // and report `partial` render status back to the editor.
+  const knownComponentTypeIds = $derived(new Set(Object.keys(config.components)));
+
+  const preview = createPreviewOverride(
+    {
+      enabled: enablePreview,
+      capabilities: previewCapabilities,
+      targetOrigin: previewTargetOrigin,
+    },
+    // Only pass the known set when preview is on; otherwise the override
+    // reports `ok` unconditionally (and no work happens in the effect
+    // because the handshake never advances).
+    enablePreview ? knownComponentTypeIds : null
+  );
+
+  const resolved = createResolvedPreviewPlan(() => preview.view, config);
+
+  // postMessage view wins once it arrives (and finishes resolving);
+  // otherwise the prop is authoritative.
+  const activeExperience = $derived(resolved.plan ?? experience);
+
+  const viewports = $derived(activeExperience?.viewports ?? []);
   const tracker = useActiveViewport(viewports, initialViewportId);
 
   const renderContext = $derived.by((): RenderContext | null => {
-    if (!experience) return null;
-    const activeViewport = experience.viewports[tracker.activeViewportIndex] ?? FALLBACK_VIEWPORT;
+    if (!activeExperience) return null;
+    const activeViewport =
+      activeExperience.viewports[tracker.activeViewportIndex] ?? FALLBACK_VIEWPORT;
     return {
       ...DEFAULT_CONTEXT,
       ...context,
       metadata: { ...DEFAULT_CONTEXT.metadata, ...(context?.metadata ?? {}) },
-      viewports: experience.viewports,
+      viewports: activeExperience.viewports,
       activeViewport,
       activeViewportIndex: tracker.activeViewportIndex,
     };
   });
 </script>
 
-{#if experience && renderContext}
-  <WrapWithTemplate template={experience.template} {config} experience={renderContext}>
+{#if activeExperience && renderContext}
+  <WrapWithTemplate template={activeExperience.template} {config} experience={renderContext}>
     {#snippet children()}
       <NodesRenderer
-        nodes={experience.nodes}
+        nodes={activeExperience.nodes}
         {config}
         experience={renderContext}
         {renderUnknown}
diff --git a/packages/adapter-svelte/src/ExperienceRenderer.svelte b/packages/adapter-svelte/src/ExperienceRenderer.svelte
new file mode 100644
index 0000000..1da6fcc
--- /dev/null
+++ b/packages/adapter-svelte/src/ExperienceRenderer.svelte
@@ -0,0 +1,46 @@
+<!--
+ * Hybrid Experience renderer — the one to pick for any route that
+ * needs both SSR (for first-paint HTML, SEO, LCP) and client-side
+ * interactivity (`enablePreview`, or any other feature exclusive to
+ * the client renderer).
+ *
+ * On the server, and on the very first client render before
+ * hydration, emits exactly what `ServerExperienceRenderer` would; on
+ * every render after hydration, delegates to
+ * `ClientExperienceRenderer`. Svelte 5's `$effect` runs only on the
+ * client, so setting a `$state` inside it gives us the two-phase
+ * behavior without a hydration mismatch.
+ *
+ * The three renderers form a clear split:
+ *   - `ServerExperienceRenderer` — SSR-only, static HTML, zero client-JS.
+ *   - `ClientExperienceRenderer` — client-only; throws on the server.
+ *   - `ExperienceRenderer` (this file) — universal. SSR first paint +
+ *     client hydration + `enablePreview` in one component.
+-->
+<script lang="ts">
+  import ClientExperienceRenderer from './ClientExperienceRenderer.svelte';
+  import ServerExperienceRenderer from './ServerExperienceRenderer.svelte';
+  import type { ClientExperienceRendererProps } from './component-props.js';
+
+  const props: ClientExperienceRendererProps = $props();
+
+  // Starts false during SSR and on the pre-hydration client render;
+  // flips to true from an $effect (client-only). React idiom is
+  // useSyncExternalStore; Svelte's is a $state that $effect owns.
+  let isHydrated = $state(false);
+  $effect(() => {
+    isHydrated = true;
+  });
+</script>
+
+{#if isHydrated}
+  <ClientExperienceRenderer {...props} />
+{:else}
+  <ServerExperienceRenderer
+    experience={props.experience}
+    config={props.config}
+    initialViewportId={props.initialViewportId}
+    context={props.context}
+    renderUnknown={props.renderUnknown}
+  />
+{/if}
diff --git a/packages/adapter-svelte/src/ServerExperienceRenderer.svelte b/packages/adapter-svelte/src/ServerExperienceRenderer.svelte
index 84f2270..5691b16 100644
--- a/packages/adapter-svelte/src/ServerExperienceRenderer.svelte
+++ b/packages/adapter-svelte/src/ServerExperienceRenderer.svelte
@@ -1,11 +1,15 @@
 <!--
- * Server-safe Experience renderer. Resolves the active viewport once from
- * `initialViewportId` (typically derived from User-Agent on the request)
- * and renders without any reactive subscription. SSR-friendly.
+ * Server-only Experience renderer. Resolves the active viewport once
+ * from `initialViewportId` (typically derived from User-Agent on the
+ * request) and renders without any reactive subscription. Produces
+ * static HTML with zero client-JS overhead.
  *
- * SSR + interactive editor mode are mutually exclusive — the message-event
- * preview client requires window listeners and lives only in the client
- * renderer. For editor mode, render the client variant on a hydrated route.
+ * Pick this when the route has no client-side interactivity — pure
+ * marketing pages, blog posts, landing pages. For routes that also need
+ * `enablePreview` (or any other client-side behavior once hydrated), use
+ * `ExperienceRenderer` — it emits the same SSR HTML this component
+ * would for first paint, then hands off to `ClientExperienceRenderer`
+ * on hydration.
 -->
 <script lang="ts">
   import type { ExperienceContext, ViewportDef } from '@contentful/experiences-core';
diff --git a/packages/adapter-svelte/src/component-props.ts b/packages/adapter-svelte/src/component-props.ts
index b655154..25cf6d0 100644
--- a/packages/adapter-svelte/src/component-props.ts
+++ b/packages/adapter-svelte/src/component-props.ts
@@ -14,6 +14,7 @@
 import type { Component } from 'svelte';
 
 import type { ExperienceContext, PortableRenderPlan } from '@contentful/experiences-core';
+import type { PreviewCapabilities } from '@contentful/experiences-preview-svelte';
 
 import type { Config, RenderContext } from './types.js';
 
@@ -25,7 +26,19 @@ export interface ServerExperienceRendererProps {
   renderUnknown?: RenderUnknown;
 }
 
-export type ClientExperienceRendererProps = ServerExperienceRendererProps;
+export interface ClientExperienceRendererProps extends ServerExperienceRendererProps {
+  /**
+   * Opt in to Contentful editor preview. See `ClientExperienceRenderer` in
+   * `@contentful/experiences-react` for full docs — behavior is identical.
+   */
+  enablePreview?: boolean;
+
+  /** Preview capabilities advertised to the editor. Ignored when `enablePreview` is false. */
+  previewCapabilities?: Partial<PreviewCapabilities>;
+
+  /** Editor origin override for the postMessage target. Ignored when `enablePreview` is false. */
+  previewTargetOrigin?: string | string[];
+}
 
 export interface MissingComponentProps {
   componentTypeId: string;
diff --git a/packages/adapter-svelte/src/index.ts b/packages/adapter-svelte/src/index.ts
index dfaf0d3..279f47b 100644
--- a/packages/adapter-svelte/src/index.ts
+++ b/packages/adapter-svelte/src/index.ts
@@ -8,19 +8,59 @@
  * `@contentful/experiences-design` packages are workspace-only implementation
  * details; they are not part of the public API.
  *
- * `ExperienceRenderer` is an alias for `ClientExperienceRenderer`; SSR
- * consumers explicitly import `ServerExperienceRenderer`.
+ * Three renderers, one per intent:
+ *   - `ServerExperienceRenderer` — SSR-only, static HTML, zero client-JS.
+ *   - `ClientExperienceRenderer` — client-only; throws on the server.
+ *     Use for tests, native shells, or apps that never SSR.
+ *   - `ExperienceRenderer` — hybrid; SSR first paint + client hydration +
+ *     `enablePreview`. Pick this for any route that needs both.
  */
 
 // ─── Renderers ─────────────────────────────────────────────────────────────
+export { default as ExperienceRenderer } from './ExperienceRenderer.svelte';
 export { default as ClientExperienceRenderer } from './ClientExperienceRenderer.svelte';
-export { default as ExperienceRenderer } from './ClientExperienceRenderer.svelte';
 export { default as ServerExperienceRenderer } from './ServerExperienceRenderer.svelte';
 export { default as MissingComponent } from './MissingComponent.svelte';
 
 export { useActiveViewport } from './use-active-viewport.svelte.js';
 export type { UseActiveViewportResult } from './use-active-viewport.svelte.js';
 
+// ─── Preview (editor integration) ─────────────────────────────────────────
+// The Svelte preview adapter is a sibling package; everything below is
+// re-exported so consumers of `@contentful/experiences-svelte` never need
+// to install or import from the preview packages directly.
+export {
+  createPreviewOverride,
+  createResolvedPreviewPlan,
+} from '@contentful/experiences-preview-svelte';
+export type {
+  CreatePreviewOverrideOptions,
+  PreviewOverride,
+  ResolvedPreviewPlan,
+} from '@contentful/experiences-preview-svelte';
+
+// Advanced-use re-exports for customers building custom preview flows.
+export {
+  MESSAGE as PREVIEW_MESSAGE,
+  PROTOCOL_VERSION as PREVIEW_PROTOCOL_VERSION,
+  SOURCE as PREVIEW_SOURCE,
+  PreviewClient,
+  createPostMessageChannel,
+  isEnvelope as isPreviewEnvelope,
+  isMessage as isPreviewMessage,
+} from '@contentful/experiences-preview-svelte';
+export type {
+  CreatePostMessageChannelOptions,
+  HandshakeStatus as PreviewHandshakeStatus,
+  HydratedView,
+  MessageHandler as PreviewMessageHandler,
+  PreviewCapabilities,
+  PreviewChannel,
+  PreviewClientOptions,
+  PreviewSnapshot,
+  RenderStatus as PreviewRenderStatus,
+} from '@contentful/experiences-preview-svelte';
+
 // Component prop shapes live in component-props.ts (not .svelte module
 // blocks) so `tsc --noEmit` can see them without the Svelte language server.
 export type {
diff --git a/packages/preview-adapter-react/package.json b/packages/preview-adapter-react/package.json
new file mode 100644
index 0000000..3040a04
--- /dev/null
+++ b/packages/preview-adapter-react/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@contentful/experiences-preview-react",
+  "version": "0.1.0",
+  "description": "React adapter for the Contentful Experiences preview protocol",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/experiences.git",
+    "directory": "packages/preview-adapter-react"
+  },
+  "dependencies": {
+    "@contentful/experiences-core": "*",
+    "@contentful/experiences-preview-core": "*",
+    "@contentful/experiences-preview-web": "*"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}
diff --git a/packages/preview-adapter-react/project.json b/packages/preview-adapter-react/project.json
new file mode 100644
index 0000000..2514f3a
--- /dev/null
+++ b/packages/preview-adapter-react/project.json
@@ -0,0 +1,19 @@
+{
+  "name": "preview-adapter-react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/preview-adapter-react/src",
+  "projectType": "library",
+  "tags": ["scope:preview", "runtime:react"],
+  "targets": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/dist"],
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/preview-adapter-react",
+        "command": "tsup"
+      }
+    }
+  }
+}
diff --git a/packages/preview-adapter-react/src/index.ts b/packages/preview-adapter-react/src/index.ts
new file mode 100644
index 0000000..89e2462
--- /dev/null
+++ b/packages/preview-adapter-react/src/index.ts
@@ -0,0 +1,44 @@
+/*
+ * Public API surface for `@contentful/experiences-preview-react`.
+ *
+ * Consumed by `@contentful/experiences-react` internally when a customer
+ * sets `enablePreview` on `ClientExperienceRenderer`. Advanced customers
+ * building their own renderer flow can import from this package directly.
+ */
+
+export { usePreviewOverride } from './use-preview-override';
+export type {
+  UsePreviewOverrideOptions,
+  UsePreviewOverrideResult,
+} from './use-preview-override';
+
+export { useResolvedPreviewPlan } from './use-resolved-preview-plan';
+
+// Re-export the framework-agnostic surface so consumers who install only
+// this package have a single import path for everything preview-related.
+export {
+  MESSAGE,
+  PROTOCOL_VERSION,
+  SOURCE,
+  PreviewClient,
+  isEnvelope,
+  isMessage,
+} from '@contentful/experiences-preview-core';
+export type {
+  AnyMessage,
+  Envelope,
+  HandshakeStatus,
+  HydratedView,
+  InitContext,
+  MessageHandler,
+  MessageType,
+  PreviewCapabilities,
+  PreviewChannel,
+  PreviewClientOptions,
+  PreviewSnapshot,
+  ReadyPayload,
+  RenderedPayload,
+  RenderStatus,
+} from '@contentful/experiences-preview-core';
+export { createPostMessageChannel } from '@contentful/experiences-preview-web';
+export type { CreatePostMessageChannelOptions } from '@contentful/experiences-preview-web';
diff --git a/packages/preview-adapter-react/src/use-preview-override.ts b/packages/preview-adapter-react/src/use-preview-override.ts
new file mode 100644
index 0000000..6a90380
--- /dev/null
+++ b/packages/preview-adapter-react/src/use-preview-override.ts
@@ -0,0 +1,220 @@
+'use client';
+
+/*
+ * usePreviewOverride — React hook that wires a `PreviewClient` to the
+ * renderer. Used internally by `ClientExperienceRenderer` when the
+ * `enablePreview` prop is set; also exported for advanced customers
+ * who want to compose their own renderer flow.
+ *
+ * When `enabled` is false, when the app is not embedded in a Contentful
+ * editor (no matching ancestor origin), or before the handshake completes,
+ * the hook returns `undefined` — the renderer falls back to the `experience`
+ * prop. Once `init` arrives, the returned view takes precedence and
+ * subsequent `viewUpdate` messages replace it.
+ *
+ * The `view` in the returned result is the API-generic `HydratedView`
+ * (structurally an `ExperiencePayload`). Callers convert it into a
+ * `PortableRenderPlan` via `resolveExperience` before handing it to a
+ * renderer.
+ */
+
+import { useEffect, useRef, useSyncExternalStore } from 'react';
+
+import type { ExperienceNode } from '@contentful/experiences-core';
+import type {
+  HydratedView,
+  PreviewCapabilities,
+  PreviewSnapshot,
+  RenderStatus,
+} from '@contentful/experiences-preview-core';
+import { PreviewClient } from '@contentful/experiences-preview-core';
+import {
+  createPostMessageChannel,
+  type CreatePostMessageChannelOptions,
+} from '@contentful/experiences-preview-web';
+
+export interface UsePreviewOverrideOptions {
+  // Master gate. When false, the hook returns an inert snapshot and
+  // installs nothing — same cost as not calling it.
+  enabled: boolean;
+
+  // Optional partial capabilities. Defaults to a fully-reactive preview
+  // that accepts `viewUpdate` and does not report geometry.
+  capabilities?: Partial<PreviewCapabilities>;
+
+  // Optional feature list to negotiate against the editor.
+  supportedFeatures?: string[];
+
+  // Origin override — pass when the editor is not on a default allow-listed
+  // origin (self-hosted proxies, staging setups, tests).
+  targetOrigin?: CreatePostMessageChannelOptions['targetOrigin'];
+}
+
+export interface UsePreviewOverrideResult {
+  // The view to render, or `undefined` when preview is off / not yet
+  // received. Callers fall back to their own `experience` prop.
+  view: HydratedView | undefined;
+
+  handshakeStatus: PreviewSnapshot['handshakeStatus'];
+  renderStatus: RenderStatus;
+  missingComponents: string[];
+  isReactive: boolean;
+  sessionId: string | undefined;
+}
+
+const DEFAULT_CAPABILITIES: PreviewCapabilities = {
+  liveUpdate: true,
+  alreadyRendered: false,
+  nodeGeometry: false,
+};
+
+const DEFAULT_SUPPORTED_FEATURES = ['viewUpdate'];
+
+const INERT_SNAPSHOT: PreviewSnapshot = {
+  handshakeStatus: 'idle',
+  renderStatus: 'pending',
+  sessionId: undefined,
+  view: undefined,
+  context: undefined,
+  missingComponents: [],
+  error: undefined,
+};
+
+export function usePreviewOverride(
+  options: UsePreviewOverrideOptions,
+  // Optional set of component-type ids the caller knows how to render.
+  // When provided, the hook reports `partial` with the missing ids so the
+  // editor can surface them; when omitted, the hook reports `ok`.
+  knownComponentTypeIds?: ReadonlySet<string> | null
+): UsePreviewOverrideResult {
+  const { enabled } = options;
+
+  // Keep option inputs in refs so callers passing inline objects don't
+  // tear the client down on every render.
+  const capabilitiesRef = useRef<PreviewCapabilities>({
+    ...DEFAULT_CAPABILITIES,
+    ...(options.capabilities ?? {}),
+  });
+  const supportedFeaturesRef = useRef<string[]>(
+    options.supportedFeatures ?? DEFAULT_SUPPORTED_FEATURES
+  );
+  const targetOriginRef = useRef(options.targetOrigin);
+  targetOriginRef.current = options.targetOrigin;
+
+  const clientRef = useRef<PreviewClient | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const channel = createPostMessageChannel({
+      targetOrigin: targetOriginRef.current,
+    });
+    if (!channel) {
+      // Not embedded in a recognised editor. Renderer falls back to prop.
+      return;
+    }
+
+    const client = new PreviewClient({
+      channel,
+      supportedFeatures: supportedFeaturesRef.current,
+      capabilities: capabilitiesRef.current,
+    });
+    clientRef.current = client;
+    client.start();
+
+    const onError = (event: ErrorEvent) => {
+      client.reportError({ message: event.message, stack: event.error?.stack });
+    };
+    const onUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      const message =
+        reason instanceof Error ? reason.message : String(reason ?? 'unhandledrejection');
+      const stack = reason instanceof Error ? reason.stack : undefined;
+      client.reportError({ message, stack });
+    };
+    window.addEventListener('error', onError);
+    window.addEventListener('unhandledrejection', onUnhandledRejection);
+
+    return () => {
+      window.removeEventListener('error', onError);
+      window.removeEventListener('unhandledrejection', onUnhandledRejection);
+      client.close();
+      clientRef.current = null;
+    };
+  }, [enabled]);
+
+  const snapshot = useSyncExternalStore<PreviewSnapshot>(
+    (listener) => {
+      if (!clientRef.current) return () => {};
+      return clientRef.current.subscribe(listener);
+    },
+    () => clientRef.current?.getSnapshot() ?? INERT_SNAPSHOT,
+    () => INERT_SNAPSHOT
+  );
+
+  // After each init/viewUpdate, walk the view and report render status by
+  // extracting component-type ids from URNs and comparing against the
+  // known set.
+  useEffect(() => {
+    if (snapshot.handshakeStatus !== 'initialized') return;
+    if (!snapshot.view) return;
+    if (snapshot.renderStatus !== 'pending') return;
+
+    if (!knownComponentTypeIds) {
+      clientRef.current?.reportRendered({ status: 'ok', missingComponents: [] });
+      return;
+    }
+
+    const missing = new Set<string>();
+    collectMissing(snapshot.view.nodes, knownComponentTypeIds, missing);
+
+    if (missing.size === 0) {
+      clientRef.current?.reportRendered({ status: 'ok', missingComponents: [] });
+    } else {
+      clientRef.current?.reportRendered({
+        status: 'partial',
+        missingComponents: Array.from(missing),
+      });
+    }
+  }, [
+    snapshot.handshakeStatus,
+    snapshot.view,
+    snapshot.renderStatus,
+    knownComponentTypeIds,
+  ]);
+
+  return {
+    view: snapshot.view,
+    handshakeStatus: snapshot.handshakeStatus,
+    renderStatus: snapshot.renderStatus,
+    missingComponents: snapshot.missingComponents,
+    isReactive: capabilitiesRef.current.liveUpdate,
+    sessionId: snapshot.sessionId,
+  };
+}
+
+// Same URN convention resolveExperience uses: the id is the last non-empty
+// path segment. Template nodes are skipped (out of v1 renderer scope).
+function extractIdFromUrn(urn: string): string {
+  const segments = urn.split('/').filter((s) => s.length > 0);
+  return segments[segments.length - 1] ?? urn;
+}
+
+function collectMissing(
+  nodes: ExperienceNode[] | undefined,
+  known: ReadonlySet<string>,
+  out: Set<string>
+): void {
+  if (!nodes) return;
+  for (const node of nodes) {
+    if ('componentType' in node) {
+      const id = extractIdFromUrn(node.componentType.sys.urn);
+      if (!known.has(id)) out.add(id);
+    }
+    if (node.slots) {
+      for (const children of Object.values(node.slots)) {
+        collectMissing(children, known, out);
+      }
+    }
+  }
+}
diff --git a/packages/preview-adapter-react/src/use-resolved-preview-plan.ts b/packages/preview-adapter-react/src/use-resolved-preview-plan.ts
new file mode 100644
index 0000000..584c77b
--- /dev/null
+++ b/packages/preview-adapter-react/src/use-resolved-preview-plan.ts
@@ -0,0 +1,46 @@
+'use client';
+
+/*
+ * useResolvedPreviewPlan — bridges the API-generic `HydratedView` coming
+ * over the preview wire into the internal `PortableRenderPlan` that the
+ * renderer consumes.
+ *
+ * `resolveExperience` is async because customer components can declare a
+ * `resolveData` hook. The hook re-resolves whenever the view changes,
+ * discarding results from a superseded resolve so late completions can't
+ * clobber a newer plan.
+ *
+ * Returns `undefined` while resolution is in flight for the very first
+ * view; on subsequent updates it retains the previous plan until the new
+ * one finishes, avoiding a flash of empty content between updates.
+ */
+
+import { useEffect, useState } from 'react';
+
+import type { PortableRenderPlan, ResolverConfig } from '@contentful/experiences-core';
+import { resolveExperience } from '@contentful/experiences-core';
+import type { HydratedView } from '@contentful/experiences-preview-core';
+
+export function useResolvedPreviewPlan(
+  view: HydratedView | undefined,
+  config: ResolverConfig
+): PortableRenderPlan | undefined {
+  const [plan, setPlan] = useState<PortableRenderPlan | undefined>(undefined);
+
+  useEffect(() => {
+    if (!view) {
+      setPlan(undefined);
+      return;
+    }
+    let cancelled = false;
+    resolveExperience(view, config).then((resolved) => {
+      if (cancelled) return;
+      setPlan(resolved);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [view, config]);
+
+  return plan;
+}
diff --git a/packages/preview-adapter-react/tsconfig.json b/packages/preview-adapter-react/tsconfig.json
new file mode 100644
index 0000000..60c1e78
--- /dev/null
+++ b/packages/preview-adapter-react/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "tsup.config.ts"]
+}
diff --git a/packages/preview-adapter-react/tsconfig.lib.json b/packages/preview-adapter-react/tsconfig.lib.json
new file mode 100644
index 0000000..7866cc9
--- /dev/null
+++ b/packages/preview-adapter-react/tsconfig.lib.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": [
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "tsup.config.ts"
+  ]
+}
diff --git a/packages/preview-adapter-react/tsup.config.ts b/packages/preview-adapter-react/tsup.config.ts
new file mode 100644
index 0000000..d030667
--- /dev/null
+++ b/packages/preview-adapter-react/tsup.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/*.test.tsx'],
+  format: ['esm'],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  target: 'es2022',
+  outDir: 'dist',
+  tsconfig: 'tsconfig.lib.json',
+  bundle: false,
+  external: ['react', 'react-dom', /^@contentful\//],
+});
diff --git a/packages/preview-adapter-svelte/package.json b/packages/preview-adapter-svelte/package.json
new file mode 100644
index 0000000..185efa7
--- /dev/null
+++ b/packages/preview-adapter-svelte/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@contentful/experiences-preview-svelte",
+  "version": "0.1.0",
+  "description": "Svelte 5 adapter for the Contentful Experiences preview protocol",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/experiences.git",
+    "directory": "packages/preview-adapter-svelte"
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist && publint"
+  },
+  "dependencies": {
+    "@contentful/experiences-core": "*",
+    "@contentful/experiences-preview-core": "*",
+    "@contentful/experiences-preview-web": "*"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "publint": "^0.2.0",
+    "svelte": "^5.0.0"
+  }
+}
diff --git a/packages/preview-adapter-svelte/project.json b/packages/preview-adapter-svelte/project.json
new file mode 100644
index 0000000..6a5b938
--- /dev/null
+++ b/packages/preview-adapter-svelte/project.json
@@ -0,0 +1,19 @@
+{
+  "name": "preview-adapter-svelte",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/preview-adapter-svelte/src",
+  "projectType": "library",
+  "tags": ["scope:preview", "runtime:svelte"],
+  "targets": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/dist"],
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/preview-adapter-svelte",
+        "command": "svelte-package -i src -o dist"
+      }
+    }
+  }
+}
diff --git a/packages/preview-adapter-svelte/src/index.ts b/packages/preview-adapter-svelte/src/index.ts
new file mode 100644
index 0000000..87a58d0
--- /dev/null
+++ b/packages/preview-adapter-svelte/src/index.ts
@@ -0,0 +1,45 @@
+/*
+ * Public API surface for `@contentful/experiences-preview-svelte`.
+ *
+ * Consumed by `@contentful/experiences-svelte` internally when a customer
+ * sets `enablePreview` on `ClientExperienceRenderer`. Advanced customers
+ * building their own renderer flow can import from this package directly.
+ */
+
+export { createPreviewOverride } from './preview-override.svelte.js';
+export type {
+  CreatePreviewOverrideOptions,
+  PreviewOverride,
+} from './preview-override.svelte.js';
+
+export { createResolvedPreviewPlan } from './resolved-preview-plan.svelte.js';
+export type { ResolvedPreviewPlan } from './resolved-preview-plan.svelte.js';
+
+// Re-export the framework-agnostic surface so consumers who install only
+// this package have a single import path for everything preview-related.
+export {
+  MESSAGE,
+  PROTOCOL_VERSION,
+  SOURCE,
+  PreviewClient,
+  isEnvelope,
+  isMessage,
+} from '@contentful/experiences-preview-core';
+export type {
+  AnyMessage,
+  Envelope,
+  HandshakeStatus,
+  HydratedView,
+  InitContext,
+  MessageHandler,
+  MessageType,
+  PreviewCapabilities,
+  PreviewChannel,
+  PreviewClientOptions,
+  PreviewSnapshot,
+  ReadyPayload,
+  RenderedPayload,
+  RenderStatus,
+} from '@contentful/experiences-preview-core';
+export { createPostMessageChannel } from '@contentful/experiences-preview-web';
+export type { CreatePostMessageChannelOptions } from '@contentful/experiences-preview-web';
diff --git a/packages/preview-adapter-svelte/src/preview-override.svelte.ts b/packages/preview-adapter-svelte/src/preview-override.svelte.ts
new file mode 100644
index 0000000..2a23e83
--- /dev/null
+++ b/packages/preview-adapter-svelte/src/preview-override.svelte.ts
@@ -0,0 +1,197 @@
+/*
+ * createPreviewOverride — Svelte 5 rune-based counterpart to the React
+ * `usePreviewOverride`. Wires a `PreviewClient` and exposes its snapshot
+ * as reactive getters (`view`, `handshakeStatus`, ...).
+ *
+ * When `enabled` is false, when the app is not embedded in a Contentful
+ * editor (no matching ancestor origin), or before the handshake completes,
+ * `view` is `undefined` — the renderer falls back to the `experience`
+ * prop. Once `init` arrives, `view` takes precedence and subsequent
+ * `viewUpdate` messages replace it.
+ *
+ * The `view` field is the API-generic `HydratedView`. Callers convert
+ * to a `PortableRenderPlan` via `createResolvedPreviewPlan` (from
+ * `resolved-preview-plan.svelte.ts`) or `resolveExperience` directly.
+ */
+
+import type { ExperienceNode } from '@contentful/experiences-core';
+import type {
+  HydratedView,
+  PreviewCapabilities,
+  PreviewSnapshot,
+  RenderStatus,
+} from '@contentful/experiences-preview-core';
+import { PreviewClient } from '@contentful/experiences-preview-core';
+import {
+  createPostMessageChannel,
+  type CreatePostMessageChannelOptions,
+} from '@contentful/experiences-preview-web';
+
+export interface CreatePreviewOverrideOptions {
+  // Master gate. When false, the returned view is always undefined and
+  // no listeners are installed.
+  enabled: boolean;
+
+  capabilities?: Partial<PreviewCapabilities>;
+  supportedFeatures?: string[];
+  targetOrigin?: CreatePostMessageChannelOptions['targetOrigin'];
+}
+
+export interface PreviewOverride {
+  readonly view: HydratedView | undefined;
+  readonly handshakeStatus: PreviewSnapshot['handshakeStatus'];
+  readonly renderStatus: RenderStatus;
+  readonly missingComponents: string[];
+  readonly isReactive: boolean;
+  readonly sessionId: string | undefined;
+}
+
+const DEFAULT_CAPABILITIES: PreviewCapabilities = {
+  liveUpdate: true,
+  alreadyRendered: false,
+  nodeGeometry: false,
+};
+
+const DEFAULT_SUPPORTED_FEATURES = ['viewUpdate'];
+
+const INERT_SNAPSHOT: PreviewSnapshot = {
+  handshakeStatus: 'idle',
+  renderStatus: 'pending',
+  sessionId: undefined,
+  view: undefined,
+  context: undefined,
+  missingComponents: [],
+  error: undefined,
+};
+
+/**
+ * Must be called at the top level of a `.svelte` component (or during
+ * component setup) — internally uses `$effect` for lifecycle management.
+ *
+ * Pass the set of component-type ids the renderer knows about so the
+ * hook can report `partial` render status with the missing ids. Pass
+ * `null` (or omit) to always report `ok` once render completes.
+ */
+export function createPreviewOverride(
+  options: CreatePreviewOverrideOptions,
+  knownComponentTypeIds?: ReadonlySet<string> | null
+): PreviewOverride {
+  const capabilities: PreviewCapabilities = {
+    ...DEFAULT_CAPABILITIES,
+    ...(options.capabilities ?? {}),
+  };
+  const supportedFeatures = options.supportedFeatures ?? DEFAULT_SUPPORTED_FEATURES;
+  const isReactive = capabilities.liveUpdate;
+
+  let snapshot = $state<PreviewSnapshot>(INERT_SNAPSHOT);
+  let client: PreviewClient | null = null;
+
+  $effect(() => {
+    if (!options.enabled) return;
+
+    const channel = createPostMessageChannel({ targetOrigin: options.targetOrigin });
+    if (!channel) return;
+
+    const c = new PreviewClient({ channel, supportedFeatures, capabilities });
+    client = c;
+
+    const unsubscribe = c.subscribe(() => {
+      snapshot = c.getSnapshot();
+    });
+    c.start();
+
+    const onError = (event: ErrorEvent) => {
+      c.reportError({ message: event.message, stack: event.error?.stack });
+    };
+    const onUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      const message =
+        reason instanceof Error ? reason.message : String(reason ?? 'unhandledrejection');
+      const stack = reason instanceof Error ? reason.stack : undefined;
+      c.reportError({ message, stack });
+    };
+    window.addEventListener('error', onError);
+    window.addEventListener('unhandledrejection', onUnhandledRejection);
+
+    return () => {
+      window.removeEventListener('error', onError);
+      window.removeEventListener('unhandledrejection', onUnhandledRejection);
+      unsubscribe();
+      c.close();
+      client = null;
+    };
+  });
+
+  // After each init/viewUpdate, walk the incoming view and report render
+  // status by extracting component-type ids from URNs and comparing
+  // against the known set.
+  $effect(() => {
+    if (snapshot.handshakeStatus !== 'initialized') return;
+    if (!snapshot.view) return;
+    if (snapshot.renderStatus !== 'pending') return;
+
+    if (!knownComponentTypeIds) {
+      client?.reportRendered({ status: 'ok', missingComponents: [] });
+      return;
+    }
+
+    const missing = new Set<string>();
+    collectMissing(snapshot.view.nodes, knownComponentTypeIds, missing);
+
+    if (missing.size === 0) {
+      client?.reportRendered({ status: 'ok', missingComponents: [] });
+    } else {
+      client?.reportRendered({
+        status: 'partial',
+        missingComponents: Array.from(missing),
+      });
+    }
+  });
+
+  return {
+    get view() {
+      return snapshot.view;
+    },
+    get handshakeStatus() {
+      return snapshot.handshakeStatus;
+    },
+    get renderStatus() {
+      return snapshot.renderStatus;
+    },
+    get missingComponents() {
+      return snapshot.missingComponents;
+    },
+    get isReactive() {
+      return isReactive;
+    },
+    get sessionId() {
+      return snapshot.sessionId;
+    },
+  };
+}
+
+// Same URN convention resolveExperience uses: id is the last non-empty
+// path segment. Template nodes are skipped (out of v1 renderer scope).
+function extractIdFromUrn(urn: string): string {
+  const segments = urn.split('/').filter((s) => s.length > 0);
+  return segments[segments.length - 1] ?? urn;
+}
+
+function collectMissing(
+  nodes: ExperienceNode[] | undefined,
+  known: ReadonlySet<string>,
+  out: Set<string>
+): void {
+  if (!nodes) return;
+  for (const node of nodes) {
+    if ('componentType' in node) {
+      const id = extractIdFromUrn(node.componentType.sys.urn);
+      if (!known.has(id)) out.add(id);
+    }
+    if (node.slots) {
+      for (const children of Object.values(node.slots)) {
+        collectMissing(children, known, out);
+      }
+    }
+  }
+}
diff --git a/packages/preview-adapter-svelte/src/resolved-preview-plan.svelte.ts b/packages/preview-adapter-svelte/src/resolved-preview-plan.svelte.ts
new file mode 100644
index 0000000..b9ce3b3
--- /dev/null
+++ b/packages/preview-adapter-svelte/src/resolved-preview-plan.svelte.ts
@@ -0,0 +1,57 @@
+/*
+ * createResolvedPreviewPlan — Svelte 5 rune-based counterpart to the
+ * React `useResolvedPreviewPlan`. Bridges the API-generic `HydratedView`
+ * coming over the preview wire into the internal `PortableRenderPlan`
+ * that the renderer consumes.
+ *
+ * `resolveExperience` is async because customer components can declare a
+ * `resolveData` hook. The rune re-resolves whenever the passed view
+ * changes, discarding results from a superseded resolve so late
+ * completions can't clobber a newer plan.
+ *
+ * On subsequent updates the previous plan is retained until the new one
+ * finishes, avoiding a flash of empty content between updates.
+ */
+
+import type { PortableRenderPlan, ResolverConfig } from '@contentful/experiences-core';
+import { resolveExperience } from '@contentful/experiences-core';
+import type { HydratedView } from '@contentful/experiences-preview-core';
+
+export interface ResolvedPreviewPlan {
+  readonly plan: PortableRenderPlan | undefined;
+}
+
+/**
+ * Must be called at the top level of a `.svelte` component. Pass a getter
+ * for the view so the rune can react when it changes — the caller
+ * typically reads `previewOverride.view`, so the getter is a natural
+ * shape.
+ */
+export function createResolvedPreviewPlan(
+  getView: () => HydratedView | undefined,
+  config: ResolverConfig
+): ResolvedPreviewPlan {
+  let plan = $state<PortableRenderPlan | undefined>(undefined);
+
+  $effect(() => {
+    const view = getView();
+    if (!view) {
+      plan = undefined;
+      return;
+    }
+    let cancelled = false;
+    resolveExperience(view, config).then((resolved) => {
+      if (cancelled) return;
+      plan = resolved;
+    });
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  return {
+    get plan() {
+      return plan;
+    },
+  };
+}
diff --git a/packages/preview-adapter-svelte/svelte.config.js b/packages/preview-adapter-svelte/svelte.config.js
new file mode 100644
index 0000000..6005ca8
--- /dev/null
+++ b/packages/preview-adapter-svelte/svelte.config.js
@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+  preprocess: vitePreprocess(),
+  compilerOptions: {
+    runes: true,
+  },
+};
diff --git a/packages/preview-adapter-svelte/tsconfig.json b/packages/preview-adapter-svelte/tsconfig.json
new file mode 100644
index 0000000..59ff795
--- /dev/null
+++ b/packages/preview-adapter-svelte/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node"],
+    "allowJs": true,
+    "checkJs": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte.ts", "svelte.config.js"]
+}
diff --git a/packages/preview-core/package.json b/packages/preview-core/package.json
new file mode 100644
index 0000000..c0bfdc1
--- /dev/null
+++ b/packages/preview-core/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@contentful/experiences-preview-core",
+  "version": "0.1.0",
+  "description": "Runtime-neutral preview protocol + state machine for Contentful Experiences",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/experiences.git",
+    "directory": "packages/preview-core"
+  },
+  "dependencies": {
+    "@contentful/experiences-core": "*"
+  }
+}
diff --git a/packages/preview-core/project.json b/packages/preview-core/project.json
new file mode 100644
index 0000000..0bbb263
--- /dev/null
+++ b/packages/preview-core/project.json
@@ -0,0 +1,19 @@
+{
+  "name": "preview-core",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/preview-core/src",
+  "projectType": "library",
+  "tags": ["scope:preview", "layer:core"],
+  "targets": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/dist"],
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/preview-core",
+        "command": "tsup"
+      }
+    }
+  }
+}
diff --git a/packages/preview-core/src/channel.ts b/packages/preview-core/src/channel.ts
new file mode 100644
index 0000000..35f0a1f
--- /dev/null
+++ b/packages/preview-core/src/channel.ts
@@ -0,0 +1,20 @@
+/*
+ * Transport abstraction. Any duplex message pipe can implement this
+ * interface — the client and adapter layers above never touch the wire
+ * directly. The postMessage variant ships alongside; WebSocket / WebRTC
+ * variants would sit next to it under this module.
+ */
+
+import type { AnyMessage, MessageType } from './protocol';
+
+export type MessageHandler<M extends AnyMessage = AnyMessage> = (msg: M) => void;
+
+export interface PreviewChannel {
+  send(msg: AnyMessage): void;
+
+  // Register a handler for messages of the given type. Returns an
+  // unsubscribe function.
+  on<T extends MessageType>(type: T, handler: MessageHandler): () => void;
+
+  close(): void;
+}
diff --git a/packages/preview-core/src/client.ts b/packages/preview-core/src/client.ts
new file mode 100644
index 0000000..3ce65b3
--- /dev/null
+++ b/packages/preview-core/src/client.ts
@@ -0,0 +1,187 @@
+/*
+ * PreviewClient — state machine that runs on the preview (guest) side.
+ * Owns the `ready → init → rendered` handshake, sessionId adoption, and a
+ * snapshot subscription API suitable for React's useSyncExternalStore or
+ * an equivalent adapter in any other framework.
+ */
+
+import type { PreviewChannel } from './channel';
+import {
+  MESSAGE,
+  PROTOCOL_VERSION,
+  SOURCE,
+  isMessage,
+  type HydratedView,
+  type InitContext,
+  type InitMessage,
+  type PreviewCapabilities,
+  type RenderedPayload,
+  type ViewUpdateMessage,
+} from './protocol';
+
+export type HandshakeStatus =
+  | 'idle'
+  | 'ready-sent'
+  | 'initialized'
+  | 'closed';
+
+export type RenderStatus = RenderedPayload['status'] | 'pending';
+
+export interface PreviewSnapshot {
+  handshakeStatus: HandshakeStatus;
+  renderStatus: RenderStatus;
+  sessionId: string | undefined;
+  view: HydratedView | undefined;
+  context: InitContext | undefined;
+  missingComponents: string[];
+  error: { message: string; stack?: string } | undefined;
+}
+
+export interface PreviewClientOptions {
+  channel: PreviewChannel;
+  supportedFeatures: string[];
+  capabilities: PreviewCapabilities;
+}
+
+export type PreviewClientListener = () => void;
+
+const EMPTY_SNAPSHOT: PreviewSnapshot = {
+  handshakeStatus: 'idle',
+  renderStatus: 'pending',
+  sessionId: undefined,
+  view: undefined,
+  context: undefined,
+  missingComponents: [],
+  error: undefined,
+};
+
+export class PreviewClient {
+  private readonly channel: PreviewChannel;
+  private readonly supportedFeatures: string[];
+  private readonly capabilities: PreviewCapabilities;
+
+  private snapshot: PreviewSnapshot = EMPTY_SNAPSHOT;
+  private readonly listeners = new Set<PreviewClientListener>();
+  private readonly cleanups: Array<() => void> = [];
+
+  constructor({ channel, supportedFeatures, capabilities }: PreviewClientOptions) {
+    this.channel = channel;
+    this.supportedFeatures = supportedFeatures;
+    this.capabilities = capabilities;
+  }
+
+  getSnapshot = (): PreviewSnapshot => this.snapshot;
+
+  subscribe = (listener: PreviewClientListener): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  start(): void {
+    // Idempotent: repeated calls are a no-op after the first.
+    if (this.snapshot.handshakeStatus !== 'idle') return;
+
+    // Register listeners before sending `ready`. A fast editor can reply
+    // before addEventListener returns; race would drop `init`.
+    this.cleanups.push(
+      this.channel.on(MESSAGE.init, (msg) => this.handleInit(msg as InitMessage))
+    );
+    this.cleanups.push(
+      this.channel.on(MESSAGE.viewUpdate, (msg) =>
+        this.handleViewUpdate(msg as ViewUpdateMessage)
+      )
+    );
+
+    this.channel.send({
+      type: MESSAGE.ready,
+      source: SOURCE.preview,
+      protocolVersion: PROTOCOL_VERSION,
+      payload: {
+        supportedFeatures: this.supportedFeatures,
+        capabilities: this.capabilities,
+      },
+    });
+
+    this.update({ handshakeStatus: 'ready-sent' });
+  }
+
+  close(): void {
+    for (const cleanup of this.cleanups) cleanup();
+    this.cleanups.length = 0;
+    this.channel.close();
+    this.update({ handshakeStatus: 'closed' });
+  }
+
+  reportRendered(payload: {
+    status: RenderStatus;
+    missingComponents?: string[];
+    error?: { message: string; stack?: string };
+  }): void {
+    if (this.snapshot.handshakeStatus !== 'initialized') return;
+    if (!this.snapshot.sessionId) return;
+    if (payload.status === 'pending') return;
+
+    this.channel.send({
+      type: MESSAGE.rendered,
+      source: SOURCE.preview,
+      protocolVersion: PROTOCOL_VERSION,
+      sessionId: this.snapshot.sessionId,
+      payload: {
+        status: payload.status,
+        missingComponents: payload.missingComponents ?? [],
+        error: payload.error,
+      },
+    });
+
+    this.update({
+      renderStatus: payload.status,
+      missingComponents: payload.missingComponents ?? [],
+      error: payload.error,
+    });
+  }
+
+  reportError(error: { message: string; stack?: string }): void {
+    if (!this.snapshot.sessionId) return;
+    this.channel.send({
+      type: MESSAGE.error,
+      source: SOURCE.preview,
+      protocolVersion: PROTOCOL_VERSION,
+      sessionId: this.snapshot.sessionId,
+      payload: { error },
+    });
+    this.update({ error, renderStatus: 'error' });
+  }
+
+  private handleInit(msg: InitMessage): void {
+    if (!isMessage(msg, MESSAGE.init)) return;
+    if (this.snapshot.handshakeStatus !== 'ready-sent') return;
+    if (!msg.sessionId) return;
+
+    this.update({
+      handshakeStatus: 'initialized',
+      sessionId: msg.sessionId,
+      view: msg.payload.initialView,
+      context: msg.payload.context,
+    });
+  }
+
+  private handleViewUpdate(msg: ViewUpdateMessage): void {
+    if (!isMessage(msg, MESSAGE.viewUpdate)) return;
+    if (this.snapshot.handshakeStatus !== 'initialized') return;
+    if (msg.sessionId !== this.snapshot.sessionId) return;
+
+    this.update({
+      view: msg.payload.view,
+      renderStatus: 'pending',
+      missingComponents: [],
+      error: undefined,
+    });
+  }
+
+  private update(patch: Partial<PreviewSnapshot>): void {
+    this.snapshot = { ...this.snapshot, ...patch };
+    for (const listener of this.listeners) listener();
+  }
+}
diff --git a/packages/preview-core/src/index.ts b/packages/preview-core/src/index.ts
new file mode 100644
index 0000000..c741003
--- /dev/null
+++ b/packages/preview-core/src/index.ts
@@ -0,0 +1,41 @@
+export {
+  MESSAGE,
+  PROTOCOL_VERSION,
+  SOURCE,
+  isEnvelope,
+  isMessage,
+} from './protocol';
+export type {
+  AnyMessage,
+  EditorMessage,
+  Envelope,
+  ErrorMessage,
+  ErrorPayload,
+  GeometryMessage,
+  GeometryPayload,
+  HydratedView,
+  InitContext,
+  InitMessage,
+  InitPayload,
+  MessageType,
+  PreviewCapabilities,
+  PreviewMessage,
+  ReadyMessage,
+  ReadyPayload,
+  RenderedMessage,
+  RenderedPayload,
+  Source,
+  ViewUpdateMessage,
+  ViewUpdatePayload,
+} from './protocol';
+
+export type { MessageHandler, PreviewChannel } from './channel';
+
+export { PreviewClient } from './client';
+export type {
+  HandshakeStatus,
+  PreviewClientListener,
+  PreviewClientOptions,
+  PreviewSnapshot,
+  RenderStatus,
+} from './client';
diff --git a/packages/preview-core/src/protocol.ts b/packages/preview-core/src/protocol.ts
new file mode 100644
index 0000000..88e9645
--- /dev/null
+++ b/packages/preview-core/src/protocol.ts
@@ -0,0 +1,155 @@
+/*
+ * Preview protocol — the wire between an ExO editor (host) and a
+ * customer app running inside its iframe (guest).
+ *
+ * The protocol is transport-independent — postMessage is what ships first,
+ * but the same message names, payloads, and handshake apply over a
+ * WebSocket, WebRTC data channel, or any other duplex pipe. The transport
+ * is isolated in the `PreviewChannel` interface.
+ *
+ * The `view` on the wire is a `HydratedView` — the same API-generic
+ * payload the Experience Delivery API delivers today. Renderers convert it
+ * to their internal IR (a `PortableRenderPlan`) via `resolveExperience`
+ * at the boundary. The wire deliberately stays API-shaped so third-party
+ * renderers, native adapters, and test harnesses can consume it without
+ * depending on any renderer's internal IR.
+ */
+
+import type { ExperiencePayload } from '@contentful/experiences-core';
+
+/**
+ * The API-generic view payload — structurally the response body of
+ * `GetExperienceViewResponse` from the Experience Delivery API. Alias
+ * only; the protocol never redefines the shape.
+ */
+export type HydratedView = ExperiencePayload;
+
+// -- Protocol constants --------------------------------------------------
+
+export const PROTOCOL_VERSION = 1;
+
+export const SOURCE = {
+  editor: 'experiences:editor',
+  preview: 'experiences:preview',
+} as const;
+export type Source = (typeof SOURCE)[keyof typeof SOURCE];
+
+export const MESSAGE = {
+  ready: 'experiences:preview:ready',
+  init: 'experiences:editor:init',
+  rendered: 'experiences:preview:rendered',
+  viewUpdate: 'experiences:editor:viewUpdate',
+  error: 'experiences:preview:error',
+  geometry: 'experiences:preview:geometry',
+} as const;
+export type MessageType = (typeof MESSAGE)[keyof typeof MESSAGE];
+
+// -- Common envelope -----------------------------------------------------
+
+// Every message carries `sessionId` except the first `ready` — the editor
+// mints the sessionId in response and delivers it in `init`.
+export interface Envelope<T extends MessageType, P> {
+  type: T;
+  source: Source;
+  protocolVersion: typeof PROTOCOL_VERSION;
+  sessionId?: string;
+  payload: P;
+}
+
+// -- Capabilities --------------------------------------------------------
+
+export interface PreviewCapabilities {
+  // Preview app hydrates on the client and can consume `viewUpdate` to
+  // re-render in place. When false, the editor treats the preview as
+  // static and reloads the iframe on save.
+  liveUpdate: boolean;
+
+  // Preview has already painted its own content (SSR/RSC/static HTML).
+  // Reserved for a later epic driving optional initialView.
+  alreadyRendered: boolean;
+
+  // Preview can emit `experiences:preview:geometry` messages.
+  nodeGeometry: boolean;
+}
+
+// -- Payloads ------------------------------------------------------------
+
+export interface ReadyPayload {
+  supportedFeatures: string[];
+  capabilities: PreviewCapabilities;
+}
+
+export interface InitContext {
+  entity: {
+    sys: {
+      type: 'ComponentType' | 'Template';
+      id: string;
+      space: { sys: { type: 'Link'; linkType: 'Space'; id: string } };
+      environment: { sys: { type: 'Link'; linkType: 'Environment'; id: string } };
+    };
+  };
+}
+
+export interface InitPayload {
+  supportedFeatures: string[];
+  context: InitContext;
+  initialView: HydratedView;
+}
+
+export interface RenderedPayload {
+  status: 'ok' | 'partial' | 'error';
+  missingComponents: string[];
+  error?: { message: string; stack?: string };
+}
+
+export interface ViewUpdatePayload {
+  view: HydratedView;
+}
+
+export interface ErrorPayload {
+  error: { message: string; stack?: string };
+}
+
+// Geometry — reserved. Shape mirrors Studio's canvasGeometryUpdated event.
+export interface GeometryPayload {
+  size: { width: number; height: number };
+  nodes: Record<
+    string,
+    { coordinates: { x: number; y: number; width: number; height: number } }
+  >;
+  sourceEvent: 'resize' | 'mutation' | 'mediaResize';
+}
+
+// -- Concrete message types ---------------------------------------------
+
+export type ReadyMessage = Envelope<typeof MESSAGE.ready, ReadyPayload>;
+export type InitMessage = Envelope<typeof MESSAGE.init, InitPayload>;
+export type RenderedMessage = Envelope<typeof MESSAGE.rendered, RenderedPayload>;
+export type ViewUpdateMessage = Envelope<typeof MESSAGE.viewUpdate, ViewUpdatePayload>;
+export type ErrorMessage = Envelope<typeof MESSAGE.error, ErrorPayload>;
+export type GeometryMessage = Envelope<typeof MESSAGE.geometry, GeometryPayload>;
+
+export type EditorMessage = InitMessage | ViewUpdateMessage;
+export type PreviewMessage = ReadyMessage | RenderedMessage | ErrorMessage | GeometryMessage;
+export type AnyMessage = EditorMessage | PreviewMessage;
+
+// -- Type guards ---------------------------------------------------------
+
+export function isEnvelope(value: unknown): value is Envelope<MessageType, unknown> {
+  if (typeof value !== 'object' || value === null) return false;
+  const v = value as Record<string, unknown>;
+  return (
+    typeof v.type === 'string' &&
+    (v.source === SOURCE.editor || v.source === SOURCE.preview) &&
+    v.protocolVersion === PROTOCOL_VERSION &&
+    typeof v.payload === 'object' &&
+    v.payload !== null
+  );
+}
+
+export function isMessage<T extends MessageType>(
+  value: unknown,
+  type: T
+): value is Envelope<T, unknown> {
+  return isEnvelope(value) && value.type === type;
+}
diff --git a/packages/preview-core/tsconfig.json b/packages/preview-core/tsconfig.json
new file mode 100644
index 0000000..b3f3c00
--- /dev/null
+++ b/packages/preview-core/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "tsup.config.ts"]
+}
diff --git a/packages/preview-core/tsconfig.lib.json b/packages/preview-core/tsconfig.lib.json
new file mode 100644
index 0000000..06e7fbb
--- /dev/null
+++ b/packages/preview-core/tsconfig.lib.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "tsup.config.ts"
+  ]
+}
diff --git a/packages/preview-core/tsup.config.ts b/packages/preview-core/tsup.config.ts
new file mode 100644
index 0000000..e59a519
--- /dev/null
+++ b/packages/preview-core/tsup.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/**/*.ts', '!src/**/*.test.ts'],
+  format: ['esm'],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  target: 'es2022',
+  outDir: 'dist',
+  tsconfig: 'tsconfig.lib.json',
+  bundle: false,
+  external: [/^@contentful\//],
+});
diff --git a/packages/preview-web/package.json b/packages/preview-web/package.json
new file mode 100644
index 0000000..4bea3ef
--- /dev/null
+++ b/packages/preview-web/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@contentful/experiences-preview-web",
+  "version": "0.1.0",
+  "description": "postMessage (and future WebSocket/WebRTC) transports for the Contentful Experiences preview protocol",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/experiences.git",
+    "directory": "packages/preview-web"
+  },
+  "dependencies": {
+    "@contentful/experiences-preview-core": "*"
+  }
+}
diff --git a/packages/preview-web/project.json b/packages/preview-web/project.json
new file mode 100644
index 0000000..c850a93
--- /dev/null
+++ b/packages/preview-web/project.json
@@ -0,0 +1,19 @@
+{
+  "name": "preview-web",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/preview-web/src",
+  "projectType": "library",
+  "tags": ["scope:preview", "layer:web"],
+  "targets": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/dist"],
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/preview-web",
+        "command": "tsup"
+      }
+    }
+  }
+}
diff --git a/packages/preview-web/src/index.ts b/packages/preview-web/src/index.ts
new file mode 100644
index 0000000..6260bf4
--- /dev/null
+++ b/packages/preview-web/src/index.ts
@@ -0,0 +1,2 @@
+export { createPostMessageChannel } from './postMessageChannel';
+export type { CreatePostMessageChannelOptions } from './postMessageChannel';
diff --git a/packages/preview-web/src/postMessageChannel.ts b/packages/preview-web/src/postMessageChannel.ts
new file mode 100644
index 0000000..9dc3af8
--- /dev/null
+++ b/packages/preview-web/src/postMessageChannel.ts
@@ -0,0 +1,144 @@
+/*
+ * postMessage transport for the preview side (inside the iframe).
+ *
+ * Origin resolution follows `@contentful/live-preview` conventions:
+ *   1. Resolve editor origin from window.location.ancestorOrigins
+ *      (fallback: document.referrer for Firefox).
+ *   2. Match against a hardcoded allow-list — production + localhost.
+ *   3. Nothing matches and no `targetOrigin` override supplied → return
+ *      `undefined` from the factory; the caller decides whether to throw
+ *      (dev) or silently skip (production without editor).
+ *
+ * Receive-side filtering is by payload `source` token, not by
+ * `event.origin` — matches Live Preview's convention and lets a browser
+ * extension or test harness inject messages without spoofing the origin.
+ */
+
+import type { MessageHandler, PreviewChannel } from '@contentful/experiences-preview-core';
+import {
+  SOURCE,
+  isEnvelope,
+  type AnyMessage,
+  type MessageType,
+} from '@contentful/experiences-preview-core';
+
+const LOCALHOST_PREFIX = 'http://localhost:';
+
+// Default allow-list: production + a localhost wildcard so dev servers on
+// any port work without an explicit override. Staging is excluded on
+// purpose — apps embedding against staging must supply `targetOrigin`.
+const DEFAULT_ALLOWED_ORIGINS = [
+  'https://app.contentful.com',
+  'https://app.eu.contentful.com',
+  `${LOCALHOST_PREFIX}*`,
+] as const;
+
+export interface CreatePostMessageChannelOptions {
+  // Override the default editor-origin allow-list. Accepts one or many.
+  // Useful for tests, self-hosted proxies, or unusual embedding setups.
+  targetOrigin?: string | string[];
+}
+
+export function createPostMessageChannel(
+  options: CreatePostMessageChannelOptions = {}
+): PreviewChannel | undefined {
+  if (typeof window === 'undefined') return undefined;
+
+  const allowedOrigins = normalizeOrigins(options.targetOrigin);
+  const resolvedTargetOrigin = resolveTargetOrigin(allowedOrigins);
+  if (!resolvedTargetOrigin) return undefined;
+
+  const parentWindow = window.parent;
+  if (!parentWindow || parentWindow === window) return undefined;
+
+  const handlers = new Map<MessageType, Set<MessageHandler>>();
+
+  const listener = (event: MessageEvent<unknown>) => {
+    const data = event.data;
+    if (!isEnvelope(data)) return;
+    // We are the preview app; only accept editor-source messages.
+    if (data.source !== SOURCE.editor) return;
+
+    const forType = handlers.get(data.type as MessageType);
+    if (!forType) return;
+
+    for (const handler of forType) {
+      try {
+        handler(data as AnyMessage);
+      } catch (err) {
+        // A misbehaving handler must not tear down the transport.
+        console.error('[experiences preview] handler threw:', err);
+      }
+    }
+  };
+
+  window.addEventListener('message', listener);
+
+  return {
+    send(msg) {
+      parentWindow.postMessage(msg, resolvedTargetOrigin);
+    },
+    on(type, handler) {
+      let set = handlers.get(type);
+      if (!set) {
+        set = new Set();
+        handlers.set(type, set);
+      }
+      set.add(handler);
+      return () => {
+        set!.delete(handler);
+        if (set!.size === 0) handlers.delete(type);
+      };
+    },
+    close() {
+      window.removeEventListener('message', listener);
+      handlers.clear();
+    },
+  };
+}
+
+function normalizeOrigins(override: string | string[] | undefined): string[] {
+  if (override) return Array.isArray(override) ? override : [override];
+  return [...DEFAULT_ALLOWED_ORIGINS];
+}
+
+function resolveTargetOrigin(allowedOrigins: string[]): string | undefined {
+  const ancestorOrigins: readonly string[] | undefined =
+    typeof window !== 'undefined' &&
+    typeof window.location !== 'undefined' &&
+    'ancestorOrigins' in window.location
+      ? Array.from(window.location.ancestorOrigins)
+      : undefined;
+
+  if (ancestorOrigins) {
+    for (const origin of ancestorOrigins) {
+      if (isAllowed(origin, allowedOrigins)) return origin;
+    }
+  }
+
+  // Firefox fallback: derive an origin from document.referrer.
+  const referrer = typeof document !== 'undefined' ? document.referrer : '';
+  if (referrer) {
+    try {
+      const referrerOrigin = new URL(referrer).origin;
+      if (isAllowed(referrerOrigin, allowedOrigins)) return referrerOrigin;
+    } catch {
+      // fall through
+    }
+  }
+
+  return undefined;
+}
+
+function isAllowed(origin: string, allowedOrigins: string[]): boolean {
+  for (const allowed of allowedOrigins) {
+    if (allowed === origin) return true;
+    if (
+      (allowed === `${LOCALHOST_PREFIX}*` || allowed === 'http://localhost') &&
+      origin.startsWith(LOCALHOST_PREFIX)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
diff --git a/packages/preview-web/tsconfig.json b/packages/preview-web/tsconfig.json
new file mode 100644
index 0000000..b3f3c00
--- /dev/null
+++ b/packages/preview-web/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "tsup.config.ts"]
+}
diff --git a/packages/preview-web/tsconfig.lib.json b/packages/preview-web/tsconfig.lib.json
new file mode 100644
index 0000000..06e7fbb
--- /dev/null
+++ b/packages/preview-web/tsconfig.lib.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "tsup.config.ts"
+  ]
+}
diff --git a/packages/preview-web/tsup.config.ts b/packages/preview-web/tsup.config.ts
new file mode 100644
index 0000000..e59a519
--- /dev/null
+++ b/packages/preview-web/tsup.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/**/*.ts', '!src/**/*.test.ts'],
+  format: ['esm'],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  target: 'es2022',
+  outDir: 'dist',
+  tsconfig: 'tsconfig.lib.json',
+  bundle: false,
+  external: [/^@contentful\//],
+});
diff --git a/tsconfig.json b/tsconfig.json
index 996191b..3453c4f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "./tsconfig.base.json",
   "files": [],
-  "include": []
+  "include": [],
+  "references": []
 }