diff --git a/docs/specs/markdown-rendering.md b/docs/specs/markdown-rendering.md
index 7ea8ea4c6..5df4b6f76 100644
--- a/docs/specs/markdown-rendering.md
+++ b/docs/specs/markdown-rendering.md
@@ -11,11 +11,12 @@ Markdown applies to the **`content` of text notes** in full, and to **list-note
 item text** in an inline-only subset (§2.1):
 
 - **Note titles are plain.** They are rendered as text everywhere.
-- **List-item Markdown renders on display surfaces only.** Note cards, mobile's
-  read-only editor and the collapsed-completed parent label render it; the
-  editable row still shows its source, because it is an always-live input with no
-  preview mode. Closing that gap is
-  [#824](https://github.com/hanzei/jot/issues/824).
+- **List-item Markdown renders everywhere on the webapp, and on display surfaces
+  on mobile.** Note cards, mobile's read-only editor and the collapsed-completed
+  parent label render it on both clients. The webapp's *editable* row renders it
+  too, swapping to source while it holds the caret (§1.2). Mobile's editable row
+  still shows source; closing that gap is
+  [#867](https://github.com/hanzei/jot/issues/867).
 
 ### 1.1 Note cards render links as text
 
@@ -35,15 +36,96 @@ colour that only signals "link" fails anyone who cannot use it. So the label
 renders exactly as the surrounding text.
 
 The open note is unaffected: the webapp's modal preview and mobile's editor both
-render live links, which is where a reader who wants the link already is. One
-consequence worth naming: because the *editable* list-item row shows source
-(above), a link typed into a list item now has no live surface on the webapp at
-all until [#824](https://github.com/hanzei/jot/issues/824) gives that row a view
-mode. Mobile still has one, in its read-only editor.
+render live links, which is where a reader who wants the link already is. An
+*editable* list-item row is the one other place a link stays inert, for a
+different reason — §1.2.
 
 Both clients render the same feature set from the same source string, so a note
 written on a phone reads identically in a browser and the other way round.
 
+### 1.2 The webapp's editable row swaps between rendered and source
+
+A list-item row on the webapp shows its Markdown rendered until it holds the
+caret, and its source for exactly as long as it does. Type `**Milk**`, move
+away, and the row reads **Milk**; click back into it and it reads `**Milk**`
+again, with the caret where you clicked.
+
+**Focused and editing are the same state.** That is the decision the rest
+follows from. Every keystroke a row handles — Tab to indent, Enter to split,
+arrows to move between rows and through the completed-item suggestions — stays
+on a real `<textarea>`, because a row that has the caret *is* a textarea. There
+is no render-mode duplicate of any of it, and no focusable non-interactive
+element in the markup for a screen reader to find or axe to flag.
+
+Four consequences, each of which is a trap avoided rather than a preference:
+
+- **The textarea is never unmounted**, only moved out of flow and faded to
+  `opacity-0`. Everything that reaches for a row imperatively — NoteModal's
+  Enter-to-split, its arrow navigation, its "add item" focus, all through the
+  `itemInputRefs` map — keeps working on a row that happens to be rendered, and
+  the height the field comes back at was measured while it was on screen rather
+  than at the moment of focus. `visibility: hidden` and `display: none` both
+  remove an element from the focus order, so neither can be used here.
+- **A row only swaps when rendering changes something.** `buy milk` renders to
+  `buy milk`, so that row keeps the always-live input it has always had. So do
+  `# not a heading` and `![alt](url)`, which §2.1 shows as literal source. Only
+  a row whose author typed markup that actually renders pays for any of this,
+  which is what keeps a plain list exactly as it was.
+- **An editable row's links are inert; a read-only row's are live.** One click
+  in an editable row already means "put the caret here", and a second meaning on
+  the same pixel has no way to resolve itself — so the label renders as ordinary
+  text and nothing looks followable, the same outcome as a card (§1.1) reached
+  by a different route. A read-only row has no caret to place, so its links work
+  and it drops the hidden textarea entirely rather than leaving a focusable copy
+  of the text behind the rendered one.
+- **Completed rows render like any other**, `~~strike~~` and all, which §2.1
+  already accepted for display surfaces. A struck word inside an already-struck
+  row is indistinguishable; that is the cost of the subset staying a subset.
+
+**A click has to place the caret itself.** The user points at character 4 of
+`buy milk` and the field holds `buy **milk**`, where that character is at 6.
+The browser maps the point to a position in the rendered DOM; `inlineSourceOffset`
+maps that back through the source spans `normalizeInlineTokens` records. Without
+it the caret lands at 0 on every click — which is what the *text-note* editor
+does today, and is tolerable there only because it happens once per note instead
+of once per row, and because the next click lands in a real textarea and
+corrects it.
+
+**Both forms must be the same height**, or every click shifts the rows below it.
+They share one class list for width, padding and wrapping, and one property that
+matters more than it looks: **both are `block`**.
+
+That is there to remove the line box from the question rather than to match it.
+A textarea is an `inline-block` by default, so it sits on a baseline and the line
+box around it reserves descender space underneath — and how much is a property of
+the platform's font and UA stylesheet. Reproducing that on a span is possible
+(`overflow` moves a baseline to the bottom margin edge, CSS 2.1 §10.8.1) and was
+the first attempt, but it only held on the font it was measured against: on
+Windows the textarea did not reserve the space and the span did, so every row
+grew about 7px the moment it lost focus. Blocks have no baseline to disagree
+about, and each box is then `lines × line-height + padding` from the same
+inherited metrics — equal on any platform.
+
+The same trap has a second entrance, inside the rendered form. An inline box is
+as tall as its `line-height` and sits around the shared baseline, so a child in a
+*different font* is offset differently from the line's strut and can push the
+line box past it. `.markdown-inline code` sets `font-mono`, which made a row
+containing `` `code` `` taller rendered than in source — by 0.6px on one font and
+who knows what on another. `leading-none` on it keeps its inline box under the
+strut on any font, and does not change the chip, since an inline element's
+background paints its content area rather than its line box.
+
+Where the two forms genuinely differ — markers moving a wrap point, so the source
+occupies more lines — the change is animated over 120ms, behind
+`prefersReducedMotion`.
+
+**A mouse drag does not collapse the row it starts on.** The grip prevents the
+default mousedown, so grabbing it never moves focus off the field. Otherwise the
+row would change height in the same tick the `PointerSensor` activates and
+dnd-kit measures, and the drag would run against a rect for a size the row no
+longer has. A keyboard drag needs no such guard: it arrives by Tab, so the row
+has already collapsed and settled before Space starts it.
+
 | | Webapp | Mobile |
 |---|---|---|
 | Lexer | `marked` (`gfm: true`, `breaks: true`) | `marked` (`gfm: true`, `breaks: true`) |
@@ -300,6 +382,9 @@ spec exists to prevent.
 | Shared conformance corpora (both test suites) | `shared/src/markdownCases.ts` |
 | Webapp node-to-HTML renderer + tag allowlist | `webapp/src/utils/markdown.ts` |
 | Webapp item renderer | `webapp/src/components/InlineMarkdown.tsx` |
+| Webapp editable-row swap (§1.2) | `webapp/src/components/SortableItem.tsx` |
+| Shared rendered-offset → source-offset map | `inlineSourceOffset` in `shared/src/inlineMarkdown.ts` |
+| Webapp click point → rendered offset | `webapp/src/utils/inlineCaret.ts` |
 | Mobile block lexing entry point | `mobile/src/utils/markdown.ts` |
 | Mobile block renderer (editor) | `mobile/src/components/Markdown.tsx` |
 | Mobile card preview renderer | `mobile/src/components/MarkdownPreview.tsx` |
@@ -462,9 +547,12 @@ The heading button stops at `###`, matching §2: a fourth press would produce an
 
 - **Interactive checkboxes.** Toggling a rendered ☐ would mean writing back into
   `content` — a much larger feature than rendering.
-- **Markdown in the *editable* list-item row.** The subset renders on display
-  surfaces (§1); giving the always-live input a view/edit swap is
-  [#824](https://github.com/hanzei/jot/issues/824).
+- **Markdown in mobile's *editable* list-item row.** The webapp's row swaps
+  between rendered and source (§1.2); mobile's still shows source, because the
+  same swap there unmounts a focused `TextInput` on every row change and the
+  software keyboard goes with it. Tracked as
+  [#867](https://github.com/hanzei/jot/issues/867), which records the decisions
+  the webapp already made so mobile only has to solve the keyboard problem.
 - **Block Markdown in list items.** Not a gap to be filled later — §2.1 explains
   why an item cannot hold it.
 - **Syntax highlighting** in code blocks. The webapp allowlist drops the
diff --git a/mobile/__tests__/ListItem.test.tsx b/mobile/__tests__/ListItem.test.tsx
index 8c8f084a3..383e9e315 100644
--- a/mobile/__tests__/ListItem.test.tsx
+++ b/mobile/__tests__/ListItem.test.tsx
@@ -83,7 +83,7 @@ describe('ListItem', () => {
 
   // A read-only row is a display surface, so it renders the inline Markdown
   // subset; an editable row is an input and keeps showing its source. Rendering
-  // in the editable row is #824.
+  // in the editable row is #867.
   it('renders markdown in the read-only row', () => {
     const { getByTestId, queryByTestId } = render(
       <ListItem text="buy **milk**" completed={false} editable={false} />,
diff --git a/mobile/src/components/ListItem.tsx b/mobile/src/components/ListItem.tsx
index 29816fe02..5eb9b0226 100644
--- a/mobile/src/components/ListItem.tsx
+++ b/mobile/src/components/ListItem.tsx
@@ -235,7 +235,9 @@ function ListItem({
           {/* A read-only row is a display surface, so it renders the inline
               Markdown subset — the same thing the note card shows for this
               item. An editable row stays a plain TextInput showing source;
-              giving it a rendered mode is #824, not this. */}
+              giving it a rendered mode is #867, not this — the webapp already
+              swaps (docs/specs/markdown-rendering.md §1.2), and that ticket
+              records why the same swap here is a keyboard problem first. */}
           {editable ? (
             <TextInput
               ref={inputRef}
diff --git a/mobile/src/utils/inlineMarkdown.ts b/mobile/src/utils/inlineMarkdown.ts
index baad8c0f4..bcbc870fa 100644
--- a/mobile/src/utils/inlineMarkdown.ts
+++ b/mobile/src/utils/inlineMarkdown.ts
@@ -22,7 +22,7 @@ export function inlineMarkdownNodes(text: string): InlineNode[] {
  *
  * A control's accessible name should identify the item the way the user knows it;
  * spelling out `**` and backticks is never useful there. This also keeps the
- * checkbox's name correct once #824 renders the editable row too.
+ * checkbox's name correct once #867 renders the editable row too.
  */
 export function inlineMarkdownToText(text: string): string {
   if (!text.trim()) return text;
diff --git a/shared/src/__tests__/inlineMarkdown.test.ts b/shared/src/__tests__/inlineMarkdown.test.ts
index e6e1e8a91..1024b955e 100644
--- a/shared/src/__tests__/inlineMarkdown.test.ts
+++ b/shared/src/__tests__/inlineMarkdown.test.ts
@@ -3,6 +3,8 @@ import { Lexer } from 'marked';
 import {
   normalizeInlineTokens,
   flattenInlineNodes,
+  inlineSourceOffset,
+  inlineRendersAsSource,
   INLINE_LEXER_OPTIONS,
   type InlineNode,
 } from '../inlineMarkdown';
@@ -15,6 +17,11 @@ function lex(markdown: string): InlineNode[] {
   return normalizeInlineTokens(Lexer.lexInline(markdown, INLINE_LEXER_OPTIONS));
 }
 
+/** The same nodes, annotated with where each one came from in `markdown`. */
+function lexWithSource(markdown: string): InlineNode[] {
+  return normalizeInlineTokens(Lexer.lexInline(markdown, INLINE_LEXER_OPTIONS), 0);
+}
+
 /**
  * Renders a node tree to a compact string so a case's expectation reads as one
  * line. `text("buy ")strong(text("milk"))` is easier to review against the spec
@@ -142,4 +149,116 @@ describe('normalizeInlineTokens', () => {
   it('turns a newline into a br node, not a text newline', () => {
     expect(summarize(lex('a\nb'))).toBe('text("a")brtext("b")');
   });
+
+  describe('source tracking', () => {
+    it('records no spans unless a source offset is passed', () => {
+      for (const node of lex('buy **milk**')) {
+        expect(node.src).toBeUndefined();
+      }
+    });
+
+    it('spans the content of a construct, not its delimiters', () => {
+      const nodes = lexWithSource('buy **milk**');
+      const text = nodes[0]!;
+      const strong = nodes[1]!;
+      expect(text.src).toEqual({ start: 0, end: 4 });
+      // The strong node covers `**milk**`; the text inside it covers `milk`.
+      expect(strong.src).toEqual({ start: 4, end: 12 });
+      expect(strong.type === 'strong' && strong.children[0]?.src).toEqual({ start: 6, end: 10 });
+    });
+
+    it('spans code content inside its backticks', () => {
+      const code = lexWithSource('run `npm ci`')[1]!;
+      expect(code.src).toEqual({ start: 5, end: 12 });
+    });
+  });
+
+  describe('inlineSourceOffset', () => {
+    /** The source offset a click at `renderedOffset` characters in should give. */
+    function offsetIn(markdown: string, renderedOffset: number): number {
+      return inlineSourceOffset(lexWithSource(markdown), renderedOffset, markdown.length);
+    }
+
+    it('maps a click inside bold text past the markers', () => {
+      // Rendered "buy milk"; the m of milk is at 4 on screen and 6 in source.
+      expect(offsetIn('buy **milk**', 0)).toBe(0);
+      expect(offsetIn('buy **milk**', 4)).toBe(6);
+      expect(offsetIn('buy **milk**', 6)).toBe(8);
+    });
+
+    it('maps a click inside code past the backtick', () => {
+      expect(offsetIn('run `npm ci`', 4)).toBe(5);
+    });
+
+    it('maps a click inside a link label past the bracket', () => {
+      expect(offsetIn('[docs](https://example.com)', 0)).toBe(1);
+      expect(offsetIn('[docs](https://example.com)', 2)).toBe(3);
+    });
+
+    it('puts a click past the end of the rendered text at the end of the source', () => {
+      expect(offsetIn('buy **milk**', 8)).toBe(12);
+      expect(offsetIn('buy **milk**', 99)).toBe(12);
+      expect(offsetIn('[docs](https://example.com)', 4)).toBe(27);
+    });
+
+    it('counts a line break as one position', () => {
+      expect(offsetIn('a\nb', 1)).toBe(1);
+      expect(offsetIn('a\nb', 2)).toBe(2);
+    });
+
+    it('keeps a click inside a construct that renders at a different length within it', () => {
+      // A literal image is rebuilt rather than echoed, so an offset inside it is
+      // approximate — but it must still land inside the construct.
+      const source = 'see ![alt](https://example.com/y.png)';
+      const offset = inlineSourceOffset(lexWithSource(source), 10, source.length);
+      expect(offset).toBeGreaterThanOrEqual(4);
+      expect(offset).toBeLessThanOrEqual(source.length);
+    });
+
+    it('falls back to the end of the source when nodes carry no spans', () => {
+      expect(inlineSourceOffset(lex('buy **milk**'), 4, 12)).toBe(12);
+    });
+  });
+
+  describe('inlineRendersAsSource', () => {
+    /** Every corpus case, split by whether rendering it changes what is shown. */
+    const RENDERS_AS_SOURCE = new Set([
+      'item-bare-domain',
+      'item-heading-literal',
+      'item-bullet-literal',
+      'item-ordered-literal',
+      'item-task-literal',
+      'item-hr-literal',
+      'item-blockquote-literal',
+      'item-table-literal',
+      'item-image',
+      'item-raw-html',
+      'item-raw-html-script',
+      'item-arithmetic',
+      'item-underscored-word',
+      'item-ampersand',
+      'item-plain',
+    ]);
+
+    for (const testCase of MARKDOWN_ITEM_CASES) {
+      it(`${testCase.id}: ${RENDERS_AS_SOURCE.has(testCase.id) ? 'shows its source' : 'renders differently'}`, () => {
+        expect(inlineRendersAsSource(lex(testCase.markdown), testCase.markdown)).toBe(
+          RENDERS_AS_SOURCE.has(testCase.id),
+        );
+      });
+    }
+
+    it('treats a line break as showing its source', () => {
+      // The textarea and the rendered form both put "b" on the second line.
+      expect(inlineRendersAsSource(lex('a\nb'), 'a\nb')).toBe(true);
+    });
+
+    it('treats a dropped escape as a rendering change', () => {
+      expect(inlineRendersAsSource(lex('\\*x\\*'), '\\*x\\*')).toBe(false);
+    });
+
+    it('treats code as a rendering change even when the characters match', () => {
+      expect(inlineRendersAsSource(lex('`a`'), '`a`')).toBe(false);
+    });
+  });
 });
diff --git a/shared/src/inlineMarkdown.ts b/shared/src/inlineMarkdown.ts
index 0261795d0..f2bac518e 100644
--- a/shared/src/inlineMarkdown.ts
+++ b/shared/src/inlineMarkdown.ts
@@ -43,20 +43,37 @@ export interface InlineMarkdownToken {
   title?: string | null;
 }
 
+/**
+ * Where a node's visible content came from in the source string, as a
+ * half-open `[start, end)` range.
+ *
+ * Present only when `normalizeInlineTokens` is called with a source offset —
+ * see that function. It spans the *content*, not the token: for `**milk**` the
+ * strong node spans the whole thing but its child text node spans just `milk`,
+ * which is what makes a rendered offset inside the child map back linearly.
+ */
+export interface InlineSourceSpan {
+  start: number;
+  end: number;
+}
+
 /**
  * A platform-neutral inline node. Deliberately smaller than marked's token
  * union: everything unsupported has already been degraded to `text` by
  * `normalizeInlineTokens`, so a renderer only has to handle these five cases and
  * cannot accidentally give an unsupported construct a rendering of its own.
+ *
+ * `src` is spelled out per member rather than intersected onto the union so
+ * that narrowing on `type` keeps working exactly as it did.
  */
 export type InlineNode =
-  | { type: 'text'; value: string }
-  | { type: 'code'; value: string }
-  | { type: 'br' }
-  | { type: 'strong'; children: InlineNode[] }
-  | { type: 'em'; children: InlineNode[] }
-  | { type: 'del'; children: InlineNode[] }
-  | { type: 'link'; href: string; children: InlineNode[] };
+  | { type: 'text'; value: string; src?: InlineSourceSpan }
+  | { type: 'code'; value: string; src?: InlineSourceSpan }
+  | { type: 'br'; src?: InlineSourceSpan }
+  | { type: 'strong'; children: InlineNode[]; src?: InlineSourceSpan }
+  | { type: 'em'; children: InlineNode[]; src?: InlineSourceSpan }
+  | { type: 'del'; children: InlineNode[]; src?: InlineSourceSpan }
+  | { type: 'link'; href: string; children: InlineNode[]; src?: InlineSourceSpan };
 
 /**
  * Lexer options both clients must pass when lexing item text.
@@ -74,8 +91,29 @@ export type InlineNode =
  */
 export const INLINE_LEXER_OPTIONS = { gfm: true, breaks: true };
 
-function textNode(value: string): InlineNode {
-  return { type: 'text', value };
+function textNode(value: string, src?: InlineSourceSpan): InlineNode {
+  return src ? { type: 'text', value, src } : { type: 'text', value };
+}
+
+/**
+ * Where a token's visible content starts inside its own `raw` — the length of
+ * the opening delimiter, in effect: 2 for `**milk**`, 1 for `` `npm ci` `` and
+ * for `[docs](url)`, 0 for plain text.
+ *
+ * Found by search rather than by knowing each construct's markers, because a
+ * construct can be spelled several ways (`**x**` and `__x__` are both strong)
+ * and marked does not report which was used. The first occurrence is the right
+ * one for every construct in the subset, since an opening delimiter is never
+ * itself part of the content it opens.
+ *
+ * Worst case — content that also appears inside the opening delimiter, as in
+ * `*[*](x)*` — this lands a few characters out. That moves a caret, which the
+ * user can see and correct; nothing downstream depends on it being exact.
+ */
+function contentOffset(raw: string, content: string): number {
+  if (!content) return 0;
+  const at = raw.indexOf(content);
+  return at === -1 ? 0 : at;
 }
 
 /**
@@ -84,8 +122,8 @@ function textNode(value: string): InlineNode {
  * formatting it had, matching how the webapp's block renderer treats the same
  * case.
  */
-function normalizeLink(token: InlineMarkdownToken): InlineNode[] {
-  const children = normalizeInlineTokens(token.tokens ?? []);
+function normalizeLink(token: InlineMarkdownToken, span: InlineSourceSpan | undefined): InlineNode[] {
+  const children = normalizeInlineTokens(token.tokens ?? [], childSourceStart(token, span));
   const href = token.href ?? '';
 
   if (!isAllowedLinkHref(href)) return children;
@@ -94,8 +132,23 @@ function normalizeLink(token: InlineMarkdownToken): InlineNode[] {
   // faithfully that is an invisible tappable region, so the target becomes its
   // own label — the same instinct behind mobile refusing markdown-it's
   // empty-alt image links (docs/specs/markdown-rendering.md §5).
-  const label = children.length > 0 ? children : [textNode(href)];
-  return [{ type: 'link', href, children: label }];
+  const label = children.length > 0 ? children : [textNode(href, span)];
+  return [span ? { type: 'link', href, children: label, src: span } : { type: 'link', href, children: label }];
+}
+
+/**
+ * The source offset the children of a container token start at, or undefined
+ * when source tracking is off. Children raws are contiguous inside the parent's
+ * raw, so the whole run is located once and each child then advances the cursor
+ * by its own length.
+ */
+function childSourceStart(
+  token: InlineMarkdownToken,
+  span: InlineSourceSpan | undefined,
+): number | undefined {
+  if (!span) return undefined;
+  const inner = (token.tokens ?? []).map((child) => child.raw).join('');
+  return span.start + contentOffset(token.raw, inner);
 }
 
 /**
@@ -130,6 +183,108 @@ export function flattenInlineNodes(nodes: InlineNode[]): string {
   return out;
 }
 
+/** How many characters of visible text a node contributes. */
+function renderedLength(node: InlineNode): number {
+  switch (node.type) {
+    case 'text':
+    case 'code':
+      return node.value.length;
+    // Counted, because a line break occupies one position for a caret just as
+    // the newline it came from does in the source.
+    case 'br':
+      return 1;
+    default:
+      return node.children.reduce((total, child) => total + renderedLength(child), 0);
+  }
+}
+
+/**
+ * Maps an offset in the *rendered* text back to an offset in the source.
+ *
+ * This is what lets a click on rendered item text open the editor with the
+ * caret where the user pointed: they clicked character 4 of `buy milk`, and the
+ * textarea behind it holds `buy **milk**`, where that character is at 6.
+ *
+ * Requires nodes produced with source tracking on (`normalizeInlineTokens(…, 0)`);
+ * without it there is nothing to map to and the source length is returned, which
+ * puts the caret at the end — the same place a swap with no mapping at all would.
+ *
+ * Exact for every construct whose visible text appears verbatim in its source,
+ * which is all of them bar two: a reconstructed literal image and an escape
+ * sequence render at a different length than they occupy, so an offset *inside*
+ * one lands within the construct rather than exactly on the character. Both are
+ * clamped to the construct, so the caret is never wildly wrong.
+ */
+export function inlineSourceOffset(
+  nodes: InlineNode[],
+  renderedOffset: number,
+  sourceLength: number,
+): number {
+  let consumed = 0;
+  // Where the last node that ended before `renderedOffset` finished, so a click
+  // past the end of everything lands after the last construct rather than at 0.
+  let lastEnd = 0;
+
+  function walk(list: InlineNode[]): number | null {
+    for (const node of list) {
+      if (node.type === 'strong' || node.type === 'em' || node.type === 'del' || node.type === 'link') {
+        const hit = walk(node.children);
+        if (hit !== null) return hit;
+      } else {
+        const length = renderedLength(node);
+        if (renderedOffset < consumed + length) {
+          const within = renderedOffset - consumed;
+          if (!node.src) return null;
+          return Math.min(node.src.start + within, node.src.end);
+        }
+        consumed += length;
+      }
+      if (node.src) lastEnd = node.src.end;
+    }
+    return null;
+  }
+
+  return walk(nodes) ?? Math.min(lastEnd || sourceLength, sourceLength);
+}
+
+/**
+ * Whether rendering `text` would show anything other than `text` itself.
+ *
+ * The webapp's editable row uses this to decide whether a row needs a rendered
+ * view at all. `buy milk` renders to `buy milk`, so swapping it for a
+ * non-editable copy of itself would be pure churn — an identical repaint, a
+ * height that has to be re-measured, and a caret that has to be mapped, all to
+ * arrive back where it started. Only a row whose author actually typed some
+ * markup pays for any of that.
+ *
+ * Deliberately compares the text rather than testing for formatting nodes: a
+ * node list can be all `text` and still differ from its source, because an
+ * escape (`\*`) renders without its backslash.
+ */
+export function inlineRendersAsSource(nodes: InlineNode[], text: string): boolean {
+  let rendered = '';
+
+  for (const node of nodes) {
+    switch (node.type) {
+      case 'text':
+        rendered += node.value;
+        break;
+      // A `br` is the one node whose rendering is not its source character for
+      // character on every client, but it stands for exactly the newline that
+      // produced it.
+      case 'br':
+        rendered += '\n';
+        break;
+      // Code renders in a different typeface, so it is a visible change even
+      // when the characters match.
+      default:
+        return false;
+    }
+  }
+
+  return rendered === text;
+}
+
 /**
  * Converts marked inline tokens into `InlineNode`s, degrading everything outside
  * the supported subset to literal text.
@@ -138,10 +293,22 @@ export function flattenInlineNodes(nodes: InlineNode[]): string {
  * renderer follows (docs/specs/markdown-rendering.md §3): unsupported syntax
  * that vanished would read as a bug rather than a limit.
  */
-export function normalizeInlineTokens(tokens: InlineMarkdownToken[]): InlineNode[] {
+export function normalizeInlineTokens(
+  tokens: InlineMarkdownToken[],
+  sourceStart?: number,
+): InlineNode[] {
   const nodes: InlineNode[] = [];
+  const tracking = sourceStart !== undefined;
+  let cursor = sourceStart ?? 0;
 
   for (const token of tokens) {
+    // The token's own span, and the span of just its visible content. They
+    // differ by the opening delimiter: `**milk**` against `milk`.
+    const span = tracking ? { start: cursor, end: cursor + token.raw.length } : undefined;
+    const contentSpan = (content: string): InlineSourceSpan | undefined =>
+      span ? { start: span.start + contentOffset(token.raw, content), end: span.end } : undefined;
+    if (span) cursor = span.end;
+
     switch (token.type) {
       case 'text':
       case 'escape': {
@@ -150,9 +317,10 @@ export function normalizeInlineTokens(tokens: InlineMarkdownToken[]): InlineNode
         // the unescaped source — escaping is the renderer's job, not this one's.
         const nested = token.tokens;
         if (nested && nested.length > 0) {
-          nodes.push(...normalizeInlineTokens(nested));
+          nodes.push(...normalizeInlineTokens(nested, childSourceStart(token, span)));
         } else {
-          nodes.push(textNode(token.text ?? ''));
+          const value = token.text ?? '';
+          nodes.push(textNode(value, contentSpan(value)));
         }
         break;
       }
@@ -160,49 +328,67 @@ export function normalizeInlineTokens(tokens: InlineMarkdownToken[]): InlineNode
       // Spelled out one per case: `token.type` is a plain string here, so a
       // shared arm would not narrow to the InlineNode literal union.
       case 'strong':
-        nodes.push({ type: 'strong', children: normalizeInlineTokens(token.tokens ?? []) });
+        nodes.push({
+          type: 'strong',
+          children: normalizeInlineTokens(token.tokens ?? [], childSourceStart(token, span)),
+          ...(span && { src: span }),
+        });
         break;
 
       case 'em':
-        nodes.push({ type: 'em', children: normalizeInlineTokens(token.tokens ?? []) });
+        nodes.push({
+          type: 'em',
+          children: normalizeInlineTokens(token.tokens ?? [], childSourceStart(token, span)),
+          ...(span && { src: span }),
+        });
         break;
 
       case 'del':
-        nodes.push({ type: 'del', children: normalizeInlineTokens(token.tokens ?? []) });
+        nodes.push({
+          type: 'del',
+          children: normalizeInlineTokens(token.tokens ?? [], childSourceStart(token, span)),
+          ...(span && { src: span }),
+        });
         break;
 
-      case 'codespan':
-        nodes.push({ type: 'code', value: token.text ?? '' });
+      case 'codespan': {
+        const value = token.text ?? '';
+        nodes.push({ type: 'code', value, ...(span && { src: contentSpan(value) }) });
         break;
+      }
 
       case 'link':
-        nodes.push(...normalizeLink(token));
+        nodes.push(...normalizeLink(token, span));
         break;
 
       case 'image':
         // Images are a gallery feature, never embedded (docs/specs/file-attachments.md).
-        nodes.push(textNode(formatLiteralImage(token.text ?? '', token.href ?? '', token.title)));
+        // Reconstructed rather than echoed, so the span covers the whole token
+        // and an offset inside it is approximate — see `inlineSourceOffset`.
+        nodes.push(textNode(formatLiteralImage(token.text ?? '', token.href ?? '', token.title), span));
         break;
 
-      case 'html':
+      case 'html': {
         // Raw HTML shows its own source. Only the tags lex as `html`; the text
         // between them stays ordinary text, which is exactly what the webapp's
         // block renderer produces for inline HTML today.
-        nodes.push(textNode(token.text ?? ''));
+        const value = token.text ?? '';
+        nodes.push(textNode(value, contentSpan(value)));
         break;
+      }
 
       case 'br':
         // Its own node rather than a "\n" text node: a literal newline collapses
         // to a space in HTML, so the webapp needs a real <br> while mobile wants
         // the newline. Neither can be derived from the other by the renderer.
-        nodes.push({ type: 'br' });
+        nodes.push({ type: 'br', ...(span && { src: span }) });
         break;
 
       default:
         // Block tokens cannot reach an inline lexer, so this is unreachable for
         // the syntax Jot supports. Emitting `raw` keeps the fallback consistent
         // with every other degradation rather than silently dropping content.
-        nodes.push(textNode(token.raw));
+        nodes.push(textNode(token.raw, span));
         break;
     }
   }
diff --git a/webapp/e2e/pages/DashboardPage.ts b/webapp/e2e/pages/DashboardPage.ts
index 5ab419444..79c361877 100644
--- a/webapp/e2e/pages/DashboardPage.ts
+++ b/webapp/e2e/pages/DashboardPage.ts
@@ -82,6 +82,20 @@ export class DashboardPage {
     return this.page.locator('[data-testid="list-item-input"]').nth(index);
   }
 
+  listItemRow(index: number): Locator {
+    return this.page.locator('[data-testid="list-item-row"]').nth(index);
+  }
+
+  /**
+   * The rendered form of the row at `index`, present only while that row is
+   * showing Markdown rather than source (docs/specs/markdown-rendering.md §1.2).
+   * Resolves to nothing for a row whose text renders as itself, so assert
+   * `toHaveCount(0)` rather than expecting it to be absent from the page.
+   */
+  listItemRendered(index: number): Locator {
+    return this.page.locator('[data-testid="list-item-rendered"]').nth(index);
+  }
+
   async focusListItem(index: number) {
     await this.listItemInput(index).focus();
   }
diff --git a/webapp/e2e/tests/keyboard-focus.spec.ts b/webapp/e2e/tests/keyboard-focus.spec.ts
index defc294ae..76fcbdb3b 100644
--- a/webapp/e2e/tests/keyboard-focus.spec.ts
+++ b/webapp/e2e/tests/keyboard-focus.spec.ts
@@ -248,6 +248,71 @@ test.describe('Keyboard drag and drop', () => {
     await dashboardPage.expectListItemValue(0, 'beta');
     await dashboardPage.expectListItemValue(1, 'alpha');
   });
+
+  test('reorders a row that is showing rendered Markdown', async ({ authenticatedUser, page, dashboardPage }) => {
+    void authenticatedUser;
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('DnD Rendered Note', ['**alpha**', 'beta']);
+    await dashboardPage.openNote('DnD Rendered Note');
+
+    // An unfocused row shows its rendered form, so the row dnd-kit measures is
+    // the rendered one. Reordering has to work from there, not just from the
+    // source form a freshly typed row happens to be in.
+    await expect(dashboardPage.listItemRendered(0)).toBeVisible();
+    await keyboardReorder(page, page.getByRole('button', { name: 'Reorder item' }).first(), 'ArrowDown');
+
+    await dashboardPage.expectListItemValue(0, 'beta');
+    await dashboardPage.expectListItemValue(1, '**alpha**');
+  });
+});
+
+/**
+ * The row-level view/edit swap (docs/specs/markdown-rendering.md §1.2) makes
+ * "focused" and "editing" the same state, which is what keeps every keystroke
+ * handler on a real textarea. These pin that: the keys that move between rows
+ * have to keep working when the rows they move to and from are rendered.
+ */
+test.describe('List rows with rendered Markdown', () => {
+  test('splits and navigates between rendered rows with the keyboard', async ({ authenticatedUser, page, dashboardPage }) => {
+    void authenticatedUser;
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Rendered Keys Note', ['**alpha**', '**beta**']);
+    await dashboardPage.openNote('Rendered Keys Note');
+
+    // Both rows start rendered, and focusing one is what turns it back into a
+    // field — there is no separate "enter edit mode" step to forget.
+    await expect(page.getByTestId('list-item-rendered')).toHaveCount(2);
+    await dashboardPage.focusListItem(0);
+    await expect(page.getByTestId('list-item-rendered')).toHaveCount(1);
+
+    // Arrow down moves to the next row, which becomes a field in turn.
+    await page.keyboard.press('ArrowDown');
+    await dashboardPage.expectListItemFocused(1);
+    await expect(page.getByTestId('list-item-rendered')).toHaveCount(1);
+
+    // Enter at the end appends a row and focuses it; the row left behind
+    // renders again because it is no longer the focused one.
+    await page.keyboard.press('End');
+    await page.keyboard.press('Enter');
+    await dashboardPage.expectListItemCount(3);
+    await dashboardPage.expectListItemFocused(2);
+    await expect(page.getByTestId('list-item-rendered')).toHaveCount(2);
+  });
+
+  test('indents a rendered row with Tab', async ({ authenticatedUser, page, dashboardPage }) => {
+    void authenticatedUser;
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Rendered Indent Note', ['**parent**', '**child**']);
+    await dashboardPage.openNote('Rendered Indent Note');
+
+    const childRow = dashboardPage.listItemRow(1);
+    const before = (await childRow.boundingBox())!.x;
+
+    await dashboardPage.focusListItem(1);
+    await page.keyboard.press('Tab');
+
+    await expect.poll(async () => (await childRow.boundingBox())!.x).toBeGreaterThan(before);
+  });
 });
 
 test.describe('Toast announcements', () => {
diff --git a/webapp/e2e/tests/markdown.spec.ts b/webapp/e2e/tests/markdown.spec.ts
index e8d982e62..c0e9dc631 100644
--- a/webapp/e2e/tests/markdown.spec.ts
+++ b/webapp/e2e/tests/markdown.spec.ts
@@ -177,10 +177,20 @@ test.describe('Markdown note editing', () => {
     await expect(card).toContainText('call');
     await expect(card.locator('a')).toHaveCount(0);
 
-    // Reopening the note shows the raw source in the editable row — rendering
-    // there is #824, and this assertion is what will need updating when it lands.
+    // The editable row renders Markdown now (§1.2), and these three cases show
+    // the two halves of that. Literal source renders as itself, so those rows
+    // never swap at all and the field is what is on screen.
     await dashboardPage.openNote('Literal');
     await dashboardPage.expectListItemValue(0, '# not a heading');
+    await expect(dashboardPage.listItemRow(0).getByTestId('list-item-rendered')).toHaveCount(0);
+    await expect(dashboardPage.listItemRow(1).getByTestId('list-item-rendered')).toHaveCount(0);
+
+    // A link Jot will not follow does not: it keeps its label and loses its
+    // target (§3), so the rendered form differs from the source and the row
+    // swaps like any other. The `tel:` URL is in the field, one click away.
+    await expect(dashboardPage.listItemRow(2).getByTestId('list-item-rendered')).toHaveText('call');
+    await expect(dashboardPage.listItemRow(2).locator('a')).toHaveCount(0);
+    await dashboardPage.expectListItemValue(2, '[call](tel:+15550100)');
   });
 
   test('two-step Escape dismiss: first Escape collapses to preview, second Escape closes modal', async ({ page, dashboardPage }) => {
@@ -336,3 +346,124 @@ test.describe('Markdown note editing', () => {
     await expect(noteEditorPage.toolbar()).toHaveCount(0);
   });
 });
+
+/**
+ * The view/edit swap on a list-item row (docs/specs/markdown-rendering.md §1.2).
+ *
+ * This is the half the unit tests cannot reach: whether a click lands the caret
+ * where the user pointed, and whether the row keeps its size across the swap.
+ * Both need a real layout engine.
+ */
+test.describe('Markdown in list-item rows', () => {
+  test.beforeEach(async ({ authenticatedUser }) => {
+    void authenticatedUser;
+  });
+
+  test('renders an item when it loses focus and shows source when clicked', async ({ dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Render Row Note', ['buy **milk**']);
+    await dashboardPage.openNote('Render Row Note');
+
+    // Unfocused: the markers are gone and the word is really bold.
+    await expect(dashboardPage.listItemRendered(0)).toBeVisible();
+    await expect(dashboardPage.listItemRendered(0).locator('strong')).toHaveText('milk');
+    await expect(dashboardPage.listItemRendered(0)).toHaveText('buy milk');
+
+    // Clicking it hands over to the field, which holds the source.
+    await dashboardPage.listItemRendered(0).click();
+    await expect(dashboardPage.listItemInput(0)).toBeFocused();
+    await expect(dashboardPage.listItemRendered(0)).toHaveCount(0);
+    await dashboardPage.expectListItemValue(0, 'buy **milk**');
+
+    // And moving away renders it again — the acceptance criterion on #824.
+    await dashboardPage.listItemInput(0).blur();
+    await expect(dashboardPage.listItemRendered(0)).toBeVisible();
+  });
+
+  test('puts the caret where the rendered text was clicked', async ({ dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Caret Note', ['buy **milk** today']);
+    await dashboardPage.openNote('Caret Note');
+
+    const caret = () => dashboardPage.listItemInput(0).evaluate(
+      (el: HTMLTextAreaElement) => el.selectionStart,
+    );
+
+    // Clicking the middle of the bold word must land inside `milk` in the
+    // source — offsets 6..10 of `buy **milk** today`. Without the mapping this
+    // is 0 (a bare focus()) or 18 (the end), so the assertion has real teeth.
+    await dashboardPage.listItemRendered(0).locator('strong').click();
+    expect(await caret()).toBeGreaterThanOrEqual(6);
+    expect(await caret()).toBeLessThanOrEqual(10);
+
+    // And a click before the markers stays before them.
+    await dashboardPage.listItemInput(0).blur();
+    await dashboardPage.listItemRendered(0).click({ position: { x: 2, y: 8 } });
+    expect(await caret()).toBeLessThan(4);
+  });
+
+  test('keeps the row the same height across the swap', async ({ dashboardPage }) => {
+    await dashboardPage.goto();
+    // The code row is here because it is the one that regressed: `<code>` sets
+    // its own font, and an inline box in a different font sits at a different
+    // offset around the shared baseline, so it grew the rendered line box past
+    // the strut while the all-one-font source stayed put. Sub-pixel on some
+    // fonts, visible on others — a row that only jumps for some readers is
+    // exactly what a test has to hold down.
+    await dashboardPage.createListNote('Height Note', [
+      'buy **milk**',
+      'run `npm test` first',
+      'second item',
+    ]);
+    await dashboardPage.openNote('Height Note');
+
+    for (const index of [0, 1]) {
+      const row = dashboardPage.listItemRow(index);
+      const renderedHeight = (await row.boundingBox())!.height;
+
+      await dashboardPage.listItemRendered(index).click();
+      await expect(dashboardPage.listItemInput(index)).toBeFocused();
+      const sourceHeight = (await row.boundingBox())!.height;
+
+      // Both forms are one line here, and they carry the same padding and
+      // wrapping, so the row must not resize at all. A regression in
+      // TEXT_LAYOUT_CLASSES, or in the inline styling of a rendered child,
+      // shows up here as a fraction of a pixel either way.
+      expect(Math.abs(sourceHeight - renderedHeight), `row ${index}`).toBeLessThan(0.5);
+      await dashboardPage.listItemInput(index).blur();
+    }
+  });
+
+  test('leaves an item with no Markdown as a live field', async ({ dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Plain Note', ['buy milk']);
+    await dashboardPage.openNote('Plain Note');
+
+    // Nothing to render that the field is not already showing, so the row never
+    // swaps and typing into it is exactly what it was before #824.
+    await expect(dashboardPage.listItemRendered(0)).toHaveCount(0);
+    await expect(dashboardPage.listItemInput(0)).toBeVisible();
+  });
+
+  test('renders a completed item, line-through and all', async ({ dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Completed Note', ['buy **milk**']);
+    await dashboardPage.openNote('Completed Note');
+
+    await dashboardPage.listItemRow(0)
+      .getByRole('checkbox', { name: 'Item completed' }).check();
+
+    await expect(dashboardPage.listItemRendered(0).locator('strong')).toHaveText('milk');
+  });
+
+  test('does not make a link out of an editable row', async ({ dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Link Row Note', ['see [docs](https://example.com)']);
+    await dashboardPage.openNote('Link Row Note');
+
+    // One click on the row already means "put the caret here" — see §1.2. The
+    // label survives, the target does not, and nothing looks followable.
+    await expect(dashboardPage.listItemRendered(0)).toHaveText('see docs');
+    await expect(dashboardPage.listItemRendered(0).locator('a')).toHaveCount(0);
+  });
+});
diff --git a/webapp/src/components/SortableItem.tsx b/webapp/src/components/SortableItem.tsx
index a9716a82b..028bd61c5 100644
--- a/webapp/src/components/SortableItem.tsx
+++ b/webapp/src/components/SortableItem.tsx
@@ -1,10 +1,13 @@
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useState, useEffect, useLayoutEffect, useMemo, useRef, useCallback } from 'react';
 import { X, UserPlus, GripVertical } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { VALIDATION, type User, type Collaborator } from '@jot/shared';
 import LetterAvatar from '@/components/LetterAvatar';
 import AssigneePicker from '@/components/AssigneePicker';
 import { indentOf, type ListItem } from '@/utils/noteItems';
+import { renderInlineItem } from '@/utils/markdown';
+import { sourceOffsetAtPoint } from '@/utils/inlineCaret';
+import { canAnimate } from '@/utils/motion';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
@@ -15,6 +18,28 @@ import { CSS } from '@dnd-kit/utilities';
 export const ROW_REVEAL_CLASSES =
   'opacity-0 pointer-events-none group-hover/item:opacity-100 group-hover/item:pointer-events-auto group-focus-within/item:opacity-100 group-focus-within/item:pointer-events-auto';
 
+// Everything that decides how much vertical space a line of item text takes:
+// width, padding, and how it wraps. The rendered view and the textarea it stands
+// in for must carry all of it, or the row changes height on the swap for no
+// reason other than the two forms being laid out differently.
+//
+// `block` is the one that is not obvious, and it is here to take the line box
+// out of the question rather than to match it. A textarea is an `inline-block`
+// by default, so it sits on a baseline and the line box around it reserves
+// descender space underneath — and *how much* is a property of the platform's
+// font and its UA stylesheet, not of anything in this file. Reproducing that on
+// a span is possible (`overflow` moves a baseline to the bottom margin edge,
+// CSS 2.1 §10.8.1) and was the first fix here, but it only held on the font it
+// was measured against: on Windows the textarea did not reserve the space and
+// the span did, so every row grew ~7px the moment it lost focus.
+//
+// Blocks have no baseline to disagree about. Both boxes are then `lines ×
+// line-height + padding` from the same inherited metrics, which is equal by
+// construction on any platform. It also costs each row the descender space it
+// used to carry, so list rows are that much tighter than before — accidental
+// spacing, not designed, and now gone in both states rather than one.
+const TEXT_LAYOUT_CLASSES = 'block w-full pt-0 pb-1 pl-1 pr-0 whitespace-pre-wrap break-words';
+
 export interface SortableItemProps {
   id: string;
   index: number;
@@ -47,8 +72,17 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
   const [showAssigneePicker, setShowAssigneePicker] = useState(false);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+  // Focused and editing are the same state, deliberately: the row shows its
+  // Markdown rendered until you put the caret in it, and shows source for
+  // exactly as long as the caret is there. That is what keeps every keystroke
+  // handler below on a real textarea, with no render-mode duplicate of Tab,
+  // Enter or the suggestion arrows — and no focusable non-interactive element
+  // for a screen reader or axe to trip over.
+  const [isEditing, setIsEditing] = useState(false);
   const suggestionsRef = useRef<HTMLDivElement>(null);
   const listItemTextRef = useRef<HTMLTextAreaElement | null>(null);
+  const renderedRef = useRef<HTMLSpanElement>(null);
+  const textColumnRef = useRef<HTMLDivElement>(null);
   const closeAssigneePicker = useCallback(() => setShowAssigneePicker(false), []);
   const {
     attributes,
@@ -72,6 +106,12 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
   const assignedUser = item.assignedTo ? usersById?.get(item.assignedTo) : undefined;
   const showAssignUI = isShared && collaborators && collaborators.length > 0 && onAssignItem;
   const placeholder = item.text ? '' : t('note.itemPlaceholder');
+  // Kept as one string shared by both forms of the row rather than reasoned
+  // about twice: whatever a completed row looks like today, the rendered view
+  // and the textarea have to look the same as each other.
+  const textToneClasses = `text-gray-900 dark:text-white ${
+    isCompleted ? 'line-through text-gray-500 dark:text-gray-400' : ''
+  }`;
   const autoResizeListItemText = useCallback((textarea: HTMLTextAreaElement | null) => {
     if (!textarea) return;
     textarea.style.height = 'auto';
@@ -88,6 +128,69 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
     autoResizeListItemText(listItemTextRef.current);
   }, [item.text, autoResizeListItemText]);
 
+  // Links are live exactly where there is no caret to place. A read-only row is
+  // a display surface like the note card, so its links work; an editable row's
+  // do not, because one click there already means "put the caret here" and a
+  // second meaning on the same pixel has no way to resolve itself. See
+  // docs/specs/markdown-rendering.md §1.2.
+  const rendered = useMemo(
+    () => renderInlineItem(item.text, { links: readOnly }),
+    [item.text, readOnly],
+  );
+
+  // A row only swaps when rendering actually changes what is on screen. `buy
+  // milk` renders to `buy milk`, so a list with no Markdown in it keeps the
+  // always-live textarea it has always had, and pays for none of this.
+  const showRendered = rendered.formatted && (readOnly || !isEditing);
+  // Nothing to place a caret with, and no editing to return to: the bin's rows
+  // drop the textarea entirely rather than hiding a focusable copy of the text
+  // behind the rendered one, which would be both an extra tab stop and a second
+  // announcement of the same item.
+  const showTextarea = !(readOnly && showRendered);
+
+  // Height is measured before the swap and animated to afterwards. The two
+  // forms of a row wrap at different points once markers are involved, so a row
+  // can genuinely change height — and an unannounced change moves every row
+  // below it out from under the pointer.
+  const heightBeforeSwapRef = useRef<number | null>(null);
+  const captureSwapHeight = useCallback(() => {
+    heightBeforeSwapRef.current = textColumnRef.current?.getBoundingClientRect().height ?? null;
+  }, []);
+
+  const wasShowingRendered = useRef(showRendered);
+  useLayoutEffect(() => {
+    if (wasShowingRendered.current === showRendered) return;
+    wasShowingRendered.current = showRendered;
+
+    const from = heightBeforeSwapRef.current;
+    heightBeforeSwapRef.current = null;
+    const column = textColumnRef.current;
+    if (from === null || !canAnimate(column)) return;
+
+    const to = column.getBoundingClientRect().height;
+    // Sub-pixel differences are the common case — same content, same wrap — and
+    // animating those is a frame of work to move nothing.
+    if (Math.abs(to - from) < 1) return;
+    column.animate([{ height: `${from}px` }, { height: `${to}px` }], {
+      duration: 120,
+      easing: 'ease-out',
+    });
+  }, [showRendered]);
+
+  // Entering edit mode from a click has to place the caret itself: the browser
+  // would put it where the point falls in the *source*, and the user pointed at
+  // the rendered text.
+  const editFromPoint = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {
+    const textarea = listItemTextRef.current;
+    const container = renderedRef.current;
+    if (!textarea || !container) return;
+    e.preventDefault();
+    captureSwapHeight();
+    const offset = sourceOffsetAtPoint(container, rendered.nodes, item.text, e.clientX, e.clientY);
+    textarea.focus();
+    textarea.setSelectionRange(offset, offset);
+  }, [captureSwapHeight, item.text, rendered.nodes]);
+
   const suggestions = useMemo(() => {
     const trimmed = item.text.trim();
     if (!trimmed) return [];
@@ -157,6 +260,16 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
           title={t('note.reorderItem')}
           {...attributes}
           {...listeners}
+          // Grabbing the grip must not move focus off the row's textarea. If it
+          // did, the row would collapse to its rendered form on mousedown —
+          // changing its height in the same tick the PointerSensor activates and
+          // dnd-kit measures, so the drag would run against a rect for a height
+          // the row no longer has. Preventing the default keeps the caret where
+          // it was and the row the size dnd-kit measured.
+          //
+          // Only the mouse path needs this. A keyboard drag arrives by Tab, so
+          // the row has already collapsed and settled before Space starts it.
+          onMouseDown={(e) => e.preventDefault()}
           // gray-500, not gray-400: the note's colour is applied to the whole
           // modal panel, and the grip is a graphical control, so it needs 3:1
           // against the worst swatch (WCAG 1.4.11). gray-400 manages 1.8 there.
@@ -177,7 +290,8 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
         className={`h-4 w-4 text-blue-600 rounded mt-0.5 flex-shrink-0 ${readOnly ? 'cursor-default' : ''}`}
       />
       <div className="flex flex-1 items-start min-w-0">
-        <div className="relative min-w-0 flex-1">
+        <div ref={textColumnRef} className="relative min-w-0 flex-1">
+          {showTextarea && (
           <textarea
             data-testid="list-item-input"
             placeholder={placeholder}
@@ -185,8 +299,19 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
             autoCapitalize="sentences"
             readOnly={readOnly}
             aria-readonly={readOnly}
-            className={`w-full pt-0 pb-1 pl-1 pr-0 bg-transparent border-none outline-none min-w-0 resize-none overflow-hidden whitespace-pre-wrap break-words placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white ${
-              isCompleted ? 'line-through text-gray-500 dark:text-gray-400' : ''
+            // Never unmounted while the row is editable, only moved out of flow
+            // and faded out. Everything that reaches for a row imperatively —
+            // NoteModal's Enter-to-split, arrow navigation and "add item" focus,
+            // all of which go through `inputRef` — keeps working on a row that
+            // happens to be showing its rendered form, and the height the
+            // textarea comes up at was measured while it was on screen rather
+            // than at the moment of focus.
+            //
+            // `opacity-0` rather than `invisible` or `hidden`: both of those
+            // take an element out of the focus order, and `.focus()` on one
+            // silently does nothing.
+            className={`${TEXT_LAYOUT_CLASSES} bg-transparent border-none outline-none min-w-0 resize-none overflow-hidden placeholder-gray-500 dark:placeholder-gray-400 ${textToneClasses} ${
+              showRendered ? 'absolute top-0 left-0 opacity-0 pointer-events-none' : ''
             }`}
             value={item.text}
             onInput={(e) => autoResizeListItemText(e.currentTarget)}
@@ -196,11 +321,17 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
               setSelectedSuggestionIndex(-1);
             }}
             onFocus={readOnly ? undefined : () => {
+              captureSwapHeight();
+              setIsEditing(true);
               if (suggestions.length > 0) setShowSuggestions(true);
             }}
             onBlur={(e) => {
               const related = e.relatedTarget as Node | null;
+              // Focus moving into the dropdown is still editing this row, so the
+              // row must not collapse out from under the option being clicked.
               if (suggestionsRef.current?.contains(related)) return;
+              captureSwapHeight();
+              setIsEditing(false);
               // Delay to allow touch tap on suggestion to fire click first
               setTimeout(() => {
                 setShowSuggestions(false);
@@ -276,6 +407,23 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
             onPaste={readOnly ? undefined : (e) => onPaste?.(index, e)}
             ref={setListItemTextRef}
           />
+          )}
+          {showRendered && (
+            <span
+              ref={renderedRef}
+              data-testid="list-item-rendered"
+              // The textarea behind it is the row's real control and carries the
+              // accessible name and the value, so this is decoration for anyone
+              // not looking at it — except on a read-only row, where there is no
+              // textarea and these links are the only way to reach the targets.
+              aria-hidden={showTextarea ? true : undefined}
+              onMouseDown={showTextarea ? editFromPoint : undefined}
+              className={`markdown-inline ${TEXT_LAYOUT_CLASSES} ${textToneClasses} ${
+                showTextarea ? 'cursor-text' : ''
+              }`}
+              dangerouslySetInnerHTML={{ __html: rendered.html }}
+            />
+          )}
           {suggestionsVisible && !isCompleted && !readOnly && (
             <div
               ref={suggestionsRef}
diff --git a/webapp/src/components/__tests__/SortableItem.test.tsx b/webapp/src/components/__tests__/SortableItem.test.tsx
index e919e16ab..4c7f9c5f2 100644
--- a/webapp/src/components/__tests__/SortableItem.test.tsx
+++ b/webapp/src/components/__tests__/SortableItem.test.tsx
@@ -1,7 +1,7 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { type ReactNode } from 'react';
-import SortableItem from '../SortableItem';
+import SortableItem, { type SortableItemProps } from '../SortableItem';
 import type { ListItem } from '@/utils/noteItems';
 
 vi.mock('@dnd-kit/sortable', () => ({
@@ -135,3 +135,111 @@ describe('SortableItem suggestion highlight', () => {
     expect(input()).not.toHaveAttribute('aria-activedescendant');
   });
 });
+
+/**
+ * The view/edit swap (docs/specs/markdown-rendering.md §1.2).
+ *
+ * These assert the *state machine* — which of the two forms is on screen, and
+ * that the textarea survives the swap. What they cannot assert is the part that
+ * needs a layout engine: the caret offset a click maps to, and the height the
+ * row settles at. Both are covered in webapp/e2e/tests/markdown.spec.ts.
+ */
+describe('SortableItem rendered/source swap', () => {
+  function renderRow(text: string, props: Partial<SortableItemProps> = {}) {
+    return render(
+      <SortableItem
+        id="item-1"
+        index={0}
+        item={{ ...item, text }}
+        onUpdateListItem={vi.fn().mockResolvedValue(undefined)}
+        onRemoveListItem={vi.fn()}
+        {...props}
+      />
+    );
+  }
+
+  const renderedView = () => screen.queryByTestId('list-item-rendered');
+  const textarea = () => screen.queryByTestId('list-item-input');
+
+  it('shows the rendered form of an unfocused row', () => {
+    renderRow('buy **milk**');
+
+    expect(renderedView()).toBeInTheDocument();
+    expect(renderedView()!.innerHTML).toBe('buy <strong>milk</strong>');
+    // The source is still in the field behind it, which is what every
+    // imperative focus path in NoteModal reaches for.
+    expect(textarea()).toHaveValue('buy **milk**');
+  });
+
+  it('shows source while the row is focused and renders again on blur', () => {
+    renderRow('buy **milk**');
+
+    fireEvent.focus(textarea()!);
+    expect(renderedView()).not.toBeInTheDocument();
+
+    fireEvent.blur(textarea()!);
+    expect(renderedView()).toBeInTheDocument();
+  });
+
+  it('leaves a row with no Markdown in it alone', () => {
+    // Nothing to show that the textarea is not already showing, so the row
+    // keeps the always-live input it had before any of this.
+    renderRow('buy milk');
+    expect(renderedView()).not.toBeInTheDocument();
+  });
+
+  it('leaves block syntax and literal source alone too', () => {
+    // Both render as themselves (§2.1), so neither is worth a swap.
+    renderRow('# not a heading');
+    expect(renderedView()).not.toBeInTheDocument();
+
+    cleanup();
+    renderRow('see ![alt](https://example.com/y.png)');
+    expect(renderedView()).not.toBeInTheDocument();
+  });
+
+  it('renders an empty row as its placeholder, not as an empty span', () => {
+    renderRow('');
+    expect(renderedView()).not.toBeInTheDocument();
+    expect(textarea()).toHaveAttribute('placeholder', 'List item...');
+  });
+
+  it('moves focus into the field when the rendered form is clicked', () => {
+    renderRow('buy **milk**');
+
+    fireEvent.mouseDown(renderedView()!);
+
+    expect(textarea()).toHaveFocus();
+    expect(renderedView()).not.toBeInTheDocument();
+  });
+
+  it('keeps rendering a completed row', () => {
+    // Decision on #824 question 7: completed rows render, and the collision
+    // between the row's line-through and ~~strike~~ is accepted (§2.1).
+    renderRow('~~buy~~ milk', { isCompleted: true });
+    expect(renderedView()!.innerHTML).toBe('<del>buy</del> milk');
+  });
+
+  it('drops the hidden field entirely on a read-only row', () => {
+    // No caret to place, so a focusable copy of the text behind the rendered
+    // one would be an extra tab stop announcing the same item twice.
+    renderRow('buy **milk**', { readOnly: true });
+
+    expect(renderedView()).toBeInTheDocument();
+    expect(textarea()).not.toBeInTheDocument();
+    expect(renderedView()).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('links only on the row that has no caret to place', () => {
+    renderRow('[docs](https://example.com)', { readOnly: true });
+    expect(renderedView()!.querySelector('a')).not.toBeNull();
+
+    cleanup();
+    renderRow('[docs](https://example.com)');
+    // Editable: one click already means "put the caret here", so the label
+    // renders as text and nothing on the row looks followable.
+    expect(renderedView()!.querySelector('a')).toBeNull();
+    expect(renderedView()!.textContent).toBe('docs');
+    expect(renderedView()).toHaveAttribute('aria-hidden', 'true');
+  });
+});
diff --git a/webapp/src/index.css b/webapp/src/index.css
index 1929f6756..48aaf25b3 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -184,8 +184,18 @@ body {
      Links are blue-600 rather than the blue-500 above: item text renders on note
      cards, which carry the note's colour, and blue-500 does not hold 4.5:1
      against the lighter swatches. This is the shade LinkText used here before. */
+  /* `leading-none` is load-bearing, and not for looks. An inline box is as tall
+     as its line-height, positioned around the shared baseline — so a child in a
+     different font sits at a different offset than the line's strut and can push
+     the line box taller than the strut alone. Here that made an item row with
+     `code` in it taller *rendered* than the same row showing its source, since
+     the source is one font throughout: a visible jump on click, and one whose
+     size depends on which mono font the reader has (docs/specs/markdown-rendering.md
+     §1.2). A line-height under the strut's cannot grow the line box on any font.
+     It does not change the chip: an inline element's background paints its
+     content area, which is derived from the font, not from line-height. */
   .markdown-inline code {
-    @apply font-mono bg-black/5 dark:bg-white/10 rounded px-1 text-[0.9em];
+    @apply font-mono bg-black/5 dark:bg-white/10 rounded px-1 text-[0.9em] leading-none;
   }
   .markdown-inline a {
     @apply text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300;
diff --git a/webapp/src/utils/__tests__/inlineCaret.test.ts b/webapp/src/utils/__tests__/inlineCaret.test.ts
new file mode 100644
index 000000000..ead5fa62c
--- /dev/null
+++ b/webapp/src/utils/__tests__/inlineCaret.test.ts
@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest';
+import { renderedOffsetOf, sourceOffsetAtPoint } from '../inlineCaret';
+import { renderInlineItem } from '../markdown';
+
+// Only the DOM-position half is testable here: jsdom has no layout, so it
+// implements neither caretPositionFromPoint nor caretRangeFromPoint and there
+// is no point to resolve. The point-to-position half is exercised for real in
+// webapp/e2e/tests/markdown.spec.ts.
+
+/** A container holding the rendered form of `text`, as the row renders it. */
+function renderedContainer(text: string): HTMLElement {
+  const span = document.createElement('span');
+  span.innerHTML = renderInlineItem(text, { links: false }).html;
+  document.body.appendChild(span);
+  return span;
+}
+
+/** The text node at `index` in document order within `container`. */
+function textNodeAt(container: HTMLElement, index: number): Text {
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let found: Node | null = walker.nextNode();
+  for (let i = 0; i < index; i++) found = walker.nextNode();
+  if (!found) throw new Error(`no text node at index ${index}`);
+  return found as Text;
+}
+
+describe('renderedOffsetOf', () => {
+  it('counts the text before a position in a later element', () => {
+    // "buy <strong>milk</strong>" — the m of milk is the 5th character shown.
+    const container = renderedContainer('buy **milk**');
+    expect(renderedOffsetOf(container, textNodeAt(container, 1), 0)).toBe(4);
+    expect(renderedOffsetOf(container, textNodeAt(container, 1), 2)).toBe(6);
+  });
+
+  it('counts a line break as one character', () => {
+    // A <br> contributes no text node, so a walk that only counted text would
+    // put everything after the break one short — and inlineSourceOffset counts
+    // the br node as one, so the two would disagree.
+    const container = renderedContainer('a\nb');
+    expect(container.innerHTML).toBe('a<br>b');
+    expect(renderedOffsetOf(container, textNodeAt(container, 1), 0)).toBe(2);
+  });
+
+  it('resolves an element position against its children, not as a total', () => {
+    // The browser returns an element position when the point falls between
+    // children. `buy <strong>milk</strong>` has two, so offset 1 is the gap
+    // before the <strong> — 4 characters in, not the 8 of the whole container.
+    const container = renderedContainer('buy **milk**');
+    expect(renderedOffsetOf(container, container, 0)).toBe(0);
+    expect(renderedOffsetOf(container, container, 1)).toBe(4);
+    // Past the last child: everything precedes it. This is the common one, a
+    // click past the end of the line.
+    expect(renderedOffsetOf(container, container, 2)).toBe(8);
+  });
+
+  it('resolves an element position inside a nested element', () => {
+    const container = renderedContainer('buy **milk** today');
+    const strong = container.querySelector('strong')!;
+    expect(renderedOffsetOf(container, strong, 0)).toBe(4);
+    expect(renderedOffsetOf(container, strong, 1)).toBe(8);
+  });
+
+  it('rejects a node from outside the container', () => {
+    const container = renderedContainer('buy **milk**');
+    const stray = document.createElement('span');
+    expect(renderedOffsetOf(container, stray, 0)).toBeNull();
+  });
+});
+
+describe('sourceOffsetAtPoint', () => {
+  it('falls back to the end of the source when the browser cannot resolve a point', () => {
+    // jsdom implements neither caret API, which is the same position a browser
+    // that fails to resolve the point leaves us in: no worse than a swap with
+    // no mapping at all.
+    const text = 'buy **milk**';
+    const { nodes } = renderInlineItem(text, { links: false });
+    expect(sourceOffsetAtPoint(renderedContainer(text), nodes, text, 10, 10)).toBe(text.length);
+  });
+});
diff --git a/webapp/src/utils/inlineCaret.ts b/webapp/src/utils/inlineCaret.ts
new file mode 100644
index 000000000..ce06bdb9d
--- /dev/null
+++ b/webapp/src/utils/inlineCaret.ts
@@ -0,0 +1,121 @@
+import { inlineSourceOffset, type InlineNode } from '@jot/shared';
+
+/**
+ * Turning a click on rendered list-item text into a caret position in the
+ * source behind it.
+ *
+ * The editable row shows rendered Markdown until it is focused, so a click has
+ * to answer a question a plain textarea answers for itself: the user pointed at
+ * character 4 of `buy milk`, and the field holds `buy **milk**`, where that
+ * character is at 6. Without this the caret lands at 0 on every click — which is
+ * what the text-note editor does today, and is tolerable there only because it
+ * happens once per note rather than once per row.
+ *
+ * Two halves, kept separate because only one of them can be tested without a
+ * layout engine: the browser maps a point to a DOM position, and this module
+ * maps that position to an offset in the source.
+ */
+
+/**
+ * `caretPositionFromPoint` is the standard spelling and `caretRangeFromPoint`
+ * the WebKit one. Declared structurally rather than relied on from lib.dom, so
+ * that a browser missing both is a plain feature test rather than a type error.
+ */
+interface CaretPositionSource {
+  caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;
+  caretRangeFromPoint?: (x: number, y: number) => { startContainer: Node; startOffset: number } | null;
+}
+
+/**
+ * The first node in document order that a DOM position has *not* consumed, or
+ * null when the position is past everything inside `root`.
+ *
+ * A position is (node, offset), and offset means two different things depending
+ * on the node: a character index in a text node, a *child index* in an element.
+ * Resolving both to "the next unconsumed node" is what lets one traversal below
+ * measure either kind.
+ */
+function boundaryNodeOf(root: Node, node: Node, offset: number): Node | null {
+  if (node.nodeType === Node.TEXT_NODE) return node;
+  if (offset < node.childNodes.length) return node.childNodes[offset] ?? null;
+
+  // Past the last child: everything inside `node` is consumed, so the boundary
+  // is whatever follows its subtree.
+  for (let current: Node | null = node; current && current !== root; current = current.parentNode) {
+    if (current.nextSibling) return current.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * How many characters of visible text precede (`node`, `offset`) within
+ * `container`, or null if that position is not inside it.
+ *
+ * Counts a `<br>` as one character so the total lines up with what
+ * `inlineSourceOffset` counts for a `br` node — the two walks have to agree on
+ * what a line break costs or every offset after the first newline is wrong.
+ *
+ * The browser hands back an *element* position whenever the point falls between
+ * children rather than inside text — past the end of a line, most often, but
+ * also in the gap before a `<strong>`. Its offset is a child index, so it has
+ * to be resolved against the children rather than added to a character count or
+ * ignored: (container, 1) on `buy <strong>milk</strong>` means 4, not 8.
+ */
+export function renderedOffsetOf(container: HTMLElement, node: Node, offset: number): number | null {
+  if (!container.contains(node)) return null;
+
+  const boundary = boundaryNodeOf(container, node, offset);
+  const walker = container.ownerDocument.createTreeWalker(
+    container,
+    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
+  );
+
+  let consumed = 0;
+  for (let current = walker.nextNode(); current !== null; current = walker.nextNode()) {
+    if (current === boundary) {
+      return node.nodeType === Node.TEXT_NODE ? consumed + offset : consumed;
+    }
+    if (current.nodeType === Node.TEXT_NODE) {
+      consumed += (current as Text).length;
+    } else if ((current as Element).tagName === 'BR') {
+      consumed += 1;
+    }
+  }
+
+  // Either the position is past everything (`boundary` is null, which is how a
+  // click below the last line arrives) or the boundary is a node the walker's
+  // filter skips. Both mean the whole container precedes it.
+  return consumed;
+}
+
+/**
+ * The offset in `source` that a click at (`clientX`, `clientY`) points at,
+ * given the rendered form of `source` in `container`.
+ *
+ * Falls back to the end of the source whenever the browser cannot resolve the
+ * point — including under jsdom, which implements neither API. That is the same
+ * place the caret would land with no mapping at all, so a fallback costs
+ * precision rather than correctness.
+ */
+export function sourceOffsetAtPoint(
+  container: HTMLElement,
+  nodes: InlineNode[],
+  source: string,
+  clientX: number,
+  clientY: number,
+): number {
+  const doc = container.ownerDocument as Document & CaretPositionSource;
+
+  const position = doc.caretPositionFromPoint
+    ? doc.caretPositionFromPoint(clientX, clientY)
+    : doc.caretRangeFromPoint?.(clientX, clientY);
+  if (!position) return source.length;
+
+  const node = 'offsetNode' in position ? position.offsetNode : position.startContainer;
+  const offset = 'offsetNode' in position ? position.offset : position.startOffset;
+
+  const rendered = renderedOffsetOf(container, node, offset);
+  if (rendered === null) return source.length;
+
+  return inlineSourceOffset(nodes, rendered, source.length);
+}
diff --git a/webapp/src/utils/markdown.ts b/webapp/src/utils/markdown.ts
index 098c17fa0..0bb2f2d18 100644
--- a/webapp/src/utils/markdown.ts
+++ b/webapp/src/utils/markdown.ts
@@ -5,6 +5,7 @@ import {
   normalizeBlockTokens,
   normalizeInlineTokens,
   flattenInlineNodes,
+  inlineRendersAsSource,
   BLOCK_LEXER_OPTIONS,
   INLINE_LEXER_OPTIONS,
   type BlockNode,
@@ -214,12 +215,54 @@ export function renderInlineMarkdown(
 ): string {
   if (!text.trim()) return '';
   const nodes = normalizeInlineTokens(Lexer.lexInline(text, INLINE_LEXER_OPTIONS));
-  return DOMPurify.sanitize(renderInlineNodes(nodes), {
+  return sanitizeInline(renderInlineNodes(nodes), links);
+}
+
+function sanitizeInline(html: string, links: boolean): string {
+  return DOMPurify.sanitize(html, {
     ALLOWED_TAGS: links ? INLINE_ALLOWED_TAGS : INLINE_NO_LINK_TAGS,
     ALLOWED_ATTR,
   });
 }
 
+export interface InlineItemRender {
+  /** Sanitized HTML, identical to what `renderInlineMarkdown` produces. */
+  html: string;
+  /**
+   * The nodes the HTML was built from, carrying source spans — the editable row
+   * needs them to map a click on the rendered text back to a caret position.
+   */
+  nodes: InlineNode[];
+  /**
+   * Whether rendering changed anything. False for `buy milk`, true for
+   * `buy **milk**`. The editable row only swaps in a rendered view when this is
+   * true, so a list with no Markdown in it behaves exactly as it did before.
+   */
+  formatted: boolean;
+}
+
+/**
+ * Renders one item's text *and* reports what the editable row needs to know
+ * about it: whether a rendered view is worth showing, and where each rendered
+ * character came from.
+ *
+ * Separate from `renderInlineMarkdown` because the display-only surfaces — note
+ * cards, the collapsed-completed label — want the string and nothing else, and
+ * lexing with source tracking on for them would be work with no reader.
+ */
+export function renderInlineItem(
+  text: string,
+  { links = true }: MarkdownRenderOptions = {},
+): InlineItemRender {
+  if (!text.trim()) return { html: '', nodes: [], formatted: false };
+  const nodes = normalizeInlineTokens(Lexer.lexInline(text, INLINE_LEXER_OPTIONS), 0);
+  return {
+    html: sanitizeInline(renderInlineNodes(nodes), links),
+    nodes,
+    formatted: !inlineRendersAsSource(nodes, text),
+  };
+}
+
 /**
  * The same item text as `renderInlineMarkdown` produces, with the formatting
  * dropped — for an `aria-label`, which must say what the eye sees rather than