diff --git a/.changeset/quiet-stars-glow.md b/.changeset/quiet-stars-glow.md
new file mode 100644
index 0000000000..2e64897e8d
--- /dev/null
+++ b/.changeset/quiet-stars-glow.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+Add usePreviewController and usePreviewPresenter hooks for typed iframe preview communication
diff --git a/packages/perseus-editor/src/preview/message-types.ts b/packages/perseus-editor/src/preview/message-types.ts
index c2e95b2a5e..feb9f35740 100644
--- a/packages/perseus-editor/src/preview/message-types.ts
+++ b/packages/perseus-editor/src/preview/message-types.ts
@@ -23,17 +23,6 @@ interface PreviewMessageBase {
     source: typeof PREVIEW_MESSAGE_SOURCE;
 }
 
-/**
- * Base type for messages with iframe ID
- *
- * Note: The ID is primarily used for debugging/logging purposes.
- * Message routing is handled by event.source filtering in the hooks,
- * not by comparing ID strings.
- */
-interface PreviewMessageWithId extends PreviewMessageBase {
-    id: string;
-}
-
 /**
  * Data for question preview (full item with question, answer area, and hints)
  */
@@ -82,10 +71,10 @@ export type PreviewContent =
 /**
  * Message from parent sending content data to iframe
  */
-type PreviewDataMessage = PreviewMessageWithId & {
+interface PreviewDataMessage extends PreviewMessageBase {
     type: "content-data";
     content: PreviewContent;
-};
+}
 
 /**
  * Union of all messages sent from parent to iframe
@@ -95,32 +84,30 @@ export type ParentToIframeMessage = PreviewDataMessage;
 // ---- Iframe → Parent messages ----
 
 /**
- * Message from iframe requesting data from parent
+ * Message from iframe to parent telling it the iframe is ready
  */
-type PreviewDataRequestMessage = PreviewMessageWithId & {
-    type: "request-data";
-};
+interface PreviewIframeReadyMessage extends PreviewMessageBase {
+    type: "iframe-ready";
+}
 
 /**
  * Message from iframe reporting its content height
  */
-type PreviewHeightUpdateMessage = PreviewMessageWithId & {
+interface PreviewHeightUpdateMessage extends PreviewMessageBase {
     type: "height-update";
     height: number;
-};
-
-/**
- * Message from iframe reporting lint warnings
- */
-type PreviewLintReportMessage = PreviewMessageWithId & {
-    type: "lint-report";
-    lintWarnings: ReadonlyArray<any>;
-};
+}
 
 /**
  * Union of all messages sent from iframe to parent
  */
 export type IframeToParentMessage =
-    | PreviewDataRequestMessage
-    | PreviewHeightUpdateMessage
-    | PreviewLintReportMessage;
+    | PreviewIframeReadyMessage
+    | PreviewHeightUpdateMessage;
+
+export function createPreviewIframeReadyMessage(): PreviewIframeReadyMessage {
+    return {
+        source: PREVIEW_MESSAGE_SOURCE,
+        type: "iframe-ready",
+    };
+}
diff --git a/packages/perseus-editor/src/preview/message-validators.test.ts b/packages/perseus-editor/src/preview/message-validators.test.ts
index 95fcb202fd..91bbdbcdfb 100644
--- a/packages/perseus-editor/src/preview/message-validators.test.ts
+++ b/packages/perseus-editor/src/preview/message-validators.test.ts
@@ -10,7 +10,6 @@ describe("message-validators", () => {
             const message = {
                 source: PREVIEW_MESSAGE_SOURCE,
                 type: "request-data" as const,
-                id: "test-id",
             };
 
             expect(isIframeToParentMessage(message)).toBe(true);
@@ -20,7 +19,6 @@ describe("message-validators", () => {
             const message = {
                 source: PREVIEW_MESSAGE_SOURCE,
                 type: "height-update" as const,
-                id: "test-id",
                 height: 500,
             };
 
@@ -31,7 +29,6 @@ describe("message-validators", () => {
             const message = {
                 source: PREVIEW_MESSAGE_SOURCE,
                 type: "lint-report" as const,
-                id: "test-id",
                 lintWarnings: [],
             };
 
@@ -55,7 +52,6 @@ describe("message-validators", () => {
         it("returns false for object without source property", () => {
             const message = {
                 type: "request-data",
-                id: "test-id",
             };
 
             expect(isIframeToParentMessage(message)).toBe(false);
@@ -65,7 +61,6 @@ describe("message-validators", () => {
             const message = {
                 source: 123,
                 type: "request-data",
-                id: "test-id",
             };
 
             expect(isIframeToParentMessage(message)).toBe(false);
@@ -75,7 +70,6 @@ describe("message-validators", () => {
             const message = {
                 source: "wrong-source",
                 type: "request-data",
-                id: "test-id",
             };
 
             expect(isIframeToParentMessage(message)).toBe(false);
@@ -105,7 +99,6 @@ describe("message-validators", () => {
             const message = {
                 source: PREVIEW_MESSAGE_SOURCE,
                 type: "content-data" as const,
-                id: "test-id",
                 content: {
                     type: "question" as const,
                     data: {
@@ -138,7 +131,6 @@ describe("message-validators", () => {
         it("returns false for object without source property", () => {
             const message = {
                 type: "content-data",
-                id: "test-id",
                 content: {},
             };
 
@@ -149,7 +141,6 @@ describe("message-validators", () => {
             const message = {
                 source: {nested: "object"},
                 type: "content-data",
-                id: "test-id",
             };
 
             expect(isParentToIframeMessage(message)).toBe(false);
@@ -159,7 +150,6 @@ describe("message-validators", () => {
             const message = {
                 source: "different-source",
                 type: "content-data",
-                id: "test-id",
             };
 
             expect(isParentToIframeMessage(message)).toBe(false);
@@ -186,7 +176,6 @@ describe("message-validators", () => {
             const message = {
                 source: PREVIEW_MESSAGE_SOURCE,
                 type: "content-data",
-                id: "test-id",
                 unexpectedProperty: "should-not-break",
             };
 
@@ -199,7 +188,6 @@ describe("message-validators", () => {
             const message = {
                 source: PREVIEW_MESSAGE_SOURCE,
                 type: "some-type",
-                id: "test-id",
             };
 
             // Both type guards only check source, so this passes both
diff --git a/packages/perseus-editor/src/preview/use-preview-controller.test.ts b/packages/perseus-editor/src/preview/use-preview-controller.test.ts
new file mode 100644
index 0000000000..acceda4070
--- /dev/null
+++ b/packages/perseus-editor/src/preview/use-preview-controller.test.ts
@@ -0,0 +1,664 @@
+import {renderHook, act, waitFor} from "@testing-library/react";
+
+import {
+    createPreviewIframeReadyMessage,
+    PREVIEW_MESSAGE_SOURCE,
+} from "./message-types";
+import {usePreviewController} from "./use-preview-controller";
+
+import type {PreviewContent} from "./message-types";
+import type {APIOptions} from "@khanacademy/perseus";
+import type * as React from "react";
+
+describe("usePreviewController", () => {
+    let mockIframe: {contentWindow: Window | null; dataset: any};
+    let mockContentWindow: Window;
+    let iframeRef: React.RefObject<HTMLIFrameElement>;
+
+    beforeEach(() => {
+        // Create mock content window with postMessage
+        mockContentWindow = {
+            postMessage: jest.fn(),
+        } as unknown as Window;
+
+        // Create mock iframe element
+        mockIframe = {
+            contentWindow: mockContentWindow,
+            dataset: {},
+        };
+
+        // Create ref pointing to mock iframe
+        iframeRef = {current: mockIframe as any};
+    });
+
+    describe("initialization", () => {
+        it("initializes with null height", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            expect(result.current.height).toBeNull();
+            expect(result.current.sendData).toBeInstanceOf(Function);
+        });
+
+        it("sets up message event listener", () => {
+            const addEventListenerSpy = jest.spyOn(window, "addEventListener");
+
+            renderHook(() => usePreviewController(iframeRef));
+
+            expect(addEventListenerSpy).toHaveBeenCalledWith(
+                "message",
+                expect.any(Function),
+            );
+        });
+
+        it("cleans up message event listener on unmount", () => {
+            const removeEventListenerSpy = jest.spyOn(
+                window,
+                "removeEventListener",
+            );
+
+            const {unmount} = renderHook(() => usePreviewController(iframeRef));
+
+            unmount();
+
+            expect(removeEventListenerSpy).toHaveBeenCalledWith(
+                "message",
+                expect.any(Function),
+            );
+        });
+    });
+
+    describe("sendData", () => {
+        it("stores data as pending if iframe isn't ready yet", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+            const previewData = createQuestionPreview();
+
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            // Should not post message yet
+            expect(mockContentWindow.postMessage).not.toHaveBeenCalled();
+        });
+
+        it("stores data to send later if the iframe ref isn't set yet", () => {
+            const localIframeRef: React.MutableRefObject<HTMLIFrameElement | null> =
+                {current: null};
+
+            const {result} = renderHook(() =>
+                usePreviewController(localIframeRef),
+            );
+
+            const previewData = createQuestionPreview();
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            // Should not post message yet
+            expect(mockContentWindow.postMessage).not.toHaveBeenCalled();
+
+            // iframe is now set
+            localIframeRef.current = iframeRef.current;
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            // Should not post message yet
+            expect(mockContentWindow.postMessage).toHaveBeenCalledTimes(1);
+        });
+
+        it("sends only latest data once iframe is ready", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+            const previewData1 = createQuestionPreview();
+            const previewData2 = createQuestionPreview({content: "Question 2"});
+
+            act(() => {
+                result.current.sendData(previewData1);
+                result.current.sendData(previewData2);
+            });
+
+            // Should not post message yet
+            expect(mockContentWindow.postMessage).not.toHaveBeenCalled();
+
+            // Simulate iframe requesting data
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            expect(mockContentWindow.postMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    content: expect.objectContaining({
+                        data: expect.objectContaining({
+                            item: expect.objectContaining({
+                                question: expect.objectContaining({
+                                    content: "Question 2",
+                                }),
+                            }),
+                        }),
+                    }),
+                }),
+                "/",
+            );
+        });
+
+        it("sends data immediately if iframe is already ready", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            // Simulate iframe requesting data
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            // Now send data
+            const previewData = createQuestionPreview();
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            expect(mockContentWindow.postMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: PREVIEW_MESSAGE_SOURCE,
+                    type: "content-data",
+                    content: expect.objectContaining({
+                        type: "question",
+                    }),
+                }),
+                "/",
+            );
+        });
+
+        it("sanitizes apiOptions before sending", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            // Simulate iframe requesting data
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            const previewData = createQuestionPreview({
+                apiOptions: {onFocusChange: jest.fn()},
+            });
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            const sentMessage = (mockContentWindow.postMessage as jest.Mock)
+                .mock.calls[0][0];
+
+            // Non-serializable functions should be removed
+            expect(
+                sentMessage.content.data.apiOptions.onFocusChange,
+            ).toBeUndefined();
+            // Serializable options should remain
+            expect(sentMessage.content.data.apiOptions.readOnly).toBe(true);
+        });
+
+        it("does not send if iframe ref is null", () => {
+            const nullRef = {current: null};
+            const {result} = renderHook(() => usePreviewController(nullRef));
+
+            const previewData = createQuestionPreview();
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            expect(mockContentWindow.postMessage).not.toHaveBeenCalled();
+        });
+
+        it("does not send if contentWindow is null", () => {
+            mockIframe.contentWindow = null;
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            const previewData = createQuestionPreview();
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            expect(mockContentWindow.postMessage).not.toHaveBeenCalled();
+        });
+
+        it("sendData function reference remains stable", () => {
+            const {result, rerender} = renderHook(() =>
+                usePreviewController(iframeRef),
+            );
+
+            const firstSendData = result.current.sendData;
+            rerender();
+            const secondSendData = result.current.sendData;
+
+            expect(firstSendData).toBe(secondSendData);
+        });
+    });
+
+    describe("receiving iframe-ready message", () => {
+        it("responds to iframe-ready with pending data", async () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+            const previewData = createQuestionPreview();
+
+            // Send data first (will be pending)
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            // Now iframe tells parent its ready
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            await waitFor(() => {
+                expect(mockContentWindow.postMessage).toHaveBeenCalled();
+            });
+
+            expect(mockContentWindow.postMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: PREVIEW_MESSAGE_SOURCE,
+                    type: "content-data",
+                    content: expect.objectContaining({
+                        type: "question",
+                    }),
+                }),
+                "/",
+            );
+        });
+
+        it("only sends data once if multiple iframe-ready events are received", async () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+            const previewData = createQuestionPreview();
+
+            // Send data (will be pending)
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            // Iframe says its ready
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            await waitFor(() => {
+                expect(mockContentWindow.postMessage).toHaveBeenCalledTimes(1);
+            });
+
+            // Second request should not send the same data again
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            // Should still be called only once
+            expect(mockContentWindow.postMessage).toHaveBeenCalledTimes(1);
+        });
+
+        it("doesn't reply to iframe-ready when there is no pending data", () => {
+            renderHook(() => usePreviewController(iframeRef));
+
+            // Iframe says its ready
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            expect(mockContentWindow.postMessage).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("receiving height-update message", () => {
+        it("updates height from height-update message", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            expect(result.current.height).toBeNull();
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: PREVIEW_MESSAGE_SOURCE,
+                            type: "height-update",
+                            height: 500,
+                        },
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.height).toBe(500);
+        });
+
+        it("updates height multiple times", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: PREVIEW_MESSAGE_SOURCE,
+                            type: "height-update",
+                            height: 300,
+                        },
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.height).toBe(300);
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: PREVIEW_MESSAGE_SOURCE,
+                            type: "height-update",
+                            height: 600,
+                        },
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.height).toBe(600);
+        });
+    });
+
+    describe("message filtering", () => {
+        it("ignores messages from different source window", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            const differentWindow = {} as Window;
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: PREVIEW_MESSAGE_SOURCE,
+                            type: "height-update",
+                            height: 999,
+                        },
+                        source: differentWindow,
+                    }),
+                );
+            });
+
+            // Height should not be updated
+            expect(result.current.height).toBeNull();
+        });
+
+        it("ignores messages without correct source identifier", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: "wrong-source",
+                            type: "height-update",
+                            height: 999,
+                        },
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            // Height should not be updated
+            expect(result.current.height).toBeNull();
+        });
+
+        it("ignores non-Perseus messages", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            type: "some-other-message",
+                            payload: "data",
+                        },
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            // Should not crash or change state
+            expect(result.current.height).toBeNull();
+        });
+
+        it("ignores messages when iframe ref is null", () => {
+            const nullRef = {current: null};
+            const {result} = renderHook(() => usePreviewController(nullRef));
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: PREVIEW_MESSAGE_SOURCE,
+                            type: "height-update",
+                            height: 999,
+                        },
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            // Height should not be updated
+            expect(result.current.height).toBeNull();
+        });
+    });
+
+    describe("complex scenarios", () => {
+        it("handles full lifecycle: request -> send -> height update", async () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            // 1. Iframe requests data
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            // 2. Send preview data
+            const previewData = createQuestionPreview();
+            act(() => {
+                result.current.sendData(previewData);
+            });
+
+            await waitFor(() => {
+                expect(mockContentWindow.postMessage).toHaveBeenCalled();
+            });
+
+            // 3. Receive height update
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: PREVIEW_MESSAGE_SOURCE,
+                            type: "height-update",
+                            height: 450,
+                        },
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.height).toBe(450);
+        });
+
+        it("handles multiple preview data updates", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            // Setup: iframe requests data
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            // Send first data
+            const data1 = createQuestionPreview();
+            act(() => {
+                result.current.sendData(data1);
+            });
+
+            expect(mockContentWindow.postMessage).toHaveBeenCalledTimes(1);
+
+            // Send second data
+            const data2: PreviewContent = {
+                type: "hint",
+                data: {
+                    hint: {content: "Hint", widgets: {}, images: {}},
+                    pos: 0,
+                    apiOptions: {},
+                    linterContext: {
+                        contentType: "exercise",
+                        highlightLint: false,
+                        stack: [],
+                    },
+                },
+            };
+            act(() => {
+                result.current.sendData(data2);
+            });
+
+            expect(mockContentWindow.postMessage).toHaveBeenCalledTimes(2);
+
+            // Verify second message contains hint data
+            const secondCall = (mockContentWindow.postMessage as jest.Mock).mock
+                .calls[1][0];
+            expect(secondCall.content.type).toBe("hint");
+        });
+
+        it("handles article-all with multiple sections", () => {
+            const {result} = renderHook(() => usePreviewController(iframeRef));
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createPreviewIframeReadyMessage(),
+                        source: mockContentWindow,
+                    }),
+                );
+            });
+
+            const articleData: PreviewContent = {
+                type: "article-all",
+                data: [
+                    {
+                        json: [{content: "Section 1", widgets: {}, images: {}}],
+                        apiOptions: {
+                            readOnly: true,
+                            onFocusChange: jest.fn(),
+                        } as any,
+                        linterContext: {
+                            contentType: "article",
+                            highlightLint: false,
+                            stack: [],
+                        },
+                    },
+                    {
+                        json: [{content: "Section 2", widgets: {}, images: {}}],
+                        apiOptions: {
+                            isMobile: true,
+                            trackInteraction: jest.fn(),
+                        } as any,
+                        linterContext: {
+                            contentType: "article",
+                            highlightLint: false,
+                            stack: [],
+                        },
+                    },
+                ],
+            };
+
+            act(() => {
+                result.current.sendData(articleData);
+            });
+
+            const sentMessage = (mockContentWindow.postMessage as jest.Mock)
+                .mock.calls[0][0];
+
+            // Both sections should have apiOptions sanitized
+            expect(sentMessage.content.data).toHaveLength(2);
+            expect(
+                sentMessage.content.data[0].apiOptions.onFocusChange,
+            ).toBeUndefined();
+            expect(sentMessage.content.data[0].apiOptions.readOnly).toBe(true);
+            expect(
+                sentMessage.content.data[1].apiOptions.trackInteraction,
+            ).toBeUndefined();
+            expect(sentMessage.content.data[1].apiOptions.isMobile).toBe(true);
+        });
+    });
+});
+
+function createQuestionPreview(overrides?: {
+    content?: string;
+    apiOptions?: Partial<APIOptions>;
+}): PreviewContent {
+    return {
+        type: "question",
+        data: {
+            item: {
+                question: {
+                    content: overrides?.content ?? "What is 2+2?",
+                    widgets: {},
+                    images: {},
+                },
+                answerArea: {calculator: false} as any,
+                hints: [],
+            },
+            apiOptions: {
+                readOnly: true,
+                ...overrides?.apiOptions,
+            },
+            initialHintsVisible: 0,
+            device: {type: "phone"} as any,
+            linterContext: {
+                contentType: "exercise",
+                highlightLint: false,
+                stack: [],
+            },
+        },
+    };
+}
diff --git a/packages/perseus-editor/src/preview/use-preview-controller.ts b/packages/perseus-editor/src/preview/use-preview-controller.ts
new file mode 100644
index 0000000000..3464484fe1
--- /dev/null
+++ b/packages/perseus-editor/src/preview/use-preview-controller.ts
@@ -0,0 +1,146 @@
+import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
+import * as React from "react";
+
+import {PREVIEW_MESSAGE_SOURCE} from "./message-types";
+import {isIframeToParentMessage} from "./message-validators";
+import {sanitizePreviewData} from "./preview-data-sanitizer";
+
+import type {ParentToIframeMessage, PreviewContent} from "./message-types";
+
+type UsePreviewControllerResult = {
+    /**
+     * Send preview content data to the iframe
+     */
+    sendData: (data: PreviewContent) => void;
+    /**
+     * Current height of the iframe content (null if not yet reported)
+     */
+    height: number | null;
+};
+
+/**
+ * Hook for parent/editor to send data to preview iframe and receive updates.
+ *
+ * This hook:
+ * - Sends preview content data to iframe via postMessage
+ * - Listens for height updates from iframe
+ * - Listens for lint reports from iframe
+ * - Automatically sanitizes apiOptions before sending (removes non-serializable functions)
+ *
+ * @param iframeRef - Reference to the iframe element
+ * @returns Object with sendData function and current height
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   const iframeRef = React.useRef<HTMLIFrameElement>(null);
+ *   const { sendData, height } = usePreviewController(iframeRef);
+ *
+ *   React.useEffect(() => {
+ *     sendData({
+ *       type: "question",
+ *       data: { item, apiOptions, ... }
+ *     });
+ *   }, [item, apiOptions]);
+ *
+ *   return <iframe ref={iframeRef} style={{ height }} />;
+ * }
+ * ```
+ */
+export function usePreviewController(
+    iframeRef: React.RefObject<HTMLIFrameElement>,
+): UsePreviewControllerResult {
+    const [height, setHeight] = React.useState<number | null>(null);
+    const [isIframeReady, setIsIframeReady] = React.useState(false);
+    const pendingDataRef = React.useRef<PreviewContent | null>(null);
+
+    // Listen for messages from iframe
+    React.useEffect(() => {
+        const handleMessage = (event: MessageEvent) => {
+            // Filter by source window - only messages from OUR iframe
+            if (
+                iframeRef.current?.contentWindow == null ||
+                event.source !== iframeRef.current?.contentWindow
+            ) {
+                return;
+            }
+
+            const message = event.data;
+
+            // Check if it's a Perseus preview message
+            if (!isIframeToParentMessage(message)) {
+                return;
+            }
+
+            // Handle the message
+            switch (message.type) {
+                case "iframe-ready": {
+                    // Send the pending message (if any)
+                    if (pendingDataRef.current) {
+                        const sanitizedData = sanitizePreviewData(
+                            pendingDataRef.current,
+                        );
+
+                        const msg: ParentToIframeMessage = {
+                            source: PREVIEW_MESSAGE_SOURCE,
+                            type: "content-data",
+                            content: sanitizedData,
+                        };
+                        iframeRef.current.contentWindow.postMessage(msg, "/");
+
+                        // Clear the pending data
+                        pendingDataRef.current = null;
+                    }
+                    setIsIframeReady(true);
+                    break;
+                }
+
+                case "height-update":
+                    setHeight(message.height);
+                    break;
+
+                default:
+                    throw new UnreachableCaseError(message);
+            }
+        };
+
+        window.addEventListener("message", handleMessage);
+
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, [iframeRef]);
+
+    // Memoized function to send data to iframe
+    const sendData = React.useCallback(
+        (data: PreviewContent) => {
+            // If iframe hasn't sent request-data yet, store the data
+            if (!isIframeReady) {
+                pendingDataRef.current = data;
+                return;
+            }
+
+            const contentWindow = iframeRef.current?.contentWindow;
+            if (!contentWindow) {
+                return;
+            }
+
+            // Iframe is ready, send immediately
+            const sanitizedData = sanitizePreviewData(data);
+
+            const message: ParentToIframeMessage = {
+                source: PREVIEW_MESSAGE_SOURCE,
+                type: "content-data",
+                content: sanitizedData,
+            };
+
+            contentWindow.postMessage(message, "/");
+        },
+        [iframeRef, isIframeReady],
+    );
+
+    return {
+        sendData,
+        height,
+    };
+}
diff --git a/packages/perseus-editor/src/preview/use-preview-presenter.test.ts b/packages/perseus-editor/src/preview/use-preview-presenter.test.ts
new file mode 100644
index 0000000000..37c573a9fc
--- /dev/null
+++ b/packages/perseus-editor/src/preview/use-preview-presenter.test.ts
@@ -0,0 +1,730 @@
+import {renderHook, act, waitFor} from "@testing-library/react";
+
+import {PREVIEW_MESSAGE_SOURCE} from "./message-types";
+import {usePreviewPresenter} from "./use-preview-presenter";
+
+import type {ParentToIframeMessage, PreviewContent} from "./message-types";
+
+describe("usePreviewPresenter", () => {
+    let mockIframeElement: {
+        dataset: {[key: string]: string | undefined};
+    };
+    let mockParentWindow: Window;
+    let originalFrameElement: Element | null;
+    let originalParent: Window;
+
+    beforeEach(() => {
+        // Mock parent window with postMessage
+        mockParentWindow = {
+            postMessage: jest.fn(),
+        } as unknown as Window;
+
+        // Mock iframe element with dataset
+        mockIframeElement = {
+            dataset: {
+                mobile: "false",
+                lintGutter: "false",
+            },
+        };
+
+        // Save originals
+        originalFrameElement = window.frameElement;
+        originalParent = window.parent;
+
+        // Override window properties
+        Object.defineProperty(window, "frameElement", {
+            configurable: true,
+            value: mockIframeElement,
+        });
+        Object.defineProperty(window, "parent", {
+            configurable: true,
+            value: mockParentWindow,
+        });
+    });
+
+    afterEach(() => {
+        // Restore originals
+        Object.defineProperty(window, "frameElement", {
+            configurable: true,
+            value: originalFrameElement,
+        });
+        Object.defineProperty(window, "parent", {
+            configurable: true,
+            value: originalParent,
+        });
+    });
+
+    describe("initialization", () => {
+        it("initializes with null data", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            expect(result.current.data).toBeNull();
+            expect(result.current.isMobile).toBe(false);
+            expect(result.current.hasLintGutter).toBe(false);
+        });
+
+        it("reads iframe configuration from dataset", () => {
+            mockIframeElement.dataset = {
+                mobile: "true",
+                lintGutter: "true",
+            };
+
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            expect(result.current.isMobile).toBe(true);
+            expect(result.current.hasLintGutter).toBe(true);
+        });
+
+        it("sends iframe-ready message on mount", async () => {
+            renderHook(() => usePreviewPresenter());
+
+            await waitFor(() => {
+                expect(mockParentWindow.postMessage).toHaveBeenCalledWith(
+                    {
+                        source: PREVIEW_MESSAGE_SOURCE,
+                        type: "iframe-ready",
+                    },
+                    "/",
+                );
+            });
+        });
+
+        it("throws error when not used within an iframe", () => {
+            Object.defineProperty(window, "frameElement", {
+                configurable: true,
+                value: null,
+            });
+
+            expect(() => {
+                renderHook(() => usePreviewPresenter());
+            }).toThrow("usePreviewPresenter must be used within an iframe");
+        });
+
+        it("sets up message event listener", () => {
+            const addEventListenerSpy = jest.spyOn(window, "addEventListener");
+
+            renderHook(() => usePreviewPresenter());
+
+            expect(addEventListenerSpy).toHaveBeenCalledWith(
+                "message",
+                expect.any(Function),
+            );
+        });
+
+        it("cleans up message event listener on unmount", () => {
+            const removeEventListenerSpy = jest.spyOn(
+                window,
+                "removeEventListener",
+            );
+
+            const {unmount} = renderHook(() => usePreviewPresenter());
+
+            unmount();
+
+            expect(removeEventListenerSpy).toHaveBeenCalledWith(
+                "message",
+                expect.any(Function),
+            );
+        });
+    });
+
+    describe("receiving content-data message", () => {
+        const createContentDataMessage = (
+            content: PreviewContent,
+        ): ParentToIframeMessage => ({
+            source: PREVIEW_MESSAGE_SOURCE,
+            type: "content-data",
+            content,
+        });
+
+        it("updates data when receiving content-data message", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            const questionContent: PreviewContent = {
+                type: "question",
+                data: {
+                    item: {
+                        question: {
+                            content: "What is 2+2?",
+                            widgets: {},
+                            images: {},
+                        },
+                        answerArea: {calculator: false} as any,
+                        hints: [],
+                    },
+                    apiOptions: {readOnly: true},
+                    initialHintsVisible: 0,
+                    device: {type: "phone"} as any,
+                    linterContext: {
+                        contentType: "exercise",
+                        highlightLint: false,
+                        stack: [],
+                    },
+                },
+            };
+
+            const message = createContentDataMessage(questionContent);
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: message,
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toEqual(questionContent);
+        });
+
+        it("updates data for hint content", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            const hintContent: PreviewContent = {
+                type: "hint",
+                data: {
+                    hint: {
+                        content: "Try this approach...",
+                        widgets: {},
+                        images: {},
+                    },
+                    pos: 0,
+                    apiOptions: {},
+                    linterContext: {
+                        contentType: "exercise",
+                        highlightLint: false,
+                        stack: [],
+                    },
+                },
+            };
+
+            const message = createContentDataMessage(hintContent);
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: message,
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toEqual(hintContent);
+        });
+
+        it("updates data for article content", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            const articleContent: PreviewContent = {
+                type: "article",
+                data: {
+                    json: [
+                        {
+                            content: "# Article Title\n\nArticle content",
+                            widgets: {},
+                            images: {},
+                        },
+                    ],
+                    apiOptions: {},
+                    linterContext: {
+                        contentType: "article",
+                        highlightLint: false,
+                        stack: [],
+                    },
+                },
+            };
+
+            const message = createContentDataMessage(articleContent);
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: message,
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toEqual(articleContent);
+        });
+
+        it("updates data for article-all content", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            const articleAllContent: PreviewContent = {
+                type: "article-all",
+                data: [
+                    {
+                        json: [{content: "Section 1", widgets: {}, images: {}}],
+                        apiOptions: {},
+                        linterContext: {
+                            contentType: "article",
+                            highlightLint: false,
+                            stack: [],
+                        },
+                    },
+                    {
+                        json: [{content: "Section 2", widgets: {}, images: {}}],
+                        apiOptions: {},
+                        linterContext: {
+                            contentType: "article",
+                            highlightLint: false,
+                            stack: [],
+                        },
+                    },
+                ],
+            };
+
+            const message = createContentDataMessage(articleAllContent);
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: message,
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toEqual(articleAllContent);
+        });
+
+        it("ignores content-data from non-parent source", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            const mockOtherWindow = {
+                postMessage: jest.fn(),
+            } as unknown as Window;
+
+            const message: ParentToIframeMessage = {
+                source: PREVIEW_MESSAGE_SOURCE,
+                type: "content-data",
+                content: {
+                    type: "question",
+                    data: {} as any,
+                },
+            };
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: message,
+                        source: mockOtherWindow,
+                    }),
+                );
+            });
+
+            // Data should remain null
+            expect(result.current.data).toBeNull();
+        });
+
+        it("updates data multiple times", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            const content1: PreviewContent = {
+                type: "question",
+                data: {
+                    item: {
+                        question: {
+                            content: "Question 1",
+                            widgets: {},
+                            images: {},
+                        },
+                        answerArea: {calculator: false} as any,
+                        hints: [],
+                    },
+                    apiOptions: {},
+                    initialHintsVisible: 0,
+                    device: {type: "phone"} as any,
+                    linterContext: {
+                        contentType: "exercise",
+                        highlightLint: false,
+                        stack: [],
+                    },
+                },
+            };
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createContentDataMessage(content1),
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toEqual(content1);
+
+            const content2: PreviewContent = {
+                type: "hint",
+                data: {
+                    hint: {content: "Hint 1", widgets: {}, images: {}},
+                    pos: 0,
+                    apiOptions: {},
+                    linterContext: {
+                        contentType: "exercise",
+                        highlightLint: false,
+                        stack: [],
+                    },
+                },
+            };
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: createContentDataMessage(content2),
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toEqual(content2);
+        });
+    });
+
+    describe("reportHeight", () => {
+        it("sends height-update message", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            act(() => {
+                result.current.reportHeight(500);
+            });
+
+            expect(mockParentWindow.postMessage).toHaveBeenCalledWith(
+                {
+                    source: PREVIEW_MESSAGE_SOURCE,
+                    type: "height-update",
+
+                    height: 500,
+                },
+                "/",
+            );
+        });
+
+        it("sends multiple height updates", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            act(() => {
+                result.current.reportHeight(300);
+            });
+
+            act(() => {
+                result.current.reportHeight(600);
+            });
+
+            // 1 iframe-ready + 2 height-updates
+            expect(mockParentWindow.postMessage).toHaveBeenCalledTimes(3);
+
+            // Check the height update calls
+            const calls = (mockParentWindow.postMessage as jest.Mock).mock
+                .calls;
+            expect(calls[1][0]).toEqual({
+                source: PREVIEW_MESSAGE_SOURCE,
+                type: "height-update",
+
+                height: 300,
+            });
+            expect(calls[2][0]).toEqual({
+                source: PREVIEW_MESSAGE_SOURCE,
+                type: "height-update",
+
+                height: 600,
+            });
+        });
+
+        it("reportHeight function reference remains stable", () => {
+            const {result, rerender} = renderHook(() => usePreviewPresenter());
+
+            const firstReportHeight = result.current.reportHeight;
+            rerender();
+            const secondReportHeight = result.current.reportHeight;
+
+            expect(firstReportHeight).toBe(secondReportHeight);
+        });
+    });
+
+    describe("message filtering", () => {
+        it("ignores messages from different source window", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            const differentWindow = {} as Window;
+
+            const message: ParentToIframeMessage = {
+                source: PREVIEW_MESSAGE_SOURCE,
+                type: "content-data",
+
+                content: {
+                    type: "question",
+                    data: {} as any,
+                },
+            };
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: message,
+                        source: differentWindow,
+                    }),
+                );
+            });
+
+            // Data should remain null
+            expect(result.current.data).toBeNull();
+        });
+
+        it("ignores messages without correct source identifier", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: "wrong-source",
+                            type: "content-data",
+
+                            content: {},
+                        },
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            // Data should remain null
+            expect(result.current.data).toBeNull();
+        });
+
+        it("ignores non-Perseus messages", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            type: "random-message",
+                            payload: "data",
+                        },
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            // Should not crash or change state
+            expect(result.current.data).toBeNull();
+        });
+
+        it("ignores malformed messages", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: null,
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toBeNull();
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: "string-data",
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toBeNull();
+        });
+    });
+
+    describe("dataset configuration variations", () => {
+        it.each([true, false])("handles mobile='%s' string", (isMobile) => {
+            mockIframeElement.dataset = {
+                id: "test-id",
+                mobile: isMobile.toString(),
+                lintGutter: "false",
+            };
+
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            expect(result.current.isMobile).toBe(isMobile);
+        });
+
+        it("handles mobile as any other string (treated as false)", () => {
+            mockIframeElement.dataset = {
+                id: "test-id",
+                mobile: "yes",
+                lintGutter: "false",
+            };
+
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            expect(result.current.isMobile).toBe(false);
+        });
+
+        it.each([true, false])(
+            "handles lintGutter='%s' string",
+            (lintGutter) => {
+                mockIframeElement.dataset = {
+                    id: "test-id",
+                    mobile: "false",
+                    lintGutter: lintGutter.toString(),
+                };
+
+                const {result} = renderHook(() => usePreviewPresenter());
+
+                expect(result.current.hasLintGutter).toBe(lintGutter);
+            },
+        );
+
+        it("handles undefined dataset values", () => {
+            mockIframeElement.dataset = {
+                id: "required-id",
+                mobile: undefined,
+                lintGutter: undefined,
+            };
+
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            expect(result.current.isMobile).toBe(false);
+            expect(result.current.hasLintGutter).toBe(false);
+        });
+    });
+
+    describe("complex scenarios", () => {
+        it("handles full lifecycle: init -> request -> receive data -> report height", async () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            // 1. Hook should request data on init
+            await waitFor(() => {
+                expect(mockParentWindow.postMessage).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        type: "iframe-ready",
+                    }),
+                    "/",
+                );
+            });
+
+            // 2. Receive content data
+            const content: PreviewContent = {
+                type: "question",
+                data: {
+                    item: {
+                        question: {content: "Test", widgets: {}, images: {}},
+                        answerArea: {calculator: false} as any,
+                        hints: [],
+                    },
+                    apiOptions: {},
+                    initialHintsVisible: 0,
+                    device: {type: "phone"} as any,
+                    linterContext: {
+                        contentType: "exercise",
+                        highlightLint: false,
+                        stack: [],
+                    },
+                },
+            };
+
+            act(() => {
+                window.dispatchEvent(
+                    new MessageEvent("message", {
+                        data: {
+                            source: PREVIEW_MESSAGE_SOURCE,
+                            type: "content-data",
+
+                            content,
+                        },
+                        source: mockParentWindow,
+                    }),
+                );
+            });
+
+            expect(result.current.data).toEqual(content);
+
+            // 3. Report height
+            act(() => {
+                result.current.reportHeight(350);
+            });
+
+            expect(mockParentWindow.postMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: "height-update",
+                    height: 350,
+                }),
+                "/",
+            );
+        });
+
+        it("handles rapid content updates", () => {
+            const {result} = renderHook(() => usePreviewPresenter());
+
+            const contents: PreviewContent[] = [
+                {
+                    type: "question",
+                    data: {
+                        item: {
+                            question: {content: "Q1", widgets: {}, images: {}},
+                            answerArea: {calculator: false} as any,
+                            hints: [],
+                        },
+                        apiOptions: {},
+                        initialHintsVisible: 0,
+                        device: {type: "phone"} as any,
+                        linterContext: {
+                            contentType: "exercise",
+                            highlightLint: false,
+                            stack: [],
+                        },
+                    },
+                },
+                {
+                    type: "hint",
+                    data: {
+                        hint: {content: "H1", widgets: {}, images: {}},
+                        pos: 0,
+                        apiOptions: {},
+                        linterContext: {
+                            contentType: "exercise",
+                            highlightLint: false,
+                            stack: [],
+                        },
+                    },
+                },
+                {
+                    type: "article",
+                    data: {
+                        json: [{content: "A1", widgets: {}, images: {}}],
+                        apiOptions: {},
+                        linterContext: {
+                            contentType: "article",
+                            highlightLint: false,
+                            stack: [],
+                        },
+                    },
+                },
+            ];
+
+            // Send all updates in quick succession
+            act(() => {
+                contents.forEach((content) => {
+                    window.dispatchEvent(
+                        new MessageEvent("message", {
+                            data: {
+                                source: PREVIEW_MESSAGE_SOURCE,
+                                type: "content-data",
+
+                                content,
+                            },
+                            source: mockParentWindow,
+                        }),
+                    );
+                });
+            });
+
+            // Should have the last content
+            expect(result.current.data).toEqual(contents[2]);
+        });
+    });
+});
diff --git a/packages/perseus-editor/src/preview/use-preview-presenter.ts b/packages/perseus-editor/src/preview/use-preview-presenter.ts
new file mode 100644
index 0000000000..28d4236fc7
--- /dev/null
+++ b/packages/perseus-editor/src/preview/use-preview-presenter.ts
@@ -0,0 +1,127 @@
+import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
+import * as React from "react";
+
+import {
+    createPreviewIframeReadyMessage,
+    PREVIEW_MESSAGE_SOURCE,
+} from "./message-types";
+import {isParentToIframeMessage} from "./message-validators";
+
+import type {
+    IframeToParentMessage,
+    ParentToIframeMessage,
+    PreviewContent,
+} from "./message-types";
+
+type UsePreviewPresenterResult = {
+    /**
+     * The preview content data received from the parent, or null if not yet loaded
+     */
+    data: PreviewContent | null;
+    /**
+     * Whether the preview should render in mobile mode (from data-mobile attribute)
+     */
+    isMobile: boolean;
+    /**
+     * Whether to show the lint gutter (from data-lint-gutter attribute)
+     */
+    hasLintGutter: boolean;
+    /**
+     * Function to report the current height of the iframe content to the parent
+     */
+    reportHeight: (height: number) => void;
+};
+
+/**
+ * Hook for preview iframe to receive data from parent and send updates back.
+ *
+ * This hook:
+ * - Reads iframe configuration from dataset attributes (id, mobile, lintGutter)
+ * - Listens for content data from the parent window via postMessage
+ * - Requests initial data on mount
+ * - Provides functions to report height and lint warnings back to parent
+ *
+ * @example
+ * ```tsx
+ * function PreviewPage() {
+ *   const { data, isMobile, reportHeight } = usePreviewPresenter();
+ *
+ *   React.useEffect(() => {
+ *     if (containerRef.current) {
+ *       reportHeight(containerRef.current.scrollHeight);
+ *     }
+ *   }, [data, reportHeight]);
+ *
+ *   if (!data) return <div>Loading...</div>;
+ *   return <PreviewRenderer
+ *       ref={containerRef}
+ *       data={data}
+ *       isMobile={isMobile}
+ *   />;
+ * }
+ * ```
+ */
+export function usePreviewPresenter(): UsePreviewPresenterResult {
+    const [data, setData] = React.useState<PreviewContent | null>(null);
+
+    const iframe = window.frameElement as HTMLIFrameElement | null;
+    if (iframe == null) {
+        throw new Error("usePreviewPresenter must be used within an iframe");
+    }
+
+    // Listen for data from parent
+    React.useEffect(() => {
+        const handleMessage = (event: MessageEvent<ParentToIframeMessage>) => {
+            // Filter by source window - only messages from parent
+            if (event.source !== window.parent) {
+                return;
+            }
+
+            const message = event.data;
+
+            // Ignore messages that aren't from Perseus preview system
+            if (!isParentToIframeMessage(message)) {
+                return;
+            }
+
+            switch (message.type) {
+                case "content-data":
+                    setData(message.content);
+                    break;
+
+                default:
+                    throw new UnreachableCaseError(message.type);
+            }
+        };
+
+        window.addEventListener("message", handleMessage);
+
+        // Tell parent we're ready for data.
+        window.parent.postMessage(createPreviewIframeReadyMessage(), "/");
+
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, []);
+
+    // Memoized callback to report height
+    const reportHeight = React.useCallback((height: number) => {
+        if (window.parent == null) {
+            return;
+        }
+
+        const message: IframeToParentMessage = {
+            source: PREVIEW_MESSAGE_SOURCE,
+            type: "height-update",
+            height,
+        };
+        window.parent.postMessage(message, "/");
+    }, []);
+
+    return {
+        data,
+        isMobile: iframe.dataset.mobile === "true",
+        hasLintGutter: iframe.dataset.lintGutter === "true",
+        reportHeight,
+    };
+}