diff --git a/packages/framework/react/src/test/text/plainUtils.test.ts b/packages/framework/react/src/test/text/plainUtils.test.ts
index 21a9ba1782d4..10e66b1a6a96 100644
--- a/packages/framework/react/src/test/text/plainUtils.test.ts
+++ b/packages/framework/react/src/test/text/plainUtils.test.ts
@@ -5,11 +5,170 @@
 
 import { strict as assert } from "node:assert";
 
-// Allow import of file being tested
-// eslint-disable-next-line import-x/no-internal-modules
-import { computeSync } from "../../text/plain/plainUtils.js";
+import { TextAsTree, TreeAlpha } from "@fluidframework/tree/internal";
+import {
+	independentView,
+	TreeViewConfiguration,
+	type TreeViewAlpha,
+} from "@fluidframework/tree/alpha";
+
+import { createUndoRedo } from "../../undoRedo.js";
+/* eslint-disable import-x/no-internal-modules -- Allow import of the file being tested. */
+import {
+	applyTextOps,
+	collapseSelectionOnReread,
+	computeSync,
+	syncTextToTree,
+} from "../../text/plain/plainUtils.js";
+/* eslint-enable import-x/no-internal-modules */
 
 describe("plainUtils", () => {
+	describe("applyTextOps", () => {
+		it("inserts text, leaving the selection start before the edit and extending the end past it", () => {
+			// "hello" with selection "el" (1-3); insert "XX" at index 2, inside the selection.
+			// start (before the insert) is unchanged; end (after it) shifts by the inserted length.
+			const result = applyTextOps("hello", { start: 1, end: 3 }, [
+				{ type: "retain", count: 2 },
+				{ type: "insert", text: "XX" },
+				{ type: "retain", count: 3 },
+			]);
+			assert.deepEqual(result, { value: "heXXllo", selection: { start: 1, end: 5 } });
+		});
+
+		it("removes text, clamping a selection start inside the removal and pulling back the end after it", () => {
+			// "hello" with selection "llo" (2-5); remove "ell" (1-4).
+			// start sits inside the removal and clamps to its start; end is past it and pulls back.
+			const result = applyTextOps("hello", { start: 2, end: 5 }, [
+				{ type: "retain", count: 1 },
+				{ type: "remove", count: 3 },
+				{ type: "retain", count: 1 },
+			]);
+			assert.deepEqual(result, { value: "ho", selection: { start: 1, end: 2 } });
+		});
+
+		it("treats op counts as code points, not UTF-16 units, for astral characters", () => {
+			// "😀" is one code point but two UTF-16 units. Retain it, then insert after.
+			const value = "😀x";
+			// Cursor was at end (3 UTF-16 units); the insert is before it, so it shifts by 1.
+			const result = applyTextOps(value, { start: value.length, end: value.length }, [
+				{ type: "retain", count: 1 },
+				{ type: "insert", text: "Y" },
+				{ type: "retain", count: 1 },
+			]);
+			assert.deepEqual(result, { value: "😀Yx", selection: { start: 4, end: 4 } });
+		});
+
+		it("appends the tail of the old value not covered by trailing ops", () => {
+			const result = applyTextOps("hello", { start: 0, end: 0 }, [
+				{ type: "retain", count: 2 },
+			]);
+			assert.deepEqual(result, { value: "hello", selection: { start: 0, end: 0 } });
+		});
+
+		it("clamps a stale selection that lands outside the new value", () => {
+			// Selection points past the end of oldValue; after a shrinking edit it must not exceed value.length.
+			const result = applyTextOps("hello", { start: 10, end: 10 }, [
+				{ type: "remove", count: 3 },
+				{ type: "retain", count: 2 },
+			]);
+			assert.deepEqual(result, { value: "lo", selection: { start: 2, end: 2 } });
+		});
+
+		it("collapses a selection to a caret when its whole range is removed", () => {
+			// "abcdef" with selection "cd" (2-4); remove "bcde" (1-5), which fully contains the selection.
+			// Both offsets pull back to the removal start, leaving a collapsed caret.
+			const result = applyTextOps("abcdef", { start: 2, end: 4 }, [
+				{ type: "retain", count: 1 },
+				{ type: "remove", count: 4 },
+				{ type: "retain", count: 1 },
+			]);
+			assert.deepEqual(result, { value: "af", selection: { start: 1, end: 1 } });
+		});
+
+		it("leaves a selection unchanged when the edit is entirely after it", () => {
+			// "abcdef" with selection "a" (0-1); remove "de" (3-5), which is past the selection.
+			const result = applyTextOps("abcdef", { start: 0, end: 1 }, [
+				{ type: "retain", count: 3 },
+				{ type: "remove", count: 2 },
+				{ type: "retain", count: 1 },
+			]);
+			assert.deepEqual(result, { value: "abcf", selection: { start: 0, end: 1 } });
+		});
+
+		it("shifts a collapsed caret right when text is inserted before it", () => {
+			// "ab" with a collapsed caret at the end (2); insert "XYZ" at the caret.
+			const result = applyTextOps("ab", { start: 2, end: 2 }, [
+				{ type: "retain", count: 2 },
+				{ type: "insert", text: "XYZ" },
+			]);
+			assert.deepEqual(result, { value: "abXYZ", selection: { start: 5, end: 5 } });
+		});
+	});
+
+	describe("collapseSelectionOnReread", () => {
+		it("returns undefined when no selection is tracked", () => {
+			assert.equal(collapseSelectionOnReread(undefined, 5), undefined);
+		});
+
+		it("collapses a range to a caret at its start, rather than preserving the range", () => {
+			// The whole point of the policy: a range must NOT survive the reread as a range, even when
+			// both offsets still fit in the new text (which is where independent clamping went wrong).
+			assert.deepEqual(collapseSelectionOnReread({ start: 0, end: 5 }, 7), {
+				start: 0,
+				end: 0,
+			});
+		});
+
+		it("clamps the caret into the new (shorter) text", () => {
+			assert.deepEqual(collapseSelectionOnReread({ start: 10, end: 12 }, 3), {
+				start: 3,
+				end: 3,
+			});
+		});
+
+		it("keeps an already-collapsed caret in place when still in range", () => {
+			assert.deepEqual(collapseSelectionOnReread({ start: 2, end: 2 }, 5), {
+				start: 2,
+				end: 2,
+			});
+		});
+	});
+
+	describe("syncTextToTree", () => {
+		function createTextView(initial: string): TreeViewAlpha<typeof TextAsTree.Tree> {
+			const view = independentView(new TreeViewConfiguration({ schema: TextAsTree.Tree }));
+			view.initialize(TextAsTree.Tree.fromString(initial));
+			return view;
+		}
+
+		it("replaces the tree's content with the new text", () => {
+			const root = TextAsTree.Tree.fromString("hello");
+			syncTextToTree(root, "hello world");
+			assert.equal(root.fullString(), "hello world");
+		});
+
+		it("is atomically undoable when wrapped in a labeled transaction", () => {
+			const view = createTextView("hello");
+			const label = Symbol("editor");
+			const manager = createUndoRedo(view);
+
+			// The reference pattern used by callers: wrap the sync in a labeled transaction so the
+			// remove + insert pair is reverted together in a single undo step.
+			TreeAlpha.context(view.root).runTransaction(
+				() => syncTextToTree(view.root, "hello world"),
+				{
+					label,
+				},
+			);
+			assert.equal(view.root.fullString(), "hello world");
+
+			assert(manager.canUndo(label));
+			manager.undo(label);
+			assert.equal(view.root.fullString(), "hello");
+			manager.dispose();
+		});
+	});
+
 	describe("computeSync", () => {
 		/**
 		 * Calls computeSync, applies the returned ops to a copy of `existing`,
diff --git a/packages/framework/react/src/test/text/textEditor.test.tsx b/packages/framework/react/src/test/text/textEditor.test.tsx
index eb4df620c69b..53cf5ade0655 100644
--- a/packages/framework/react/src/test/text/textEditor.test.tsx
+++ b/packages/framework/react/src/test/text/textEditor.test.tsx
@@ -6,13 +6,20 @@
 import { strict as assert } from "node:assert";
 
 import { TextAsTree } from "@fluidframework/tree/internal";
-import { render } from "@testing-library/react";
+import { act, render } from "@testing-library/react";
 import globalJsdom from "global-jsdom";
 
 import { toPropTreeNode } from "../../propNode.js";
 import { PlainTextMainView } from "../../text/index.js";
 import type { UndoRedo } from "../../undoRedo.js";
 
+/** Read the current value of the editor's `<textarea>`. */
+function getTextareaValue(container: HTMLElement): string {
+	const textarea = container.querySelector("textarea");
+	assert.ok(textarea, "Textarea should be present");
+	return textarea.value;
+}
+
 describe("Plain TextArea view", () => {
 	let cleanup: () => void;
 	before(() => {
@@ -45,7 +52,7 @@ describe("Plain TextArea view", () => {
 					const content = <ViewComponent root={toPropTreeNode(text)} />;
 					const rendered = render(content, { reactStrictMode });
 
-					assert.match(rendered.baseElement.textContent ?? "", /Hello World/);
+					assert.equal(getTextareaValue(rendered.container), "Hello World");
 				});
 
 				it("invalidates view when tree is mutated", () => {
@@ -53,12 +60,10 @@ describe("Plain TextArea view", () => {
 					const content = <ViewComponent root={toPropTreeNode(text)} />;
 					const rendered = render(content, { reactStrictMode });
 
-					// Mutate the tree by inserting text
-					text.insertAt(5, " World");
+					// Mutate the tree; the controlled textarea updates from the hook's synced text.
+					act(() => text.insertAt(5, " World"));
 
-					// Rerender and verify the view updates
-					rendered.rerender(content);
-					assert.match(rendered.baseElement.textContent ?? "", /Hello World/);
+					assert.equal(getTextareaValue(rendered.container), "Hello World");
 				});
 
 				it("invalidates view when text is removed", () => {
@@ -67,13 +72,9 @@ describe("Plain TextArea view", () => {
 					const rendered = render(content, { reactStrictMode });
 
 					// Mutate the tree by removing " World" (indices 5 to 11)
-					text.removeRange(5, 11);
+					act(() => text.removeRange(5, 11));
 
-					// Rerender and verify the view updates
-					rendered.rerender(content);
-					assert.match(rendered.baseElement.textContent ?? "", /Hello/);
-					assert(rendered.baseElement.textContent !== null);
-					assert.doesNotMatch(rendered.baseElement.textContent, /World/);
+					assert.equal(getTextareaValue(rendered.container), "Hello");
 				});
 
 				it("invalidates view when text is cleared and replaced", () => {
@@ -81,18 +82,13 @@ describe("Plain TextArea view", () => {
 					const content = <ViewComponent root={toPropTreeNode(text)} />;
 					const rendered = render(content, { reactStrictMode });
 
-					// Clear all text
-					const length = [...text.characters()].length;
-					text.removeRange(0, length);
-
-					// Insert new text
-					text.insertAt(0, "Replaced");
+					act(() => {
+						const length = [...text.characters()].length;
+						text.removeRange(0, length);
+						text.insertAt(0, "Replaced");
+					});
 
-					// Rerender and verify the view updates
-					rendered.rerender(content);
-					assert.match(rendered.baseElement.textContent ?? "", /Replaced/);
-					assert(rendered.baseElement.textContent !== null);
-					assert.doesNotMatch(rendered.baseElement.textContent, /Original/);
+					assert.equal(getTextareaValue(rendered.container), "Replaced");
 				});
 
 				// Tests for surrogate pair characters (emojis use 2 UTF-16 code units)
@@ -104,7 +100,7 @@ describe("Plain TextArea view", () => {
 					const content = <ViewComponent root={toPropTreeNode(text)} />;
 					const rendered = render(content, { reactStrictMode });
 
-					assert.match(rendered.baseElement.textContent ?? "", /Hello 😀 World/);
+					assert.equal(getTextareaValue(rendered.container), "Hello 😀 World");
 				});
 
 				it("inserts text after surrogate pair characters", () => {
@@ -113,10 +109,9 @@ describe("Plain TextArea view", () => {
 					const rendered = render(content, { reactStrictMode });
 
 					// Insert after the emoji (index 2 in character count: A, 😀, B)
-					text.insertAt(2, "X");
+					act(() => text.insertAt(2, "X"));
 
-					rendered.rerender(content);
-					assert.match(rendered.baseElement.textContent ?? "", /A😀XB/);
+					assert.equal(getTextareaValue(rendered.container), "A😀XB");
 				});
 
 				it("removes surrogate pair characters", () => {
@@ -125,12 +120,9 @@ describe("Plain TextArea view", () => {
 					const rendered = render(content, { reactStrictMode });
 
 					// Remove the emoji (index 1, length 1 in character count)
-					text.removeRange(1, 2);
+					act(() => text.removeRange(1, 2));
 
-					rendered.rerender(content);
-					assert.match(rendered.baseElement.textContent ?? "", /AB/);
-					assert(rendered.baseElement.textContent !== null);
-					assert.doesNotMatch(rendered.baseElement.textContent, /😀/);
+					assert.equal(getTextareaValue(rendered.container), "AB");
 				});
 
 				it("handles multiple surrogate pair characters", () => {
@@ -139,10 +131,9 @@ describe("Plain TextArea view", () => {
 					const rendered = render(content, { reactStrictMode });
 
 					// Insert between emojis
-					text.insertAt(2, "!");
+					act(() => text.insertAt(2, "!"));
 
-					rendered.rerender(content);
-					assert.match(rendered.baseElement.textContent ?? "", /👋🌍!🎉/);
+					assert.equal(getTextareaValue(rendered.container), "👋🌍!🎉");
 				});
 			});
 		}
diff --git a/packages/framework/react/src/test/text/useTreeSynchronizedString.spec.ts b/packages/framework/react/src/test/text/useTreeSynchronizedString.spec.ts
new file mode 100644
index 000000000000..20a77d8fae2a
--- /dev/null
+++ b/packages/framework/react/src/test/text/useTreeSynchronizedString.spec.ts
@@ -0,0 +1,106 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { strict as assert } from "node:assert";
+
+import { TextAsTree } from "@fluidframework/tree/internal";
+import { act, renderHook } from "@testing-library/react";
+import globalJsdom from "global-jsdom";
+
+// Allow import of the file being tested; the hook is not re-exported from text/index.
+// eslint-disable-next-line import-x/no-internal-modules
+import { useTreeSynchronizedString } from "../../text/plain/useTreeSynchronizedString.js";
+
+describe("useTreeSynchronizedString", () => {
+	let cleanup: () => void;
+	before(() => {
+		cleanup = globalJsdom();
+	});
+	after(() => {
+		cleanup();
+	});
+
+	it("returns the tree's current text", () => {
+		const text = TextAsTree.Tree.fromString("Hello");
+		const { result } = renderHook(() => useTreeSynchronizedString(text));
+
+		assert.equal(result.current.text, "Hello");
+	});
+
+	it("syncs character changes into the returned text", () => {
+		const text = TextAsTree.Tree.fromString("Hello");
+		const { result } = renderHook(() => useTreeSynchronizedString(text));
+
+		act(() => text.insertAt(5, " World"));
+		assert.equal(result.current.text, "Hello World");
+
+		act(() => text.removeRange(0, 6));
+		assert.equal(result.current.text, "World");
+	});
+
+	it("re-seeds the text when a different tree is bound", () => {
+		const treeA = TextAsTree.Tree.fromString("A");
+		const treeB = TextAsTree.Tree.fromString("B");
+		const { result, rerender } = renderHook(({ tree }) => useTreeSynchronizedString(tree), {
+			initialProps: { tree: treeA },
+		});
+		assert.equal(result.current.text, "A");
+
+		rerender({ tree: treeB });
+		assert.equal(result.current.text, "B");
+	});
+
+	describe("selection", () => {
+		it("adjusts the tracked selection across edits", () => {
+			const text = TextAsTree.Tree.fromString("Hello");
+			// Caret after "Hello".
+			const { result } = renderHook(() =>
+				useTreeSynchronizedString(text, { start: 5, end: 5 }),
+			);
+
+			// Inserting before the caret shifts it right by the inserted length.
+			act(() => text.insertAt(0, "Oh "));
+			assert.equal(result.current.text, "Oh Hello");
+			assert.deepEqual(result.current.selection, { start: 8, end: 8 });
+		});
+
+		it("collapses the selection to a caret when its range is deleted", () => {
+			const text = TextAsTree.Tree.fromString("Hello");
+			// Select the whole word.
+			const { result } = renderHook(() =>
+				useTreeSynchronizedString(text, { start: 0, end: 5 }),
+			);
+
+			act(() => text.removeRange(0, 5));
+			assert.equal(result.current.text, "");
+			assert.deepEqual(result.current.selection, { start: 0, end: 0 });
+		});
+
+		it("pulls the selection back within bounds after a shrinking edit", () => {
+			const text = TextAsTree.Tree.fromString("Hello World");
+			// Select "World".
+			const { result } = renderHook(() =>
+				useTreeSynchronizedString(text, { start: 6, end: 11 }),
+			);
+
+			// Delete everything; the selection must not point past the new (empty) text.
+			act(() => text.removeRange(0, 11));
+			assert.equal(result.current.text, "");
+			assert.deepEqual(result.current.selection, { start: 0, end: 0 });
+		});
+
+		it("leaves the selection undefined when none was provided", () => {
+			const text = TextAsTree.Tree.fromString("Hello");
+			const { result } = renderHook(() => useTreeSynchronizedString(text));
+
+			assert.equal(result.current.selection, undefined);
+
+			// The text still syncs, but no selection is fabricated after an edit.
+			act(() => text.insertAt(5, " World"));
+			assert.equal(result.current.text, "Hello World");
+			assert.equal(result.current.selection, undefined);
+		});
+	});
+});
diff --git a/packages/framework/react/src/text/plain/index.ts b/packages/framework/react/src/text/plain/index.ts
index 91cf8ed288c0..a61052a49f92 100644
--- a/packages/framework/react/src/text/plain/index.ts
+++ b/packages/framework/react/src/text/plain/index.ts
@@ -7,4 +7,11 @@ export {
 	MainView as PlainTextMainView,
 	type MainViewProps as PlainTextMainViewProps,
 } from "./plainTextView.js";
-export { syncTextToTree } from "./plainUtils.js";
+export {
+	syncTextToTree,
+	type TextSelection,
+} from "./plainUtils.js";
+export {
+	useTreeSynchronizedString,
+	type SynchronizedString,
+} from "./useTreeSynchronizedString.js";
diff --git a/packages/framework/react/src/text/plain/plainTextView.tsx b/packages/framework/react/src/text/plain/plainTextView.tsx
index 3d52fdb29364..24cfad0f219e 100644
--- a/packages/framework/react/src/text/plain/plainTextView.tsx
+++ b/packages/framework/react/src/text/plain/plainTextView.tsx
@@ -3,17 +3,14 @@
  * Licensed under the MIT License.
  */
 
-import {
-	type TextAsTree,
-	TreeAlpha,
-	utf16LengthForCodePoints,
-} from "@fluidframework/tree/internal";
-import { type ChangeEvent, type FC, useCallback, useEffect, useReducer, useRef } from "react";
+import { TreeAlpha, type TextAsTree } from "@fluidframework/tree/internal";
+import { type ChangeEvent, type FC, useCallback, useLayoutEffect, useRef } from "react";
 
 import { unwrapPropTreeNode, type PropTreeNode } from "../../propNode.js";
 import type { TextEditorProps } from "../textEditorProps.js";
 
 import { syncTextToTree } from "./plainUtils.js";
+import { useTreeSynchronizedString } from "./useTreeSynchronizedString.js";
 
 /**
  * Props for the MainView component.
@@ -50,126 +47,41 @@ export const MainView: FC<MainViewProps> = ({ root, undoRedo, editLabel }) => {
  * Uses TextAsTree for collaborative plain text storage.
  *
  * @remarks
- * Subscribes to incremental character-level deltas from the tree via
- * {@link @fluidframework/tree#TextAsTree.Members.onCharactersChanged} to apply
- * remote changes to the textarea without a full re-read of the text.
+ * A controlled textarea driven by {@link useTreeSynchronizedString} (tree → string); local edits
+ * are written back to the tree via {@link syncTextToTree}, wrapped in a transaction so each edit is
+ * atomically undoable/redoable (string → tree). Doubles as a reference
+ * for binding a text input to a {@link @fluidframework/tree#TextAsTree.Tree}.
  */
 const PlainTextEditorView: FC<MainViewPropsInner> = ({ root, undoRedo, editLabel }) => {
-	// Reference to the textarea element
-	const textareaRef = useRef<HTMLTextAreaElement>(null);
-	// Guards against update loops between textarea and the tree
-	const isUpdatingRef = useRef<boolean>(false);
-	// Force re-render when undo/redo state changes so button disabled state stays current.
-	const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
-
-	// Effective label: explicit prop or the root node itself as the default.
 	const effectiveLabel = editLabel ?? root;
-
-	// Subscribe to incremental tree changes and apply them to the textarea.
-	useEffect(() => {
-		return root.onCharactersChanged((ops) => {
-			if (isUpdatingRef.current || !textareaRef.current) {
-				return;
-			}
-
-			isUpdatingRef.current = true;
-			try {
-				const textarea = textareaRef.current;
-				let newValue: string;
-				let newCursorStart: number | undefined;
-				let newCursorEnd: number | undefined;
-				if (ops === undefined) {
-					// Delta unavailable — fall back to full re-read.
-					newValue = root.fullString();
-				} else {
-					// Apply ops incrementally to avoid a full O(N) re-read.
-					const selectionStart = textarea.selectionStart;
-					const selectionEnd = textarea.selectionEnd;
-
-					// readPos is a UTF-16 code-unit index into oldValue.
-					// op.count is in Unicode code points; we convert via utf16LengthForCodePoints.
-					let readPos = 0;
-					const oldValue = textarea.value;
-					newValue = "";
-					newCursorStart = selectionStart;
-					newCursorEnd = selectionEnd;
-
-					for (const op of ops) {
-						if (op.type === "retain") {
-							// Convert atom count to UTF-16 units by scanning the actual characters.
-							const utf16Count = utf16LengthForCodePoints(oldValue, readPos, op.count);
-							newValue += oldValue.slice(readPos, readPos + utf16Count);
-							readPos += utf16Count;
-						} else if (op.type === "insert") {
-							// op.text is a JS string; use its UTF-16 length for cursor adjustment.
-							if (readPos <= selectionStart) {
-								newCursorStart += op.text.length;
-							}
-							if (readPos <= selectionEnd) {
-								newCursorEnd += op.text.length;
-							}
-							newValue += op.text;
-						} else {
-							// remove
-							// Convert atom count to UTF-16 units before adjusting cursors.
-							const utf16Count = utf16LengthForCodePoints(oldValue, readPos, op.count);
-							const removeEnd = readPos + utf16Count;
-							if (removeEnd <= selectionStart) {
-								newCursorStart -= utf16Count;
-							} else if (readPos < selectionStart) {
-								newCursorStart -= selectionStart - readPos;
-							}
-							if (removeEnd <= selectionEnd) {
-								newCursorEnd -= utf16Count;
-							} else if (readPos < selectionEnd) {
-								newCursorEnd -= selectionEnd - readPos;
-							}
-							readPos += utf16Count;
-						}
-					}
-
-					// Append any tail not covered by ops (e.g. trailing retained content).
-					newValue += oldValue.slice(readPos);
-				}
-				textarea.value = newValue;
-				// Keep the DOM's child text node in sync with `.value` so queries like
-				// `element.textContent` (used in tests / by external observers) reflect current
-				// content rather than the initial value baked in from `defaultValue`.
-				textarea.textContent = newValue;
-				if (newCursorStart !== undefined && newCursorEnd !== undefined) {
-					const clampedStart = Math.min(newCursorStart, newValue.length);
-					const clampedEnd = Math.min(newCursorEnd, newValue.length);
-					textarea.setSelectionRange(clampedStart, clampedEnd);
-				}
-			} finally {
-				isUpdatingRef.current = false;
-			}
-			// Refresh undo/redo button state — undo/redo availability changes alongside tree mutations.
-			if (undoRedo) forceUpdate();
-		});
-	}, [root, undoRedo]);
-
-	// Handle textarea changes - sync textarea → tree
-	const handleChange = useCallback(
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	// Distinguishes the local user's own edit (browser keeps the caret) from a remote one.
+	const isLocalEditRef = useRef<boolean>(false);
+
+	// Tree → string (one-way). The component supplies the other direction below.
+	const { text, selection } = useTreeSynchronizedString(root);
+
+	// A controlled value resets the caret on every change. For the user's own edit the browser
+	// already placed the caret correctly, so only restore the tracked selection for remote edits.
+	useLayoutEffect(() => {
+		if (isLocalEditRef.current) {
+			isLocalEditRef.current = false;
+			return;
+		}
+		const textarea = textareaRef.current;
+		if (textarea !== null && selection !== undefined) {
+			textarea.setSelectionRange(selection.start, selection.end);
+		}
+	}, [text, selection]);
+
+	// String → tree: write the user's edit back into the tree, wrapped in a transaction tagged with
+	// `effectiveLabel` so the remove + insert pair is applied atomically and undone/redone as a unit.
+	const onChange = useCallback(
 		(event: ChangeEvent<HTMLTextAreaElement>) => {
-			if (isUpdatingRef.current) {
-				return;
-			}
-
-			isUpdatingRef.current = true;
-			try {
-				const newText = event.target.value;
-				const context = TreeAlpha.context(root);
-				if (context.isBranch()) {
-					context.runTransaction(() => syncTextToTree(root, newText), {
-						label: effectiveLabel,
-					});
-				} else {
-					syncTextToTree(root, newText);
-				}
-			} finally {
-				isUpdatingRef.current = false;
-			}
+			isLocalEditRef.current = true;
+			TreeAlpha.context(root).runTransaction(() => syncTextToTree(root, event.target.value), {
+				label: effectiveLabel,
+			});
 		},
 		[root, effectiveLabel],
 	);
@@ -227,8 +139,8 @@ const PlainTextEditorView: FC<MainViewPropsInner> = ({ root, undoRedo, editLabel
 			)}
 			<textarea
 				ref={textareaRef}
-				defaultValue={root.fullString()}
-				onChange={handleChange}
+				value={text}
+				onChange={onChange}
 				placeholder="Start typing..."
 				style={{
 					flex: 1,
diff --git a/packages/framework/react/src/text/plain/plainUtils.ts b/packages/framework/react/src/text/plain/plainUtils.ts
index 4b3aab48ca1e..1f1ebced61fb 100644
--- a/packages/framework/react/src/text/plain/plainUtils.ts
+++ b/packages/framework/react/src/text/plain/plainUtils.ts
@@ -3,7 +3,145 @@
  * Licensed under the MIT License.
  */
 
-import type { TextAsTree } from "@fluidframework/tree/internal";
+import { type TextAsTree, utf16LengthForCodePoints } from "@fluidframework/tree/internal";
+
+import { clamp } from "../../utilities.js";
+
+/**
+ * A text selection or cursor range expressed as UTF-16 code-unit offsets.
+ * @remarks
+ * These match the `selectionStart` / `selectionEnd` properties of an HTML `<input>` / `<textarea>`,
+ * and the offsets used to index into a JavaScript string. A collapsed cursor has `start === end`.
+ * @internal
+ */
+export interface TextSelection {
+	/** UTF-16 offset of the start of the selection. */
+	readonly start: number;
+	/** UTF-16 offset of the end of the selection. */
+	readonly end: number;
+}
+
+/**
+ * The result of applying a character-level delta to an existing text value via {@link applyTextOps}.
+ * @internal
+ */
+export interface ApplyTextOpsResult {
+	/** The updated text value after applying the ops. */
+	readonly value: string;
+	/**
+	 * The input selection, adjusted to follow the same logical position across the edit.
+	 * @remarks
+	 * Always a valid range within {@link ApplyTextOpsResult.value} (each offset is clamped to
+	 * `[0, value.length]`), so it can be written straight back to an element without further bounds checks.
+	 */
+	readonly selection: TextSelection;
+}
+
+/**
+ * Apply a character-level delta to an existing text value, producing the new value and a
+ * selection range adjusted to track the same logical position across the edit.
+ * @remarks
+ * `ops` are the deltas delivered by {@link @fluidframework/tree#TextAsTree.Members.onCharactersChanged}.
+ * Applying them incrementally avoids a full O(N) re-read of the text on every change.
+ *
+ * This function is intentionally DOM-free so consumers maintaining their own UI (a custom React
+ * component, a non-`textarea` element, or a non-React renderer) can reuse it: read the current value
+ * and selection from your view, call this, then write the result back.
+ *
+ * `onCharactersChanged` delivers `undefined` (rather than an op list) when an incremental delta is
+ * unavailable; in that case skip this function and re-read the whole text via `root.fullString()`.
+ *
+ * Writing the result back must not re-enter the tree — see {@link syncTextToTree} for the re-entrancy pattern.
+ * @internal
+ */
+export function applyTextOps(
+	oldValue: string,
+	selection: TextSelection,
+	ops: readonly TextAsTree.TextOp[],
+): ApplyTextOpsResult {
+	const { start: selectionStart, end: selectionEnd } = selection;
+
+	// readPos is a UTF-16 code-unit index into oldValue.
+	let readPos = 0;
+	let value = "";
+	let newCursorStart = selectionStart;
+	let newCursorEnd = selectionEnd;
+
+	for (const op of ops) {
+		if (op.type === "retain") {
+			// Convert the code-point count to UTF-16 units by scanning the actual characters.
+			const utf16Count = utf16LengthForCodePoints(oldValue, readPos, op.count);
+			value += oldValue.slice(readPos, readPos + utf16Count);
+			readPos += utf16Count;
+		} else if (op.type === "insert") {
+			// op.text is a JS string; use its UTF-16 length for cursor adjustment.
+			if (readPos <= selectionStart) {
+				newCursorStart += op.text.length;
+			}
+			if (readPos <= selectionEnd) {
+				newCursorEnd += op.text.length;
+			}
+			value += op.text;
+		} else {
+			// remove
+			// Convert the code-point count to UTF-16 units before adjusting cursors.
+			const utf16Count = utf16LengthForCodePoints(oldValue, readPos, op.count);
+			const removeEnd = readPos + utf16Count;
+			if (removeEnd <= selectionStart) {
+				newCursorStart -= utf16Count;
+			} else if (readPos < selectionStart) {
+				newCursorStart -= selectionStart - readPos;
+			}
+			if (removeEnd <= selectionEnd) {
+				newCursorEnd -= utf16Count;
+			} else if (readPos < selectionEnd) {
+				newCursorEnd -= selectionEnd - readPos;
+			}
+			readPos += utf16Count;
+		}
+	}
+
+	// Append any tail not covered by ops (e.g. trailing retained content).
+	value += oldValue.slice(readPos);
+
+	// Clamp to a valid range within `value` so the result can be written back without further checks.
+	// A stale input selection (e.g. beyond `oldValue`) can otherwise land outside the new value.
+	return {
+		value,
+		selection: {
+			start: clamp(newCursorStart, 0, value.length),
+			end: clamp(newCursorEnd, 0, value.length),
+		},
+	};
+}
+
+/**
+ * Collapse a tracked selection to a single caret, for use when a text change arrives without an
+ * incremental delta and the whole string must be re-read.
+ * @remarks
+ * When no delta is available (see {@link @fluidframework/tree#TextAsTree.Members.onCharactersChanged}),
+ * there is no reliable way to map a selection *range* across the edit: preserving `start`/`end`
+ * independently can leave a range spanning characters unrelated to the original selection (e.g. when a
+ * batch deletes the selected text and inserts new text of similar length). To avoid presenting a
+ * misleading highlight, the range is collapsed to a caret at the (clamped) previous `start` offset,
+ * which keeps the caret near its prior position in the common benign case while never selecting
+ * unrelated characters.
+ *
+ * Returns `undefined` when `selection` is `undefined`, so an untracked selection stays untracked.
+ * @param selection - The selection to collapse, or `undefined` if none is tracked.
+ * @param length - The length of the re-read text; the caret is clamped to `[0, length]`.
+ * @internal
+ */
+export function collapseSelectionOnReread(
+	selection: TextSelection | undefined,
+	length: number,
+): TextSelection | undefined {
+	if (selection === undefined) {
+		return undefined;
+	}
+	const caret = clamp(selection.start, 0, length);
+	return { start: caret, end: caret };
+}
 
 /**
  * Sync `newText` into the provided `root` tree by applying the minimal remove + insert pair
@@ -11,6 +149,34 @@ import type { TextAsTree } from "@fluidframework/tree/internal";
  * @remarks
  * The diff is computed by finding the longest shared prefix/suffix between current and new content
  * and replacing only the middle span.
+ *
+ * To make the edit atomically undoable/redoable, wrap this call in a transaction, e.g.
+ * `TreeAlpha.context(root).runTransaction(() => syncTextToTree(root, newText), { label })`. The
+ * `label` correlates the edit for undo/redo grouping where the context supports it (see
+ * {@link @fluidframework/tree#TreeContextAlpha.runTransaction}).
+ *
+ * Mutating the tree synchronously fires
+ * {@link @fluidframework/tree#TextAsTree.Members.onCharactersChanged}. If you also subscribe to that
+ * event to apply remote edits to your view (e.g. via `applyTextOps`), set a re-entrancy flag
+ * before calling this and ignore the event while it is set — otherwise the edit you just made is
+ * echoed straight back onto your view. For example:
+ *
+ * ```typescript
+ * let updating = false;
+ * root.onCharactersChanged((ops) => {
+ *   if (updating) return; // ignore the echo of our own local edit
+ *   // ...apply ops to your view via applyTextOps...
+ * });
+ *
+ * function onUserInput(newText: string): void {
+ *   updating = true;
+ *   try {
+ *     syncTextToTree(root, newText);
+ *   } finally {
+ *     updating = false;
+ *   }
+ * }
+ * ```
  * @internal
  */
 export function syncTextToTree(root: TextAsTree.Tree, newText: string): void {
diff --git a/packages/framework/react/src/text/plain/useTreeSynchronizedString.ts b/packages/framework/react/src/text/plain/useTreeSynchronizedString.ts
new file mode 100644
index 000000000000..28464b99ea07
--- /dev/null
+++ b/packages/framework/react/src/text/plain/useTreeSynchronizedString.ts
@@ -0,0 +1,116 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import type { TextAsTree } from "@fluidframework/tree/internal";
+import { useEffect, useRef, useState } from "react";
+
+import { applyTextOps, collapseSelectionOnReread, type TextSelection } from "./plainUtils.js";
+
+/**
+ * The value returned by {@link useTreeSynchronizedString}.
+ * @internal
+ */
+export interface SynchronizedString {
+	/** The tree's current text. */
+	readonly text: string;
+	/**
+	 * A selection range tracked across edits, or `undefined` when no selection is being tracked.
+	 * @remarks
+	 * Seeded from the `initialSelection` passed to {@link useTreeSynchronizedString} and adjusted by
+	 * {@link applyTextOps} so it follows the same logical position as the text changes.
+	 *
+	 * When an incremental delta is unavailable and the hook must re-read the whole string, the range
+	 * cannot be faithfully mapped across the edit, so it is collapsed to a single caret at the
+	 * (clamped) previous start offset.
+	 *
+	 * This is not a live caret: the hook does not observe the user's actual cursor, so a consumer that
+	 * needs the real caret position must read it from the rendered element itself.
+	 */
+	readonly selection: TextSelection | undefined;
+}
+
+/**
+ * React hook that provides a one-way sync from a {@link @fluidframework/tree#TextAsTree.Tree} to a
+ * string: it returns the tree's current text (and a tracked selection), recomputed whenever the
+ * tree's characters change.
+ * @remarks
+ * This makes no assumption about how the string is rendered (`<input>`, `<textarea>`, contenteditable,
+ * canvas, …) and intentionally does **not** handle writing back to the tree.
+ *
+ * The consumer supplies the other direction (string → tree) themselves. Different text APIs report
+ * their edits in different formats, so there is no one-size-fits-all mapping; prefer translating the
+ * API's own change delta into an incremental tree edit whenever it exposes one. For simple APIs like
+ * `<textarea>`, whose change events only surface the fully-updated string, {@link syncTextToTree}
+ * provides a naive diff-and-apply that is sufficient (wrap it in a transaction to make the edit
+ * atomically undoable):
+ *
+ * ```tsx
+ * const { text } = useTreeSynchronizedString(tree);
+ * return (
+ *   <textarea
+ *     value={text}
+ *     onChange={(e) =>
+ *       TreeAlpha.context(tree).runTransaction(() => syncTextToTree(tree, e.target.value))
+ *     }
+ *   />
+ * );
+ * ```
+ * @internal
+ */
+export function useTreeSynchronizedString(
+	tree: TextAsTree.Tree,
+	initialSelection?: TextSelection,
+): SynchronizedString {
+	const [text, setText] = useState<string>(() => tree.fullString());
+	const [selection, setSelection] = useState<TextSelection | undefined>(initialSelection);
+
+	// Mirror the latest text/selection in refs so the change listener reads current values without
+	// having to re-subscribe (which would re-run the effect) on every update.
+	const textRef = useRef(text);
+	textRef.current = text;
+	const selectionRef = useRef(selection);
+	selectionRef.current = selection;
+
+	useEffect(() => {
+		const full = tree.fullString();
+		textRef.current = full;
+		setText(full);
+
+		return tree.onCharactersChanged((ops) => {
+			if (ops === undefined) {
+				// No incremental delta is available for this change, so re-read the whole string.
+				// This happens when the character field's marks couldn't be composed into a single
+				// delta — e.g. the field was modified across multiple batches within one flush (such
+				// as an interleaved schema change) — or when the tree is out of sync with the delta.
+				const reread = tree.fullString();
+				textRef.current = reread;
+				setText(reread);
+				// Without a delta we can't know how the text mutated, so we can't faithfully move a
+				// selection range across the edit. Collapse it to a caret rather than leave a range
+				// spanning what may now be unrelated characters — see collapseSelectionOnReread. A
+				// consumer that needs an accurate caret should read it from the rendered element.
+				if (selectionRef.current !== undefined) {
+					const collapsed = collapseSelectionOnReread(selectionRef.current, reread.length);
+					selectionRef.current = collapsed;
+					setSelection(collapsed);
+				}
+				return;
+			}
+
+			// Only track a selection if the consumer supplied one; otherwise leave it undefined and
+			// discard the range returned by applyTextOps.
+			const oldSelection = selectionRef.current;
+			const result = applyTextOps(textRef.current, oldSelection ?? { start: 0, end: 0 }, ops);
+			textRef.current = result.value;
+			setText(result.value);
+			if (oldSelection !== undefined) {
+				selectionRef.current = result.selection;
+				setSelection(result.selection);
+			}
+		});
+	}, [tree]);
+
+	return { text, selection };
+}
diff --git a/packages/framework/react/src/utilities.ts b/packages/framework/react/src/utilities.ts
index 346a15c2d71b..e393fbf7224d 100644
--- a/packages/framework/react/src/utilities.ts
+++ b/packages/framework/react/src/utilities.ts
@@ -40,3 +40,11 @@ export function areSetsDisjoint(a: ReadonlySet<unknown>, b: ReadonlySet<unknown>
 	}
 	return true;
 }
+
+/**
+ * Clamps `value` to the inclusive range [`min`, `max`].
+ * @remarks Assumes `min <= max`.
+ */
+export function clamp(value: number, min: number, max: number): number {
+	return Math.min(Math.max(value, min), max);
+}