diff --git a/packages/studio-web/src/app/shared/shared.module.ts b/packages/studio-web/src/app/shared/shared.module.ts
index ff68a7370..6740d9d43 100644
--- a/packages/studio-web/src/app/shared/shared.module.ts
+++ b/packages/studio-web/src/app/shared/shared.module.ts
@@ -1,13 +1,23 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { DownloadComponent } from "./download/download.component";
+import { TextareaOverlayComponent } from "./textarea-overlay/textarea-overlay.component";
+import { TextareaGutterComponent } from "./textarea-overlay/textarea-gutter.component";
 import { BrowserModule } from "@angular/platform-browser";
 import { MaterialModule } from "../material.module";
 import { FormsModule } from "@angular/forms";
 
 @NgModule({
-  declarations: [DownloadComponent],
+  declarations: [
+    DownloadComponent,
+    TextareaOverlayComponent,
+    TextareaGutterComponent,
+  ],
   imports: [BrowserModule, MaterialModule, FormsModule, CommonModule],
-  exports: [DownloadComponent],
+  exports: [
+    DownloadComponent,
+    TextareaOverlayComponent,
+    TextareaGutterComponent,
+  ],
 })
 export class SharedModule {}
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/blank-line-runs.spec.ts b/packages/studio-web/src/app/shared/textarea-overlay/blank-line-runs.spec.ts
new file mode 100644
index 000000000..1b7548298
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/blank-line-runs.spec.ts
@@ -0,0 +1,55 @@
+import { findBlankLineRuns } from "./blank-line-runs";
+
+describe("findBlankLineRuns", () => {
+  it("returns nothing for text with no blank lines", () => {
+    expect(findBlankLineRuns("hello\nworld")).toEqual([]);
+  });
+
+  it("classifies a single blank line as a paragraph break", () => {
+    const runs = findBlankLineRuns("line one\n\nline two");
+    expect(runs).toEqual([
+      { startLine: 1, endLine: 1, length: 1, kind: "paragraph" },
+    ]);
+  });
+
+  it("classifies two consecutive blank lines as a page break", () => {
+    const runs = findBlankLineRuns("line one\n\n\nline two");
+    expect(runs).toEqual([
+      { startLine: 1, endLine: 2, length: 2, kind: "page" },
+    ]);
+  });
+
+  it("classifies more than two consecutive blank lines as a page break", () => {
+    const runs = findBlankLineRuns("line one\n\n\n\nline two");
+    expect(runs).toEqual([
+      { startLine: 1, endLine: 3, length: 3, kind: "page" },
+    ]);
+  });
+
+  it("finds multiple runs", () => {
+    const runs = findBlankLineRuns("a\n\nb\n\n\nc");
+    expect(runs).toEqual([
+      { startLine: 1, endLine: 1, length: 1, kind: "paragraph" },
+      { startLine: 3, endLine: 4, length: 2, kind: "page" },
+    ]);
+  });
+
+  it("handles blank lines at the start and end of the text", () => {
+    const runs = findBlankLineRuns("\n\na\nb\n\n");
+    expect(runs).toEqual([
+      { startLine: 0, endLine: 1, length: 2, kind: "page" },
+      { startLine: 4, endLine: 5, length: 2, kind: "page" },
+    ]);
+  });
+
+  it("returns nothing for empty text", () => {
+    expect(findBlankLineRuns("")).toEqual([]);
+  });
+
+  it("treats a whitespace-only line as non-blank", () => {
+    // A line with a stray space is not a true blank line, so it should
+    // not be counted as part of a paragraph/page break run.
+    const runs = findBlankLineRuns("a\n \nb");
+    expect(runs).toEqual([]);
+  });
+});
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/blank-line-runs.ts b/packages/studio-web/src/app/shared/textarea-overlay/blank-line-runs.ts
new file mode 100644
index 000000000..2c0f7683f
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/blank-line-runs.ts
@@ -0,0 +1,56 @@
+/**
+ * A run's `kind` follows the ReadAlong plain-text convention: a single
+ * blank line separates paragraphs, two or more consecutive blank lines
+ * separate pages.
+ */
+export type BlankLineRunKind = "paragraph" | "page";
+
+export interface BlankLineRun {
+  /** 0-based index (into `text.split("\n")`) of the first blank line. */
+  startLine: number;
+  /** 0-based index of the last blank line in the run (inclusive). */
+  endLine: number;
+  /** Number of consecutive blank lines in the run. */
+  length: number;
+  kind: BlankLineRunKind;
+}
+
+/**
+ * Finds every run of one or more consecutive blank lines in `text`.
+ *
+ * Shared between the overlay's background tint and, later, the gutter
+ * markers, so it deliberately returns raw line-index data rather than
+ * anything rendering-specific.
+ */
+export function findBlankLineRuns(text: string): BlankLineRun[] {
+  if (text === "") {
+    // An empty document has no lines to separate, not one blank line.
+    return [];
+  }
+
+  const lines = text.split("\n");
+  const runs: BlankLineRun[] = [];
+  let runStart: number | null = null;
+
+  for (let i = 0; i <= lines.length; i++) {
+    const isBlankLine = i < lines.length && lines[i].length === 0;
+    if (isBlankLine) {
+      if (runStart === null) {
+        runStart = i;
+      }
+      continue;
+    }
+    if (runStart !== null) {
+      const length = i - runStart;
+      runs.push({
+        startLine: runStart,
+        endLine: i - 1,
+        length,
+        kind: length >= 2 ? "page" : "paragraph",
+      });
+      runStart = null;
+    }
+  }
+
+  return runs;
+}
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/document-words.spec.ts b/packages/studio-web/src/app/shared/textarea-overlay/document-words.spec.ts
new file mode 100644
index 000000000..4618df482
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/document-words.spec.ts
@@ -0,0 +1,125 @@
+import {
+  diffWordSequences,
+  remapWordIndex,
+  walkDocumentWords,
+} from "./document-words";
+
+describe("walkDocumentWords", () => {
+  it("returns nothing for empty text", () => {
+    expect(walkDocumentWords("")).toEqual([]);
+  });
+
+  it("splits a single line on whitespace, tracking offsets", () => {
+    const text = "hej verden 2";
+    expect(walkDocumentWords(text)).toEqual([
+      { text: "hej", start: 0, end: 3 },
+      { text: "verden", start: 4, end: 10 },
+      { text: "2", start: 11, end: 12 },
+    ]);
+  });
+
+  it("collapses runs of whitespace between words", () => {
+    const text = "one   two\tthree";
+    expect(walkDocumentWords(text)).toEqual([
+      { text: "one", start: 0, end: 3 },
+      { text: "two", start: 6, end: 9 },
+      { text: "three", start: 10, end: 15 },
+    ]);
+  });
+
+  it("tracks offsets correctly across multiple lines", () => {
+    const text = "line one\nline two";
+    expect(walkDocumentWords(text)).toEqual([
+      { text: "line", start: 0, end: 4 },
+      { text: "one", start: 5, end: 8 },
+      { text: "line", start: 9, end: 13 },
+      { text: "two", start: 14, end: 17 },
+    ]);
+    expect(text.slice(9, 13)).toBe("line");
+    expect(text.slice(14, 17)).toBe("two");
+  });
+
+  it("contributes no words for blank paragraph/page break lines", () => {
+    const text = "para one\n\npara two\n\n\npage two";
+    const words = walkDocumentWords(text);
+    expect(words.map((w) => w.text)).toEqual([
+      "para",
+      "one",
+      "para",
+      "two",
+      "page",
+      "two",
+    ]);
+    for (const word of words) {
+      expect(text.slice(word.start, word.end)).toBe(word.text);
+    }
+  });
+
+  it("ignores leading/trailing whitespace on a line", () => {
+    const text = "  leading and trailing  ";
+    const words = walkDocumentWords(text);
+    expect(words[0]).toEqual({ text: "leading", start: 2, end: 9 });
+    const last = words[words.length - 1];
+    expect(last).toEqual({ text: "trailing", start: 14, end: 22 });
+  });
+});
+
+function words(text: string) {
+  return walkDocumentWords(text);
+}
+
+describe("diffWordSequences / remapWordIndex", () => {
+  it("maps every index unchanged when nothing changed", () => {
+    const oldWords = words("hello 1 2 3");
+    const newWords = words("hello 1 2 3");
+    const diff = diffWordSequences(oldWords, newWords);
+    for (let i = 0; i < oldWords.length; i++) {
+      expect(remapWordIndex(diff, i)).toBe(i);
+    }
+  });
+
+  it("remaps a word after a deletion earlier in the sequence, rather than dropping it (regression: deleting one flagged word cleared unrelated marks after it)", () => {
+    // "hello 1 2 3" -> delete "2 " -> "hello 1 3"
+    const oldWords = words("hello 1 2 3");
+    const newWords = words("hello 1 3");
+    const diff = diffWordSequences(oldWords, newWords);
+
+    // "1" (index 1) is untouched and before the edit: keeps its index.
+    expect(remapWordIndex(diff, 1)).toBe(1);
+    // "2" (index 2) was the word actually deleted: no longer present.
+    expect(remapWordIndex(diff, 2)).toBeNull();
+    // "3" (index 3) shifted left to index 2, but is still "3" — must not
+    // be dropped just because a word before it was removed.
+    const newIndex = remapWordIndex(diff, 3);
+    expect(newIndex).toBe(2);
+    expect(newWords[newIndex!].text).toBe("3");
+  });
+
+  it("remaps indices after an insertion earlier in the sequence", () => {
+    const oldWords = words("hello 1 2 3");
+    const newWords = words("hello there 1 2 3");
+    const diff = diffWordSequences(oldWords, newWords);
+
+    expect(remapWordIndex(diff, 1)).toBe(2); // "1" shifted right by 1
+    expect(remapWordIndex(diff, 3)).toBe(4); // "3" shifted right by 1
+  });
+
+  it("returns null for an index whose word was actually edited", () => {
+    const oldWords = words("hello 1 2 3");
+    const newWords = words("hello 1 two 3");
+    const diff = diffWordSequences(oldWords, newWords);
+
+    expect(remapWordIndex(diff, 1)).toBe(1); // "1" unaffected
+    expect(remapWordIndex(diff, 2)).toBeNull(); // "2" -> "two": edited
+    expect(remapWordIndex(diff, 3)).toBe(3); // "3" unaffected
+  });
+
+  it("returns null for every index when the whole sequence changed", () => {
+    const oldWords = words("hello 1 2 3");
+    const newWords = words("completely different text");
+    const diff = diffWordSequences(oldWords, newWords);
+    for (let i = 0; i < oldWords.length; i++) {
+      expect(remapWordIndex(diff, i)).toBeNull();
+    }
+  });
+});
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/document-words.ts b/packages/studio-web/src/app/shared/textarea-overlay/document-words.ts
new file mode 100644
index 000000000..356019d02
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/document-words.ts
@@ -0,0 +1,113 @@
+/** A character range in the raw document string: [start, end). */
+export interface TextRange {
+  start: number;
+  end: number;
+}
+
+export interface DocumentWord extends TextRange {
+  /** The word's literal text (no surrounding whitespace). */
+  text: string;
+}
+
+/**
+ * Walks `text` in the same page → paragraph → line → word order used to
+ * build an alignment request, returning each word with its character
+ * offsets in the raw string.
+ *
+ * Blank separator lines (paragraph/page breaks) contribute no words, since
+ * they're pure whitespace by definition — no separate pass over
+ * findBlankLineRuns is needed to skip them.
+ *
+ * Shared by the g2p error underlining (matching a submitted word against
+ * the corresponding `<w>` in the API's error response) and, later, any
+ * other feature that needs to map "the Nth word of the document" to "its
+ * range in the raw text."
+ */
+export function walkDocumentWords(text: string): DocumentWord[] {
+  const words: DocumentWord[] = [];
+  const lines = text.split("\n");
+
+  let lineStart = 0;
+  for (const line of lines) {
+    const wordPattern = /\S+/g;
+    let match: RegExpExecArray | null;
+    while ((match = wordPattern.exec(line)) !== null) {
+      words.push({
+        text: match[0],
+        start: lineStart + match.index,
+        end: lineStart + match.index + match[0].length,
+      });
+    }
+    lineStart += line.length + 1; // +1 for the "\n" this line was split on
+  }
+
+  return words;
+}
+
+/**
+ * Describes where two word sequences (e.g. the document's words before and
+ * after an edit) stop agreeing at the start, and resume agreeing at the
+ * end — a cheap (O(n)) alternative to a full sequence alignment, good
+ * enough to remap word indices across a *local* edit: everything before
+ * `prefixLength` and everything from `oldSuffixStart`/`newSuffixStart`
+ * onward is unchanged; everything between is the edited region.
+ */
+export interface WordSequenceDiff {
+  prefixLength: number;
+  oldSuffixStart: number;
+  newSuffixStart: number;
+}
+
+export function diffWordSequences(
+  oldWords: readonly DocumentWord[],
+  newWords: readonly DocumentWord[],
+): WordSequenceDiff {
+  const maxPrefix = Math.min(oldWords.length, newWords.length);
+  let prefixLength = 0;
+  while (
+    prefixLength < maxPrefix &&
+    oldWords[prefixLength].text === newWords[prefixLength].text
+  ) {
+    prefixLength++;
+  }
+
+  const maxSuffix = Math.min(
+    oldWords.length - prefixLength,
+    newWords.length - prefixLength,
+  );
+  let suffixLength = 0;
+  while (
+    suffixLength < maxSuffix &&
+    oldWords[oldWords.length - 1 - suffixLength].text ===
+      newWords[newWords.length - 1 - suffixLength].text
+  ) {
+    suffixLength++;
+  }
+
+  return {
+    prefixLength,
+    oldSuffixStart: oldWords.length - suffixLength,
+    newSuffixStart: newWords.length - suffixLength,
+  };
+}
+
+/**
+ * Maps `oldIndex` (an index into the word list `diff` was computed from)
+ * onto the corresponding index in the newer word list, using the
+ * unchanged prefix/suffix regions `diff` identified. Returns `null` if
+ * `oldIndex` falls in the edited middle region, where it has no reliable
+ * correspondent — words genuinely changed there, so callers should treat
+ * this as "no longer the same word" rather than guess.
+ */
+export function remapWordIndex(
+  diff: WordSequenceDiff,
+  oldIndex: number,
+): number | null {
+  if (oldIndex < diff.prefixLength) {
+    return oldIndex;
+  }
+  if (oldIndex >= diff.oldSuffixStart) {
+    return diff.newSuffixStart + (oldIndex - diff.oldSuffixStart);
+  }
+  return null;
+}
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.html b/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.html
new file mode 100644
index 000000000..d0e2e3552
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.html
@@ -0,0 +1,15 @@
+<div class="textarea-gutter" #gutter aria-hidden="true">
+  @for (row of rows; track $index) {
+    <div class="textarea-gutter__row" [style.height.px]="row.heightPx">
+      @if (row.marker === "paragraph") {
+        <span class="textarea-gutter__pilcrow">&para;</span>
+      }
+      @if (row.marker === "page") {
+        <mat-icon class="textarea-gutter__page-icon"
+          >insert_drive_file</mat-icon
+        >
+      }
+    </div>
+  }
+</div>
+<div class="textarea-gutter__measurer" #measurer aria-hidden="true"></div>
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.sass b/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.sass
new file mode 100644
index 000000000..8c3c0d289
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.sass
@@ -0,0 +1,45 @@
+// Static, non-interactive column for now (click behavior comes later) —
+// see TextareaGutterComponent for why row heights are set explicitly in
+// JS rather than derived from line-height here.
+:host
+  display: contents
+
+.textarea-gutter
+  position: relative
+  flex: 0 0 28px
+  width: 28px
+  overflow: hidden
+  box-sizing: border-box
+  background-color: rgba(0, 0, 0, 0.025)
+  border-right: 1px solid rgba(0, 0, 0, 0.1)
+
+  &__row
+    display: flex
+    align-items: center
+    justify-content: center
+    overflow: hidden
+
+  &__pilcrow
+    font-size: 15px
+    line-height: 1
+    color: #3f51b5
+    opacity: 0.65
+
+  &__page-icon
+    font-size: 15px
+    width: 15px
+    height: 15px
+    line-height: 15px
+    color: #c2185b
+
+// Off-screen full-width mirror used only to measure wrapped line heights;
+// never shown, never a source of truth for anything rendered above.
+.textarea-gutter__measurer
+  position: absolute
+  top: 0
+  left: 0
+  visibility: hidden
+  pointer-events: none
+  white-space: pre-wrap
+  word-wrap: break-word
+  overflow-wrap: break-word
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.spec.ts b/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.spec.ts
new file mode 100644
index 000000000..bdd2e83a2
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.spec.ts
@@ -0,0 +1,119 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { MaterialModule } from "../../material.module";
+import { TextareaGutterComponent } from "./textarea-gutter.component";
+
+// A real template binding (rather than poking `component.text` directly)
+// so `text`/`textareaEl` flow through Angular's normal top-down change
+// detection on every `fixture.detectChanges()` call — see
+// TextareaOverlayComponent's spec for why this matters.
+@Component({
+  template: `<app-textarea-gutter
+    [textareaEl]="textareaEl"
+    [text]="text"
+  ></app-textarea-gutter>`,
+  standalone: false,
+})
+class HostComponent {
+  text = "";
+  textareaEl: HTMLTextAreaElement | null = null;
+}
+
+describe("TextareaGutterComponent", () => {
+  let hostFixture: ComponentFixture<HostComponent>;
+  let host: HostComponent;
+  let textarea: HTMLTextAreaElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MaterialModule],
+      declarations: [TextareaGutterComponent, HostComponent],
+    }).compileComponents();
+
+    hostFixture = TestBed.createComponent(HostComponent);
+    host = hostFixture.componentInstance;
+
+    // The gutter only measures/renders rows once it has a textarea to
+    // mirror, so every test needs a real, attached one.
+    textarea = document.createElement("textarea");
+    textarea.style.width = "300px";
+    textarea.style.height = "200px";
+    document.body.appendChild(textarea);
+    host.textareaEl = textarea;
+  });
+
+  afterEach(() => {
+    textarea.remove();
+  });
+
+  function rowEls(): NodeListOf<HTMLElement> {
+    return hostFixture.nativeElement.querySelectorAll(".textarea-gutter__row");
+  }
+
+  it("should create", () => {
+    hostFixture.detectChanges();
+    expect(
+      hostFixture.debugElement.query(By.css("app-textarea-gutter")),
+    ).toBeTruthy();
+  });
+
+  it("renders one row per line with no marker for ordinary text", () => {
+    host.text = "line one\nline two";
+    hostFixture.detectChanges();
+
+    const rows = rowEls();
+    expect(rows.length).toBe(2);
+    rows.forEach((row) => {
+      expect(row.querySelector(".textarea-gutter__pilcrow")).toBeNull();
+      expect(row.querySelector(".textarea-gutter__page-icon")).toBeNull();
+    });
+  });
+
+  it("renders a pilcrow on a single blank line (paragraph break)", () => {
+    host.text = "para one\n\npara two";
+    hostFixture.detectChanges();
+
+    const rows = rowEls();
+    expect(rows.length).toBe(3);
+    expect(rows[1].querySelector(".textarea-gutter__pilcrow")).not.toBeNull();
+    expect(rows[1].querySelector(".textarea-gutter__page-icon")).toBeNull();
+  });
+
+  it("merges a page-break run into a single row with a page icon", () => {
+    host.text = "page one\n\n\npage two";
+    hostFixture.detectChanges();
+
+    const rows = rowEls();
+    // 2 text rows + 1 merged blank-run row, not 2 text rows + 2 blank rows.
+    expect(rows.length).toBe(3);
+    expect(rows[1].querySelector(".textarea-gutter__page-icon")).not.toBeNull();
+    expect(rows[1].querySelector(".textarea-gutter__pilcrow")).toBeNull();
+  });
+
+  it("sizes the merged page-break row taller than an ordinary row", () => {
+    host.text = "a\n\n\nb";
+    hostFixture.detectChanges();
+
+    const rows = rowEls();
+    const ordinaryHeight = rows[0].getBoundingClientRect().height;
+    const pageRowHeight = rows[1].getBoundingClientRect().height;
+    expect(pageRowHeight).toBeGreaterThan(ordinaryHeight);
+  });
+
+  it("syncs scroll position with the textarea", () => {
+    textarea.style.height = "20px";
+    textarea.value = Array.from({ length: 50 }, (_, i) => `line ${i}`).join(
+      "\n",
+    );
+    host.text = textarea.value;
+    hostFixture.detectChanges();
+
+    textarea.scrollTop = 5;
+    textarea.dispatchEvent(new Event("scroll"));
+
+    const gutter: HTMLElement =
+      hostFixture.nativeElement.querySelector(".textarea-gutter");
+    expect(gutter.scrollTop).toBe(textarea.scrollTop);
+  });
+});
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.ts b/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.ts
new file mode 100644
index 000000000..c3db29af0
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.ts
@@ -0,0 +1,195 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  ViewChild,
+} from "@angular/core";
+
+import { BlankLineRunKind, findBlankLineRuns } from "./blank-line-runs";
+import { TextareaOverlayService } from "./textarea-overlay.service";
+
+interface GutterRow {
+  heightPx: number;
+  marker: BlankLineRunKind | null;
+}
+
+/**
+ * Renders a narrow, non-interactive marker column beside (not behind) a
+ * `<textarea>`: a pilcrow for a single blank line (paragraph break), and a
+ * page icon spanning the combined height of a page-break run. Reuses the
+ * same blank-line-run detection and CSS-parity plumbing as
+ * TextareaOverlayComponent.
+ *
+ * Unlike the overlay, this column doesn't render the textarea's actual
+ * text, so it can't get wrapped-line alignment "for free" the way the
+ * overlay does. A hidden, full-width mirror (`measurer`) is used purely to
+ * measure each line's real rendered height (accounting for word-wrap),
+ * which then sizes this column's rows.
+ *
+ * Usage: same contract as TextareaOverlayComponent — place as a sibling of
+ * the target `<textarea>` and bind `text`/`textareaEl`.
+ */
+@Component({
+  selector: "app-textarea-gutter",
+  templateUrl: "./textarea-gutter.component.html",
+  styleUrl: "./textarea-gutter.component.sass",
+  standalone: false,
+})
+export class TextareaGutterComponent
+  implements OnChanges, AfterViewInit, OnDestroy
+{
+  @Input() text: string | null = "";
+  @Input() textareaEl: HTMLTextAreaElement | null = null;
+
+  @ViewChild("gutter", { static: true })
+  private gutterRef!: ElementRef<HTMLDivElement>;
+  @ViewChild("measurer", { static: true })
+  private measurerRef!: ElementRef<HTMLDivElement>;
+
+  protected rows: GutterRow[] = [];
+
+  private attachedTextarea: HTMLTextAreaElement | null = null;
+  private stopObservingResize: (() => void) | null = null;
+  private readonly handleScroll = () => this.syncScroll();
+  private readonly handleResizingActivity = () => this.refresh();
+
+  constructor(
+    private readonly overlayService: TextareaOverlayService,
+    private readonly cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // Attach first: updateRows() below needs `attachedTextarea` to measure
+    // against, regardless of which order these two inputs are bound in.
+    if (changes["textareaEl"]) {
+      this.attachToTextarea();
+    }
+    if (changes["text"]) {
+      // A no-op until the view (and its measurer) exists; ngAfterViewInit
+      // covers the initial computation once it does.
+      this.updateRows();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.attachToTextarea();
+    this.refresh();
+  }
+
+  ngOnDestroy(): void {
+    this.detachFromTextarea();
+  }
+
+  /** Re-syncs vertical alignment/scroll and re-measures row heights, then
+   * flushes the view synchronously. Used outside the normal pre-render
+   * window (post-view-init, resize/input events) where mutating `rows`
+   * would otherwise trigger ExpressionChangedAfterItHasBeenCheckedError. */
+  private refresh(): void {
+    if (!this.attachedTextarea) {
+      return;
+    }
+    const gutter = this.gutterRef.nativeElement;
+    this.overlayService.applyVerticalMetrics(this.attachedTextarea, gutter);
+    this.syncScroll();
+    this.updateRows();
+    this.cdr.detectChanges();
+  }
+
+  private syncScroll(): void {
+    if (!this.attachedTextarea) {
+      return;
+    }
+    this.overlayService.syncScroll(
+      this.attachedTextarea,
+      this.gutterRef.nativeElement,
+    );
+  }
+
+  private updateRows(): void {
+    const measurer = this.measurerRef?.nativeElement;
+    if (!measurer || !this.attachedTextarea) {
+      return;
+    }
+
+    const text = this.text ?? "";
+    const lines = text.split("\n");
+
+    // Give the (invisible) measurer the textarea's exact width and text
+    // metrics so its lines wrap at the same points as the real textarea.
+    this.overlayService.applyMirrorStyles(this.attachedTextarea, measurer);
+    measurer.replaceChildren(
+      ...lines.map((line) => {
+        const div = document.createElement("div");
+        div.textContent = line.length > 0 ? line : "​";
+        return div;
+      }),
+    );
+    const heights = Array.from(measurer.children).map(
+      (child) => (child as HTMLElement).offsetHeight,
+    );
+
+    const runByStartLine = new Map(
+      findBlankLineRuns(text).map((run) => [run.startLine, run]),
+    );
+
+    const rows: GutterRow[] = [];
+    for (let i = 0; i < lines.length; ) {
+      const run = runByStartLine.get(i);
+      if (run) {
+        // A run's blank lines collapse into a single row spanning their
+        // combined height, so its marker can be centered once rather than
+        // repeated per line.
+        const heightPx = heights
+          .slice(run.startLine, run.endLine + 1)
+          .reduce((sum, height) => sum + height, 0);
+        rows.push({ heightPx, marker: run.kind });
+        i = run.endLine + 1;
+      } else {
+        rows.push({ heightPx: heights[i], marker: null });
+        i++;
+      }
+    }
+
+    this.rows = rows;
+  }
+
+  private attachToTextarea(): void {
+    if (this.attachedTextarea === this.textareaEl) {
+      return;
+    }
+    this.detachFromTextarea();
+
+    this.attachedTextarea = this.textareaEl;
+    if (!this.attachedTextarea) {
+      return;
+    }
+
+    this.attachedTextarea.addEventListener("scroll", this.handleScroll);
+    this.attachedTextarea.addEventListener(
+      "input",
+      this.handleResizingActivity,
+    );
+    window.addEventListener("resize", this.handleResizingActivity);
+    this.stopObservingResize = this.overlayService.observeResize(
+      this.attachedTextarea,
+      this.handleResizingActivity,
+    );
+  }
+
+  private detachFromTextarea(): void {
+    this.attachedTextarea?.removeEventListener("scroll", this.handleScroll);
+    this.attachedTextarea?.removeEventListener(
+      "input",
+      this.handleResizingActivity,
+    );
+    window.removeEventListener("resize", this.handleResizingActivity);
+    this.stopObservingResize?.();
+    this.stopObservingResize = null;
+    this.attachedTextarea = null;
+  }
+}
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.html b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.html
new file mode 100644
index 000000000..cb79de303
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.html
@@ -0,0 +1,16 @@
+<div class="textarea-overlay" #mirror aria-hidden="true">
+  @for (line of lines; track $index) {
+    <div
+      class="textarea-overlay__line"
+      [class.textarea-overlay__line--paragraph]="line.tint === 'paragraph'"
+      [class.textarea-overlay__line--page]="line.tint === 'page'"
+    >
+      @for (span of line.spans; track $index) {
+        <span
+          [class.textarea-overlay__error]="span.error"
+          [textContent]="span.text"
+        ></span>
+      }
+    </div>
+  }
+</div>
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.sass b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.sass
new file mode 100644
index 000000000..530c4a60e
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.sass
@@ -0,0 +1,43 @@
+// This layer only mirrors the textarea it is paired with: it never reads
+// user input directly and never becomes a source of truth. The textarea's
+// .value is authoritative; see TextareaOverlayComponent for the sync logic.
+//
+// display: contents keeps this component's own tag out of the box tree,
+// so .textarea-overlay's `position: absolute` resolves against the
+// nearest real positioned ancestor (the textarea's wrapper), not this
+// element.
+:host
+  display: contents
+
+.textarea-overlay
+  position: absolute
+  top: 0
+  left: 0
+  overflow: hidden
+  pointer-events: none
+  white-space: pre-wrap
+  word-wrap: break-word
+  overflow-wrap: break-word
+
+  &__line
+    display: block
+
+    // Zero-width space so an empty (blank) line still occupies a full
+    // line box and can show its background tint.
+    &::after
+      content: "\200B"
+
+  &__line--paragraph
+    background-color: rgba(63, 81, 181, 0.08)
+
+  &__line--page
+    background-color: rgba(255, 64, 129, 0.18)
+
+  // A word that failed g2p conversion during alignment (see
+  // UploadComponent.reportRasError / g2p-error-mapping.ts).
+  &__error
+    text-decoration-line: underline
+    text-decoration-style: wavy
+    text-decoration-color: #f44336
+    text-decoration-thickness: 1.5px
+    text-underline-offset: 2px
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.spec.ts b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.spec.ts
new file mode 100644
index 000000000..ff4040d98
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.spec.ts
@@ -0,0 +1,176 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { TextRange } from "./document-words";
+import { TextareaOverlayComponent } from "./textarea-overlay.component";
+
+// A real template binding (rather than poking `component.text` directly)
+// so `text`/`textareaEl` flow through Angular's normal top-down change
+// detection on every `fixture.detectChanges()` call, exactly as they do
+// in the real app. Setting an @Input directly from test code bypasses
+// that and can trip Angular's dev-mode "changed after checked" guard when
+// a test changes the input more than once.
+@Component({
+  template: `<app-textarea-overlay
+    [text]="text"
+    [textareaEl]="textareaEl"
+    [errorRanges]="errorRanges"
+  ></app-textarea-overlay>`,
+  standalone: false,
+})
+class HostComponent {
+  text = "";
+  textareaEl: HTMLTextAreaElement | null = null;
+  errorRanges: TextRange[] = [];
+}
+
+describe("TextareaOverlayComponent", () => {
+  let hostFixture: ComponentFixture<HostComponent>;
+  let host: HostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TextareaOverlayComponent, HostComponent],
+    }).compileComponents();
+
+    hostFixture = TestBed.createComponent(HostComponent);
+    host = hostFixture.componentInstance;
+  });
+
+  it("should create", () => {
+    hostFixture.detectChanges();
+    expect(
+      hostFixture.debugElement.query(By.css("app-textarea-overlay")),
+    ).toBeTruthy();
+  });
+
+  it("renders one line per source line, with no tint on plain text", () => {
+    host.text = "line one\nline two";
+    hostFixture.detectChanges();
+
+    const lineEls: NodeListOf<HTMLElement> =
+      hostFixture.nativeElement.querySelectorAll(".textarea-overlay__line");
+    expect(lineEls.length).toBe(2);
+    expect(lineEls[0].textContent).toBe("line one");
+    expect(lineEls[1].textContent).toBe("line two");
+    lineEls.forEach((el) => {
+      expect(el.classList).not.toContain("textarea-overlay__line--paragraph");
+      expect(el.classList).not.toContain("textarea-overlay__line--page");
+    });
+  });
+
+  it("tints a single blank line as a paragraph break", () => {
+    host.text = "para one\n\npara two";
+    hostFixture.detectChanges();
+
+    const lineEls: NodeListOf<HTMLElement> =
+      hostFixture.nativeElement.querySelectorAll(".textarea-overlay__line");
+    expect(lineEls.length).toBe(3);
+    expect(
+      lineEls[1].classList.contains("textarea-overlay__line--paragraph"),
+    ).toBeTrue();
+    expect(
+      lineEls[1].classList.contains("textarea-overlay__line--page"),
+    ).toBeFalse();
+  });
+
+  it("tints a run of two blank lines as a page break", () => {
+    host.text = "page one\n\n\npage two";
+    hostFixture.detectChanges();
+
+    const lineEls: NodeListOf<HTMLElement> =
+      hostFixture.nativeElement.querySelectorAll(".textarea-overlay__line");
+    expect(lineEls.length).toBe(4);
+    expect(
+      lineEls[1].classList.contains("textarea-overlay__line--page"),
+    ).toBeTrue();
+    expect(
+      lineEls[2].classList.contains("textarea-overlay__line--page"),
+    ).toBeTrue();
+  });
+
+  it("underlines the word at the given error range and nothing else", () => {
+    host.text = "hej verden 2";
+    host.errorRanges = [{ start: 11, end: 12 }]; // "2"
+    hostFixture.detectChanges();
+
+    const errorSpans: NodeListOf<HTMLElement> =
+      hostFixture.nativeElement.querySelectorAll(".textarea-overlay__error");
+    expect(errorSpans.length).toBe(1);
+    expect(errorSpans[0].textContent).toBe("2");
+
+    const line = hostFixture.nativeElement.querySelector(
+      ".textarea-overlay__line",
+    );
+    expect(line.textContent).toBe("hej verden 2");
+  });
+
+  it("supports multiple error ranges on the same line", () => {
+    host.text = "one 2 three 4";
+    host.errorRanges = [
+      { start: 4, end: 5 },
+      { start: 12, end: 13 },
+    ];
+    hostFixture.detectChanges();
+
+    const errorSpans: NodeListOf<HTMLElement> =
+      hostFixture.nativeElement.querySelectorAll(".textarea-overlay__error");
+    expect(Array.from(errorSpans).map((el) => el.textContent)).toEqual([
+      "2",
+      "4",
+    ]);
+  });
+
+  it("underlines a word on the correct line in multi-line text", () => {
+    host.text = "line one\nline two has a bad-word here";
+    const wordStart = host.text.indexOf("bad-word");
+    host.errorRanges = [
+      { start: wordStart, end: wordStart + "bad-word".length },
+    ];
+    hostFixture.detectChanges();
+
+    const lineEls: NodeListOf<HTMLElement> =
+      hostFixture.nativeElement.querySelectorAll(".textarea-overlay__line");
+    expect(lineEls[0].querySelectorAll(".textarea-overlay__error").length).toBe(
+      0,
+    );
+    const errorSpans = lineEls[1].querySelectorAll(".textarea-overlay__error");
+    expect(errorSpans.length).toBe(1);
+    expect(errorSpans[0].textContent).toBe("bad-word");
+  });
+
+  it("renders no underline when errorRanges is empty", () => {
+    host.text = "hej verden 2";
+    host.errorRanges = [];
+    hostFixture.detectChanges();
+    expect(
+      hostFixture.nativeElement.querySelectorAll(".textarea-overlay__error")
+        .length,
+    ).toBe(0);
+  });
+
+  it("attaches to the given textarea and syncs its scroll position", () => {
+    const textarea = document.createElement("textarea");
+    document.body.appendChild(textarea);
+    textarea.style.height = "20px";
+    textarea.value = Array.from({ length: 50 }, (_, i) => `line ${i}`).join(
+      "\n",
+    );
+
+    host.textareaEl = textarea;
+    hostFixture.detectChanges();
+
+    textarea.scrollTop = 5;
+    textarea.dispatchEvent(new Event("scroll"));
+
+    const mirror: HTMLElement =
+      hostFixture.nativeElement.querySelector(".textarea-overlay");
+    // The real textarea may itself clamp the requested scrollTop depending
+    // on layout; assert the mirror matches whatever that landed on, not a
+    // hardcoded value.
+    expect(mirror.scrollTop).toBe(textarea.scrollTop);
+    expect(textarea.scrollTop).toBeGreaterThan(0);
+
+    textarea.remove();
+  });
+});
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.ts b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.ts
new file mode 100644
index 000000000..c3e1ac425
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.ts
@@ -0,0 +1,218 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  ViewChild,
+} from "@angular/core";
+
+import { BlankLineRunKind, findBlankLineRuns } from "./blank-line-runs";
+import { TextRange } from "./document-words";
+import { TextareaOverlayService } from "./textarea-overlay.service";
+
+interface OverlaySpan {
+  text: string;
+  error: boolean;
+}
+
+interface OverlayLine {
+  spans: OverlaySpan[];
+  tint: BlankLineRunKind | null;
+}
+
+/**
+ * Renders a non-interactive decoration layer positioned exactly behind a
+ * `<textarea>`, mirroring its text so that per-line styling (background
+ * tints for now; gutter markers, error underlines and a bubble menu in
+ * later iterations) can be drawn without ever touching the textarea's
+ * value, which remains the single source of truth.
+ *
+ * Usage: place as a sibling immediately before the target `<textarea>`
+ * inside a `position: relative` host, and bind `text` to the textarea's
+ * current value and `textareaEl` to a template reference for the
+ * textarea's native element.
+ */
+@Component({
+  selector: "app-textarea-overlay",
+  templateUrl: "./textarea-overlay.component.html",
+  styleUrl: "./textarea-overlay.component.sass",
+  standalone: false,
+})
+export class TextareaOverlayComponent
+  implements OnChanges, AfterViewInit, OnDestroy
+{
+  private _text: string | null = "";
+
+  // An input setter (rather than ngOnChanges) so `lines` is always
+  // recomputed synchronously at assignment time — whether `text` arrives
+  // via a real template binding or is set directly, and always before
+  // this component's own view is next checked. Recomputing it later (e.g.
+  // in ngAfterViewInit, after the view already rendered with the old
+  // value) would trigger ExpressionChangedAfterItHasBeenCheckedError.
+  @Input()
+  set text(value: string | null) {
+    this._text = value;
+    this.renderLines();
+  }
+  get text(): string | null {
+    return this._text;
+  }
+
+  private _errorRanges: readonly TextRange[] = [];
+
+  // Same rationale as the `text` setter above: recompute synchronously at
+  // assignment time so both inputs are always reflected together in the
+  // next render, whichever one changed.
+  @Input()
+  set errorRanges(value: readonly TextRange[] | null) {
+    this._errorRanges = value ?? [];
+    this.renderLines();
+  }
+  get errorRanges(): readonly TextRange[] {
+    return this._errorRanges;
+  }
+
+  @Input() textareaEl: HTMLTextAreaElement | null = null;
+
+  @ViewChild("mirror", { static: true })
+  private mirrorRef!: ElementRef<HTMLDivElement>;
+
+  protected lines: OverlayLine[] = [];
+
+  private attachedTextarea: HTMLTextAreaElement | null = null;
+  private stopObservingResize: (() => void) | null = null;
+  private readonly handleTextareaActivity = () => this.applyMirrorStyles();
+  private readonly handleWindowResize = () => this.applyMirrorStyles();
+
+  constructor(private readonly overlayService: TextareaOverlayService) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["textareaEl"]) {
+      this.attachToTextarea();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Redundant with ngOnChanges for real template bindings, but needed
+    // when textareaEl was set directly (no binding, so ngOnChanges never
+    // fired). Doesn't touch template-bound state, so — unlike `text` —
+    // it's safe to do here.
+    this.attachToTextarea();
+  }
+
+  ngOnDestroy(): void {
+    this.detachFromTextarea();
+  }
+
+  private renderLines(): void {
+    const text = this.text ?? "";
+    const lines = text.split("\n");
+    const tintByLine = new Map<number, BlankLineRunKind>();
+    for (const run of findBlankLineRuns(text)) {
+      for (let i = run.startLine; i <= run.endLine; i++) {
+        tintByLine.set(i, run.kind);
+      }
+    }
+
+    let lineStart = 0;
+    this.lines = lines.map((line, index) => {
+      const overlayLine: OverlayLine = {
+        spans: this.buildLineSpans(line, lineStart),
+        tint: tintByLine.get(index) ?? null,
+      };
+      lineStart += line.length + 1; // +1 for the "\n" this line was split on
+      return overlayLine;
+    });
+  }
+
+  /**
+   * Splits `lineText` (which starts at absolute offset `lineStart` in the
+   * full document) into spans at any `errorRanges` boundaries that fall
+   * within it, so those substrings can be rendered with an error
+   * decoration while the rest of the line renders normally. A word never
+   * spans a newline, so a given error range only ever intersects one line.
+   */
+  private buildLineSpans(lineText: string, lineStart: number): OverlaySpan[] {
+    const lineEnd = lineStart + lineText.length;
+    const errorsInLine = this._errorRanges
+      .map((range) => ({
+        start: Math.max(range.start, lineStart) - lineStart,
+        end: Math.min(range.end, lineEnd) - lineStart,
+      }))
+      .filter((range) => range.start < range.end)
+      .sort((a, b) => a.start - b.start);
+
+    if (errorsInLine.length === 0) {
+      return [{ text: lineText, error: false }];
+    }
+
+    const spans: OverlaySpan[] = [];
+    let cursor = 0;
+    for (const range of errorsInLine) {
+      if (range.start > cursor) {
+        spans.push({ text: lineText.slice(cursor, range.start), error: false });
+      }
+      spans.push({ text: lineText.slice(range.start, range.end), error: true });
+      cursor = range.end;
+    }
+    if (cursor < lineText.length) {
+      spans.push({ text: lineText.slice(cursor), error: false });
+    }
+    return spans;
+  }
+
+  private attachToTextarea(): void {
+    if (this.attachedTextarea === this.textareaEl) {
+      return;
+    }
+    this.detachFromTextarea();
+
+    this.attachedTextarea = this.textareaEl;
+    if (!this.attachedTextarea) {
+      return;
+    }
+
+    this.attachedTextarea.addEventListener(
+      "scroll",
+      this.handleTextareaActivity,
+    );
+    this.attachedTextarea.addEventListener(
+      "input",
+      this.handleTextareaActivity,
+    );
+    window.addEventListener("resize", this.handleWindowResize);
+    this.stopObservingResize = this.overlayService.observeResize(
+      this.attachedTextarea,
+      this.handleTextareaActivity,
+    );
+
+    this.applyMirrorStyles();
+  }
+
+  private detachFromTextarea(): void {
+    this.attachedTextarea?.removeEventListener(
+      "scroll",
+      this.handleTextareaActivity,
+    );
+    this.attachedTextarea?.removeEventListener(
+      "input",
+      this.handleTextareaActivity,
+    );
+    window.removeEventListener("resize", this.handleWindowResize);
+    this.stopObservingResize?.();
+    this.stopObservingResize = null;
+    this.attachedTextarea = null;
+  }
+
+  private applyMirrorStyles(): void {
+    if (!this.attachedTextarea) {
+      return;
+    }
+    const mirror = this.mirrorRef.nativeElement;
+    this.overlayService.applyMirrorStyles(this.attachedTextarea, mirror);
+    this.overlayService.syncScroll(this.attachedTextarea, mirror);
+  }
+}
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.service.spec.ts b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.service.spec.ts
new file mode 100644
index 000000000..c12045901
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.service.spec.ts
@@ -0,0 +1,90 @@
+import { TestBed } from "@angular/core/testing";
+import { TextareaOverlayService } from "./textarea-overlay.service";
+
+describe("TextareaOverlayService", () => {
+  let service: TextareaOverlayService;
+  let source: HTMLTextAreaElement;
+  let target: HTMLDivElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TextareaOverlayService);
+
+    source = document.createElement("textarea");
+    source.style.fontFamily = "monospace";
+    source.style.fontSize = "17px";
+    source.style.lineHeight = "24px";
+    source.style.padding = "5px 7px";
+    source.style.width = "200px";
+    source.style.height = "80px";
+    document.body.appendChild(source);
+
+    target = document.createElement("div");
+    document.body.appendChild(target);
+  });
+
+  afterEach(() => {
+    source.remove();
+    target.remove();
+  });
+
+  it("copies text-layout affecting styles from source to target", () => {
+    service.applyMirrorStyles(source, target);
+
+    expect(target.style.fontFamily).toBe("monospace");
+    expect(target.style.fontSize).toBe("17px");
+    expect(target.style.lineHeight).toBe("24px");
+    expect(target.style.paddingTop).toBe("5px");
+    expect(target.style.paddingLeft).toBe("7px");
+  });
+
+  it("sizes target to match source's content box, ignoring source's own border", () => {
+    source.style.border = "3px solid black";
+
+    service.applyMirrorStyles(source, target);
+
+    expect(target.style.border).toBe("0px");
+    expect(target.style.width).toBe(`${source.clientWidth}px`);
+    expect(target.style.height).toBe(`${source.clientHeight}px`);
+  });
+
+  it("mirrors scroll position", () => {
+    source.style.width = "20px";
+    source.style.height = "20px";
+    source.value = "line1\nline2\nline3\nline4\nline5\nline6\nline7\nline8";
+
+    // Give target far more scrollable room than source could ever need, so
+    // it's never the one clamping the assigned scrollTop/scrollLeft (real
+    // browser layout, not the mirroring logic under test, decides how far
+    // `source` itself can scroll).
+    target.style.height = "20px";
+    target.style.width = "20px";
+    target.style.overflow = "scroll";
+    const spacer = document.createElement("div");
+    spacer.style.width = "1000px";
+    spacer.style.height = "1000px";
+    target.appendChild(spacer);
+
+    source.scrollTop = 10;
+    source.scrollLeft = 3;
+
+    service.syncScroll(source, target);
+
+    expect(target.scrollTop).toBe(source.scrollTop);
+    expect(target.scrollLeft).toBe(source.scrollLeft);
+  });
+
+  it("observeResize invokes the callback and can be disposed", (done) => {
+    const callback = jasmine.createSpy("callback");
+    const stop = service.observeResize(source, callback);
+
+    source.style.width = "500px";
+
+    // ResizeObserver callbacks are asynchronous.
+    setTimeout(() => {
+      expect(callback).toHaveBeenCalled();
+      stop();
+      done();
+    }, 100);
+  });
+});
diff --git a/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.service.ts b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.service.ts
new file mode 100644
index 000000000..555f75975
--- /dev/null
+++ b/packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.service.ts
@@ -0,0 +1,96 @@
+import { Injectable } from "@angular/core";
+
+/**
+ * CSS properties that affect where text wraps and sits inside an element.
+ * Copied verbatim from the textarea onto its mirror so the two layers'
+ * text lines up exactly. Width/height and border are handled separately
+ * in `applyMirrorStyles` because computed `width`/`height` behave
+ * inconsistently across browsers under `box-sizing: border-box`.
+ */
+const MIRRORED_STYLE_PROPERTIES = [
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "fontKerning",
+  "letterSpacing",
+  "lineHeight",
+  "textIndent",
+  "textTransform",
+  "whiteSpace",
+  "wordSpacing",
+  "wordWrap",
+  "overflowWrap",
+  "tabSize",
+  "direction",
+] as const satisfies readonly (keyof CSSStyleDeclaration)[];
+
+/**
+ * Reusable plumbing for building a decoration layer that mirrors a
+ * `<textarea>`: keeping a target element's text layout and scroll
+ * position identical to the source textarea. Used by the background-tint
+ * overlay, and intended for reuse by the gutter, error underlines and
+ * bubble menu built on top of it in later iterations.
+ */
+@Injectable({ providedIn: "root" })
+export class TextareaOverlayService {
+  /**
+   * Copies every CSS property that affects text layout from `source`
+   * onto `target`, and sizes `target` to match `source`'s content box
+   * (via `clientWidth`/`clientHeight`, which already exclude border and
+   * any scrollbar gutter) so wrapped lines land in the same place on
+   * both elements.
+   */
+  applyMirrorStyles(source: HTMLElement, target: HTMLElement): void {
+    const computed = getComputedStyle(source);
+    const targetStyle = target.style as unknown as Record<string, string>;
+    const computedStyle = computed as unknown as Record<string, string>;
+    for (const property of MIRRORED_STYLE_PROPERTIES) {
+      targetStyle[property] = computedStyle[property];
+    }
+    target.style.boxSizing = "border-box";
+    target.style.border = "0";
+    target.style.margin = "0";
+    target.style.width = `${source.clientWidth}px`;
+    target.style.height = `${source.clientHeight}px`;
+  }
+
+  /** Mirrors the scroll position of `source` onto `target`. */
+  syncScroll(source: HTMLElement, target: HTMLElement): void {
+    target.scrollTop = source.scrollTop;
+    target.scrollLeft = source.scrollLeft;
+  }
+
+  /**
+   * Copies just the vertical box metrics (top/bottom padding and height)
+   * from `source` onto `target`, without touching width, horizontal
+   * padding, or font/text properties. For elements like the gutter that
+   * sit beside the textarea rather than behind it: they need their first
+   * row to start at the same vertical offset as the textarea's first line
+   * of text, but have their own fixed width and don't render the
+   * textarea's actual text.
+   */
+  applyVerticalMetrics(source: HTMLElement, target: HTMLElement): void {
+    const computed = getComputedStyle(source);
+    target.style.paddingTop = computed.paddingTop;
+    target.style.paddingBottom = computed.paddingBottom;
+    target.style.boxSizing = "border-box";
+    target.style.height = `${source.clientHeight}px`;
+  }
+
+  /**
+   * Observes `element` for box-size changes (window resizes, manual
+   * textarea resizing, etc.) and invokes `callback` each time. Returns a
+   * disposer that stops observing.
+   */
+  observeResize(element: Element, callback: () => void): () => void {
+    const observer = new ResizeObserver(() => callback());
+    observer.observe(element);
+    return () => observer.disconnect();
+  }
+}
diff --git a/packages/studio-web/src/app/studio/studio.service.ts b/packages/studio-web/src/app/studio/studio.service.ts
index 46f73acab..50d493e94 100644
--- a/packages/studio-web/src/app/studio/studio.service.ts
+++ b/packages/studio-web/src/app/studio/studio.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { ReadAlongSlots } from "../ras.service";
 import { BehaviorSubject } from "rxjs";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { TextRange } from "../shared/textarea-overlay/document-words";
 
 export enum langMode {
   generic = "generic",
@@ -42,6 +43,10 @@ export class StudioService {
     Validators.required,
   );
   public $textInput = new BehaviorSubject<string>("");
+  // Character ranges of words currently flagged by a g2p alignment error,
+  // for the text-input overlay to underline. Kept in sync with edits by
+  // UploadComponent (cleared per-word once the flagged word is changed).
+  public $textInputErrors = new BehaviorSubject<TextRange[]>([]);
 
   public uploadFormGroup = new FormGroup({
     lang: this.langControl$,
diff --git a/packages/studio-web/src/app/upload/g2p-error-mapping.spec.ts b/packages/studio-web/src/app/upload/g2p-error-mapping.spec.ts
new file mode 100644
index 000000000..37e6c2550
--- /dev/null
+++ b/packages/studio-web/src/app/upload/g2p-error-mapping.spec.ts
@@ -0,0 +1,103 @@
+import {
+  isG2pAssembleErrorBody,
+  mapG2pErrorsToRanges,
+} from "./g2p-error-mapping";
+
+const EXAMPLE_PARTIAL_RAS = `<?xml version='1.0' encoding='utf-8'?>
+<read-along version="1.2">
+    <meta name="generator" content="@readalongs/studio (cli) 1.2.2" id="meta0"/>
+    <text xml:lang="dan" fallback-langs="und" id="t0">
+        <body id="t0b0">
+            <div type="page" id="t0b0d0">
+                <p id="t0b0d0p0">
+                    <s id="t0b0d0p0s0"><w id="t0b0d0p0s0w0" ARPABET="HH EH Y">hej</w> <w id="t0b0d0p0s0w1" ARPABET="V Y D EH N">verden</w> <w id="t0b0d0p0s0w2" ARPABET="">2</w></s>
+                </p>
+            </div>
+        </body>
+    </text>
+</read-along>`;
+
+describe("isG2pAssembleErrorBody", () => {
+  it("recognizes a body with g2p_error_words and partial_ras", () => {
+    expect(
+      isG2pAssembleErrorBody({
+        detail: "g2p could not be performed...",
+        g2p_error_words: ["2"],
+        partial_ras: EXAMPLE_PARTIAL_RAS,
+      }),
+    ).toBeTrue();
+  });
+
+  it("rejects a plain error body", () => {
+    expect(isG2pAssembleErrorBody({ detail: "text is empty" })).toBeFalse();
+  });
+
+  it("rejects null/non-object bodies", () => {
+    expect(isG2pAssembleErrorBody(null)).toBeFalse();
+    expect(isG2pAssembleErrorBody("just a string")).toBeFalse();
+  });
+
+  it("rejects a body missing partial_ras", () => {
+    expect(
+      isG2pAssembleErrorBody({ detail: "x", g2p_error_words: ["2"] }),
+    ).toBeFalse();
+  });
+});
+
+describe("mapG2pErrorsToRanges", () => {
+  it("maps the failing word to its index and character range in the submitted text (real example)", () => {
+    const submittedText = "hej verden 2";
+    const errors = mapG2pErrorsToRanges(submittedText, EXAMPLE_PARTIAL_RAS);
+    expect(errors).toEqual([{ index: 2, start: 11, end: 12 }]);
+    expect(submittedText.slice(11, 12)).toBe("2");
+  });
+
+  it("returns one entry per failing word, in document order", () => {
+    const submittedText = "one 2 three 4";
+    const partialRas = `<read-along><text><body><div type="page"><p><s>
+      <w ARPABET="W AH N">one</w>
+      <w ARPABET="">2</w>
+      <w ARPABET="TH R IY">three</w>
+      <w ARPABET="">4</w>
+    </s></p></div></body></text></read-along>`;
+    const errors = mapG2pErrorsToRanges(submittedText, partialRas);
+    expect(errors).toEqual([
+      { index: 1, start: 4, end: 5 },
+      { index: 3, start: 12, end: 13 },
+    ]);
+  });
+
+  it("disambiguates repeated words by position, not by string matching", () => {
+    // Both instances of "2" are the same string, but only the second one
+    // failed g2p in this partial_ras — a name-based match against
+    // g2p_error_words couldn't tell them apart.
+    const submittedText = "2 is not 2";
+    const partialRas = `<read-along><text><body><div type="page"><p><s>
+      <w ARPABET="T UW">2</w>
+      <w ARPABET="IH Z">is</w>
+      <w ARPABET="N AA T">not</w>
+      <w ARPABET="">2</w>
+    </s></p></div></body></text></read-along>`;
+    const errors = mapG2pErrorsToRanges(submittedText, partialRas);
+    expect(errors).toEqual([{ index: 3, start: 9, end: 10 }]);
+  });
+
+  it("returns an empty array when every word succeeded", () => {
+    const submittedText = "hej verden";
+    const partialRas = `<read-along><text><body><div type="page"><p><s>
+      <w ARPABET="HH EH Y">hej</w>
+      <w ARPABET="V Y D EH N">verden</w>
+    </s></p></div></body></text></read-along>`;
+    expect(mapG2pErrorsToRanges(submittedText, partialRas)).toEqual([]);
+  });
+
+  it("returns null for unparseable XML rather than guessing", () => {
+    expect(mapG2pErrorsToRanges("hej verden 2", "<not valid xml")).toBeNull();
+  });
+
+  it("returns null when the word counts don't match, rather than guessing", () => {
+    const submittedText = "hej verden 2 extra";
+    const ranges = mapG2pErrorsToRanges(submittedText, EXAMPLE_PARTIAL_RAS);
+    expect(ranges).toBeNull();
+  });
+});
diff --git a/packages/studio-web/src/app/upload/g2p-error-mapping.ts b/packages/studio-web/src/app/upload/g2p-error-mapping.ts
new file mode 100644
index 000000000..9e56e9b8e
--- /dev/null
+++ b/packages/studio-web/src/app/upload/g2p-error-mapping.ts
@@ -0,0 +1,91 @@
+import {
+  DocumentWord,
+  TextRange,
+  walkDocumentWords,
+} from "../shared/textarea-overlay/document-words";
+
+/**
+ * The `/assemble` API's error body for a g2p-conversion failure: alongside
+ * the generic `detail` message, it includes the words it couldn't convert
+ * and a partially-assembled RAS document containing a `<w>` element for
+ * every word actually submitted, in document order, with the words that
+ * failed g2p carrying an empty `ARPABET` attribute.
+ */
+export interface G2pAssembleErrorBody {
+  detail: string;
+  g2p_error_words?: string[];
+  partial_ras?: string;
+}
+
+export function isG2pAssembleErrorBody(
+  body: unknown,
+): body is G2pAssembleErrorBody {
+  const candidate = body as Partial<G2pAssembleErrorBody> | null;
+  return (
+    !!candidate &&
+    Array.isArray(candidate.g2p_error_words) &&
+    typeof candidate.partial_ras === "string"
+  );
+}
+
+/**
+ * A word that failed g2p, both by its position in the document's word
+ * sequence (stable identity, for tracking whether the user has since
+ * edited it) and its current character range (for rendering).
+ */
+export interface G2pErrorWord extends TextRange {
+  /** Index into `walkDocumentWords(submittedText)`. */
+  index: number;
+}
+
+/**
+ * Maps a g2p assemble error's `partial_ras` back onto the words in the
+ * text that was actually submitted, by matching each `<w>` element in
+ * `partial_ras` positionally against `walkDocumentWords(submittedText)` —
+ * the Nth word submitted is assumed to be the Nth `<w>` returned. This is
+ * deliberately *not* a string match against `g2p_error_words`: repeated
+ * words/symbols in the document would be indistinguishable that way.
+ *
+ * Returns `null` (rather than a best-effort guess) if `partial_ras` isn't
+ * parseable XML, or if its word count doesn't match the submitted text's
+ * word count — callers should fall back to non-positional error reporting
+ * in that case, since the mapping can no longer be trusted to point at the
+ * right word.
+ */
+export function mapG2pErrorsToRanges(
+  submittedText: string,
+  partialRas: string,
+): G2pErrorWord[] | null {
+  const wordElements = parsePartialRasWords(partialRas);
+  if (wordElements === null) {
+    return null;
+  }
+
+  const words = walkDocumentWords(submittedText);
+  if (words.length !== wordElements.length) {
+    return null;
+  }
+
+  const errors: G2pErrorWord[] = [];
+  words.forEach((word: DocumentWord, index: number) => {
+    if (!wordElements[index]) {
+      errors.push({ index, start: word.start, end: word.end });
+    }
+  });
+  return errors;
+}
+
+/**
+ * Parses `partial_ras` and returns, for each `<w>` element in document
+ * order, whether it has a non-empty `ARPABET` attribute (i.e. g2p
+ * succeeded for that word). Returns `null` if the string isn't valid XML.
+ */
+function parsePartialRasWords(partialRas: string): boolean[] | null {
+  const doc = new DOMParser().parseFromString(partialRas, "application/xml");
+  if (doc.querySelector("parsererror")) {
+    return null;
+  }
+  return Array.from(doc.querySelectorAll("w")).map(
+    (w) => (w.getAttribute("ARPABET") ?? "").length > 0,
+  );
+}
diff --git a/packages/studio-web/src/app/upload/upload.component.html b/packages/studio-web/src/app/upload/upload.component.html
index 72da4a589..8493f4ce7 100644
--- a/packages/studio-web/src/app/upload/upload.component.html
+++ b/packages/studio-web/src/app/upload/upload.component.html
@@ -109,24 +109,38 @@ <h1 i18n="Title for text box" class="title">Text</h1>
             </div>
             <div class="row">
               <mat-form-field class="col-12 p-0 b-0">
-                <textarea
-                  [ngModel]="studioService.$textInput | async"
-                  (ngModelChange)="studioService.$textInput.next($event)"
-                  id="textInput"
-                  class="border rounded b-0 p-0 bg-light"
-                  rows="8"
-                  matInput
-                  spellcheck="false"
-                  i18n-placeholder="Example input text"
-                  placeholder="Ex. Hello my name is...
+                <div id="textInputHost" class="border rounded bg-light">
+                  <app-textarea-gutter
+                    [textareaEl]="textInputEl"
+                    [text]="studioService.$textInput | async"
+                  ></app-textarea-gutter>
+                  <div class="textarea-editor-main">
+                    <app-textarea-overlay
+                      [text]="studioService.$textInput | async"
+                      [textareaEl]="textInputEl"
+                      [errorRanges]="studioService.$textInputErrors | async"
+                    ></app-textarea-overlay>
+                    <textarea
+                      #textInputEl
+                      [ngModel]="studioService.$textInput | async"
+                      (ngModelChange)="studioService.$textInput.next($event)"
+                      id="textInput"
+                      class="p-0"
+                      rows="8"
+                      matInput
+                      spellcheck="false"
+                      i18n-placeholder="Example input text"
+                      placeholder="Ex. Hello my name is...
 Sentence two.
 
 Paragraph two.
 
 
 Page two."
-                  data-test-id="ras-text-input"
-                ></textarea>
+                      data-test-id="ras-text-input"
+                    ></textarea>
+                  </div>
+                </div>
               </mat-form-field>
             </div>
           </div>
diff --git a/packages/studio-web/src/app/upload/upload.component.sass b/packages/studio-web/src/app/upload/upload.component.sass
index 1901963b1..66ffe495b 100644
--- a/packages/studio-web/src/app/upload/upload.component.sass
+++ b/packages/studio-web/src/app/upload/upload.component.sass
@@ -1,7 +1,37 @@
-#textInput
+// Positioning context for the textarea-overlay decoration layer, and now
+// the home of the visible box chrome that used to live on #textInput
+// directly: the textarea itself is made transparent (see below) so the
+// overlay can render tinted backgrounds behind its text, which means it
+// can no longer paint its own opaque background/border without hiding
+// the overlay.
+#textInputHost
+    position: relative
+    display: flex
+    align-items: stretch
     border: 1px solid #222
+    overflow: hidden
     min-height: 150px
+
+// Wraps the overlay + textarea pair from prompt 1 so the gutter can sit
+// beside them as its own flex column without disturbing their existing
+// position: relative / absolute-overlay relationship.
+.textarea-editor-main
+    position: relative
+    flex: 1 1 auto
+    min-width: 0
+
+#textInput
     font-family: 'BCSans', 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'
+    position: relative
+    z-index: 1
+    background: transparent
+    color: transparent
+    -webkit-text-fill-color: transparent
+    caret-color: #222
+
+    &::placeholder
+        color: #6c757d
+        -webkit-text-fill-color: #6c757d
 
 .audioControl
     width: 100%
diff --git a/packages/studio-web/src/app/upload/upload.component.spec.ts b/packages/studio-web/src/app/upload/upload.component.spec.ts
index f5bc8b965..8caac1821 100644
--- a/packages/studio-web/src/app/upload/upload.component.spec.ts
+++ b/packages/studio-web/src/app/upload/upload.component.spec.ts
@@ -34,4 +34,169 @@ describe("UploadComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  describe("reportRasError — g2p errors", () => {
+    const PARTIAL_RAS = `<?xml version='1.0' encoding='utf-8'?>
+<read-along version="1.2">
+  <text xml:lang="dan" fallback-langs="und" id="t0">
+    <body id="t0b0">
+      <div type="page" id="t0b0d0">
+        <p id="t0b0d0p0">
+          <s id="t0b0d0p0s0"><w ARPABET="HH EH Y">hej</w> <w ARPABET="V Y D EH N">verden</w> <w ARPABET="">2</w></s>
+        </p>
+      </div>
+    </body>
+  </text>
+</read-along>`;
+
+    // Simulates a request having just been submitted with `text`, and the
+    // textarea still holding that same value (the common case — the
+    // request typically resolves before the user types anything else).
+    function setLastSubmittedText(text: string): void {
+      (
+        component as unknown as { lastSubmittedText: string }
+      ).lastSubmittedText = text;
+      component.studioService.$textInput.next(text);
+    }
+
+    it("underlines the failing word and shows the adjusted toast", () => {
+      setLastSubmittedText("hej verden 2");
+      const toastrSpy = spyOn((component as any).toastr, "error");
+
+      let ranges: { start: number; end: number }[] = [];
+      component.studioService.$textInputErrors.subscribe((r) => (ranges = r));
+
+      component.reportRasError({
+        status: 422,
+        error: {
+          detail: "g2p could not be performed...",
+          g2p_error_words: ["2"],
+          partial_ras: PARTIAL_RAS,
+        },
+      } as any);
+
+      expect(ranges).toEqual([{ start: 11, end: 12 }]);
+      expect(toastrSpy).toHaveBeenCalledWith(
+        jasmine.stringMatching(/highlighted text/),
+        jasmine.any(String),
+        jasmine.any(Object),
+      );
+    });
+
+    it("falls back to the generic toast when the error has no partial_ras", () => {
+      setLastSubmittedText("hej verden 2");
+      const toastrSpy = spyOn((component as any).toastr, "error");
+
+      component.reportRasError({
+        status: 422,
+        error: { detail: "some generic failure" },
+      } as any);
+
+      expect(toastrSpy).toHaveBeenCalledWith(
+        "some generic failure",
+        jasmine.any(String),
+        jasmine.any(Object),
+      );
+    });
+
+    it("falls back to the generic toast when word counts don't line up", () => {
+      setLastSubmittedText("hej verden 2 extra");
+      const toastrSpy = spyOn((component as any).toastr, "error");
+
+      component.reportRasError({
+        status: 422,
+        error: {
+          detail: "g2p could not be performed...",
+          g2p_error_words: ["2"],
+          partial_ras: PARTIAL_RAS,
+        },
+      } as any);
+
+      expect(toastrSpy).toHaveBeenCalledWith(
+        "g2p could not be performed...",
+        jasmine.any(String),
+        jasmine.any(Object),
+      );
+    });
+
+    it("clears the error mark once the user edits that word", () => {
+      setLastSubmittedText("hej verden 2");
+      spyOn((component as any).toastr, "error");
+      component.reportRasError({
+        status: 422,
+        error: {
+          detail: "x",
+          g2p_error_words: ["2"],
+          partial_ras: PARTIAL_RAS,
+        },
+      } as any);
+
+      let ranges: { start: number; end: number }[] = [];
+      component.studioService.$textInputErrors.subscribe((r) => (ranges = r));
+      expect(ranges.length).toBe(1);
+
+      component.studioService.$textInput.next("hej verden two");
+      expect(ranges).toEqual([]);
+    });
+
+    it("keeps the error mark when a different word is edited", () => {
+      setLastSubmittedText("hej verden 2");
+      spyOn((component as any).toastr, "error");
+      component.reportRasError({
+        status: 422,
+        error: {
+          detail: "x",
+          g2p_error_words: ["2"],
+          partial_ras: PARTIAL_RAS,
+        },
+      } as any);
+
+      const newText = "hi verden 2";
+      component.studioService.$textInput.next(newText);
+
+      let ranges: { start: number; end: number }[] = [];
+      component.studioService.$textInputErrors.subscribe((r) => (ranges = r));
+      const expectedStart = newText.indexOf("2");
+      expect(ranges).toEqual([
+        { start: expectedStart, end: expectedStart + 1 },
+      ]);
+    });
+
+    it("regression: deleting one flagged word doesn't clear a different flagged word after it", () => {
+      // "hello 1 2 3" — 1, 2 and 3 all fail g2p.
+      setLastSubmittedText("hello 1 2 3");
+      spyOn((component as any).toastr, "error");
+      const partialRas = `<read-along><text><body><div type="page"><p><s>
+        <w ARPABET="HH EH L OW">hello</w>
+        <w ARPABET="">1</w>
+        <w ARPABET="">2</w>
+        <w ARPABET="">3</w>
+      </s></p></div></body></text></read-along>`;
+      component.reportRasError({
+        status: 422,
+        error: {
+          detail: "x",
+          g2p_error_words: ["1", "2", "3"],
+          partial_ras: partialRas,
+        },
+      } as any);
+
+      let ranges: { start: number; end: number }[] = [];
+      component.studioService.$textInputErrors.subscribe((r) => (ranges = r));
+      expect(ranges.length).toBe(3);
+
+      // Delete "2 " (the middle flagged word plus its trailing space).
+      const newText = "hello 1 3";
+      component.studioService.$textInput.next(newText);
+
+      // "1" and "3" are both still present (just shifted) and must stay
+      // flagged; only "2" (actually removed) should drop off.
+      const oneStart = newText.indexOf("1");
+      const threeStart = newText.indexOf("3");
+      expect(ranges).toEqual([
+        { start: oneStart, end: oneStart + 1 },
+        { start: threeStart, end: threeStart + 1 },
+      ]);
+    });
+  });
 });
diff --git a/packages/studio-web/src/app/upload/upload.component.ts b/packages/studio-web/src/app/upload/upload.component.ts
index 67bb12852..9e36e0b6b 100644
--- a/packages/studio-web/src/app/upload/upload.component.ts
+++ b/packages/studio-web/src/app/upload/upload.component.ts
@@ -46,6 +46,16 @@ import { StudioService } from "../studio/studio.service";
 import { validateFileType } from "../utils/utils";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { IAudioBuffer } from "standardized-audio-context";
+import {
+  DocumentWord,
+  diffWordSequences,
+  remapWordIndex,
+  walkDocumentWords,
+} from "../shared/textarea-overlay/document-words";
+import {
+  isG2pAssembleErrorBody,
+  mapG2pErrorsToRanges,
+} from "./g2p-error-mapping";
 
 @Component({
   selector: "app-upload",
@@ -70,6 +80,16 @@ export class UploadComponent implements OnInit {
   // Later bumped to 400 to accommodate a real life use case.
   private maxRasSizeKB = 400;
   private currentToast: number;
+  // The exact text sent in the last alignment request — g2p error offsets
+  // must be resolved against this, not the (possibly since-edited) live
+  // textarea value.
+  private lastSubmittedText = "";
+  // Indices (into trackedWords) of words currently flagged by a g2p error.
+  private erroringIndices: number[] = [];
+  // The word sequence erroringIndices refers to, i.e. as of the last
+  // syncErrorMarks() call — needed to remap indices forward across edits
+  // elsewhere in the document. See syncErrorMarks().
+  private trackedWords: DocumentWord[] = [];
   @ViewChild("textFileUpload")
   private textFileUpload: ElementRef<HTMLFormElement>;
   @ViewChild("audioFileUpload")
@@ -143,6 +163,47 @@ export class UploadComponent implements OnInit {
           new Blob([textString], { type: "text/plain" }),
         );
       });
+
+    // Keep g2p error underlines in sync with edits: remap their current
+    // positions across the latest edit, dropping any that fell inside it.
+    // Unfiltered (unlike the subscription above) so clearing the textarea
+    // also clears any lingering marks.
+    this.studioService.$textInput
+      .pipe(takeUntilDestroyed(this.destroyRef$))
+      .subscribe((text) => this.syncErrorMarks(text));
+  }
+
+  /**
+   * Remaps `erroringIndices` from `trackedWords` onto `currentText`'s word
+   * sequence, dropping any that fell inside the edited region, and
+   * publishes the survivors' current character ranges for the overlay to
+   * underline.
+   *
+   * This is index-based rather than a simple "does the word at its
+   * original index still read the same" check: editing *any* word shifts
+   * the indices of every word after it, so a naive check would spuriously
+   * drop unrelated marks whenever an earlier flagged word was edited
+   * (e.g. "hello 1 2 3" with 1/2/3 all flagged — deleting "2" alone must
+   * not also clear the mark on "3", which simply moved to a new index).
+   * diffWordSequences finds the unaffected prefix/suffix around the edit
+   * so indices outside it can be carried forward correctly instead.
+   */
+  private syncErrorMarks(currentText: string): void {
+    if (this.erroringIndices.length === 0) {
+      return;
+    }
+    const currentWords = walkDocumentWords(currentText);
+    const diff = diffWordSequences(this.trackedWords, currentWords);
+    this.erroringIndices = this.erroringIndices
+      .map((index) => remapWordIndex(diff, index))
+      .filter((index): index is number => index !== null);
+    this.trackedWords = currentWords;
+    this.studioService.$textInputErrors.next(
+      this.erroringIndices.map((index) => {
+        const word = currentWords[index];
+        return { start: word.start, end: word.end };
+      }),
+    );
   }
 
   async ngOnInit() {
@@ -168,6 +229,18 @@ export class UploadComponent implements OnInit {
 
   reportRasError(err: HttpErrorResponse) {
     if (err.status == 422) {
+      if (
+        isG2pAssembleErrorBody(err.error) &&
+        this.applyG2pErrorRanges(err.error.partial_ras)
+      ) {
+        this.toastr.error(
+          $localize`Some words couldn't be processed — see the highlighted text.`,
+          $localize`Text processing failed.`,
+          { timeOut: 30000, closeButton: true },
+        );
+        return;
+      }
+
       if (err.error.detail.includes("is empty")) {
         this.toastr.error(
           $localize`Your text may contain unpronounceable characters or numbers.
@@ -190,6 +263,31 @@ Please check it to make sure all words are spelled out completely, e.g. write "4
     }
   }
 
+  /**
+   * Attempts to positionally map a g2p assemble error onto the words that
+   * were actually submitted, and — if that succeeds — flags them for the
+   * overlay to underline. Returns false (without flagging anything) if the
+   * mapping isn't trustworthy, so the caller can fall back to the generic
+   * error toast rather than silently pointing at the wrong word.
+   */
+  private applyG2pErrorRanges(partialRas: string | undefined): boolean {
+    if (!partialRas) {
+      return false;
+    }
+    const errors = mapG2pErrorsToRanges(this.lastSubmittedText, partialRas);
+    if (errors === null || errors.length === 0) {
+      return false;
+    }
+    // Seed tracking from the submitted text's word sequence, then
+    // immediately sync forward to whatever the textarea holds *now* (the
+    // user may have kept typing while the request was in flight) — same
+    // remapping logic as any later edit.
+    this.trackedWords = walkDocumentWords(this.lastSubmittedText);
+    this.erroringIndices = errors.map((error) => error.index);
+    this.syncErrorMarks(this.studioService.$textInput.value);
+    return true;
+  }
+
   reportUnpronounceableError(err: Error) {
     this.toastr.error(
       $localize`Unable to align even with loose alignment parameters. Please check your text and audio for quality and make sure they are a good match.`,
@@ -499,6 +597,11 @@ Please check it to make sure all words are spelled out completely, e.g. write "4
       this.studioService.textControl$.setValue(inputText);
     }
 
+    // Don't leave stale g2p error marks from a previous failed attempt
+    // showing while this new one is in flight.
+    this.erroringIndices = [];
+    this.studioService.$textInputErrors.next([]);
+
     // Show progress bar
     this.loading = true;
     this.progressMode = "query";
@@ -532,6 +635,7 @@ Please check it to make sure all words are spelled out completely, e.g. write "4
         this.fileService.readFile$(this.studioService.textControl$.value!).pipe(
           switchMap((text: string): Observable<ReadAlong> => {
             body.input = text;
+            this.lastSubmittedText = text;
             this.progressMode = "determinate";
             this.progressValue = 0;
             return this.rasService.assembleReadalong$(body);