From dbe21c36a1c40ff5439c00fd8ae51f8adb704622 Mon Sep 17 00:00:00 2001
From: Andreas Arvidsson <andreas.arvidsson87@gmail.com>
Date: Wed, 2 Sep 2026 00:00:31 +0200
Subject: [PATCH 1/5] Visualize actions on the documentation page

---
 .../components/RecordedTestVisualizer.tsx     | 37 ++++++++++++--
 .../src/docs/user/actions/addSelection.mdx    | 14 +++++
 .../docs/user/actions/addSelectionAfter.mdx   | 14 +++++
 .../docs/user/actions/addSelectionBefore.mdx  | 14 +++++
 .../src/docs/user/actions/applyFormatter.mdx  | 22 ++++++++
 .../src/docs/user/actions/breakLine.mdx       | 14 +++++
 .../src/docs/user/actions/callAsFunction.mdx  | 22 ++++++++
 .../user/actions/clearAndSetSelection.mdx     | 14 +++++
 .../src/docs/user/actions/cutToClipboard.mdx  | 14 +++++
 .../src/docs/user/actions/decrement.mdx       | 22 ++++++++
 .../src/docs/user/actions/deselect.mdx        | 14 +++++
 .../docs/user/actions/editNewLineAfter.mdx    | 18 +++++++
 .../docs/user/actions/editNewLineBefore.mdx   | 18 +++++++
 .../src/docs/user/actions/increment.mdx       | 22 ++++++++
 .../src/docs/user/actions/indentLine.mdx      | 14 +++++
 .../src/docs/user/actions/insertCopyAfter.mdx | 18 +++++++
 .../docs/user/actions/insertCopyBefore.mdx    | 18 +++++++
 .../user/actions/insertEmptyLineAfter.mdx     | 18 +++++++
 .../user/actions/insertEmptyLineBefore.mdx    | 18 +++++++
 .../user/actions/insertEmptyLinesAround.mdx   | 18 +++++++
 .../src/docs/user/actions/insertSnippet.mdx   | 14 +++++
 .../src/docs/user/actions/joinLines.mdx       | 14 +++++
 .../src/docs/user/actions/moveToTarget.mdx    | 18 +++++++
 .../src/docs/user/actions/nextHomophone.mdx   | 18 +++++++
 .../src/docs/user/actions/outdentLine.mdx     | 14 +++++
 .../docs/user/actions/pasteFromClipboard.mdx  | 22 ++++++++
 .../docs/user/actions/randomizeTargets.mdx    | 14 +++++
 .../src/docs/user/actions/remove.mdx          | 14 +++++
 .../docs/user/actions/replaceWithTarget.mdx   | 34 +++++++++++++
 .../src/docs/user/actions/reverseTargets.mdx  | 14 +++++
 .../actions/rewrapWithPairedDelimiter.mdx     | 14 +++++
 .../src/docs/user/actions/setSelection.mdx    | 14 +++++
 .../docs/user/actions/setSelectionAfter.mdx   | 14 +++++
 .../docs/user/actions/setSelectionBefore.mdx  | 14 +++++
 .../src/docs/user/actions/sortTargets.mdx     | 14 +++++
 .../src/docs/user/actions/swapTargets.mdx     | 18 +++++++
 .../docs/user/actions/toggleLineComment.mdx   | 18 +++++++
 .../user/actions/wrapWithPairedDelimiter.mdx  | 18 +++++++
 .../src/suite/shouldSkipTest.ts               |  6 +++
 .../recorded/docs/actions/addSelection.yml    | 26 ++++++++++
 .../docs/actions/addSelectionAfter.yml        | 26 ++++++++++
 .../docs/actions/addSelectionBefore.yml       | 26 ++++++++++
 .../recorded/docs/actions/applyFormatter.yml  | 29 +++++++++++
 .../recorded/docs/actions/applyFormatter2.yml | 29 +++++++++++
 .../recorded/docs/actions/applyFormatter3.yml | 28 ++++++++++
 .../recorded/docs/actions/breakLine.yml       | 26 ++++++++++
 .../recorded/docs/actions/callAsFunction.yml  | 25 +++++++++
 .../recorded/docs/actions/callAsFunction2.yml | 25 +++++++++
 .../recorded/docs/actions/callAsFunction3.yml | 30 +++++++++++
 .../docs/actions/clearAndSetSelection.yml     | 24 +++++++++
 .../recorded/docs/actions/cutToClipboard.yml  | 25 +++++++++
 .../recorded/docs/actions/decrement.yml       | 24 +++++++++
 .../recorded/docs/actions/decrement2.yml      | 24 +++++++++
 .../recorded/docs/actions/decrement3.yml      | 23 +++++++++
 .../recorded/docs/actions/deselect.yml        | 26 ++++++++++
 .../docs/actions/editNewLineAfter.yml         | 25 +++++++++
 .../docs/actions/editNewLineAfter2.yml        | 27 ++++++++++
 .../docs/actions/editNewLineBefore.yml        | 26 ++++++++++
 .../docs/actions/editNewLineBefore2.yml       | 27 ++++++++++
 .../recorded/docs/actions/increment.yml       | 24 +++++++++
 .../recorded/docs/actions/increment2.yml      | 24 +++++++++
 .../recorded/docs/actions/increment3.yml      | 23 +++++++++
 .../recorded/docs/actions/indentLine.yml      | 24 +++++++++
 .../recorded/docs/actions/insertCopyAfter.yml | 26 ++++++++++
 .../docs/actions/insertCopyAfter2.yml         | 27 ++++++++++
 .../docs/actions/insertCopyBefore.yml         | 26 ++++++++++
 .../docs/actions/insertCopyBefore2.yml        | 27 ++++++++++
 .../docs/actions/insertEmptyLineAfter.yml     | 25 +++++++++
 .../docs/actions/insertEmptyLineAfter2.yml    | 27 ++++++++++
 .../docs/actions/insertEmptyLineBefore.yml    | 26 ++++++++++
 .../docs/actions/insertEmptyLineBefore2.yml   | 27 ++++++++++
 .../docs/actions/insertEmptyLinesAround.yml   | 26 ++++++++++
 .../docs/actions/insertEmptyLinesAround2.yml  | 27 ++++++++++
 .../recorded/docs/actions/insertSnippet.yml   | 51 +++++++++++++++++++
 .../recorded/docs/actions/joinLines.yml       | 26 ++++++++++
 .../recorded/docs/actions/moveToTarget.yml    | 25 +++++++++
 .../recorded/docs/actions/moveToTarget2.yml   | 33 ++++++++++++
 .../recorded/docs/actions/nextHomophone.yml   | 29 +++++++++++
 .../recorded/docs/actions/nextHomophone2.yml  | 29 +++++++++++
 .../recorded/docs/actions/outdentLine.yml     | 24 +++++++++
 .../docs/actions/pasteFromClipboard.yml       | 28 ++++++++++
 .../docs/actions/pasteFromClipboard2.yml      | 28 ++++++++++
 .../docs/actions/pasteFromClipboard3.yml      | 28 ++++++++++
 .../docs/actions/randomizeTargets.yml         | 23 +++++++++
 .../fixtures/recorded/docs/actions/remove.yml | 24 +++++++++
 .../docs/actions/replaceWithTarget.yml        | 25 +++++++++
 .../docs/actions/replaceWithTarget2.yml       | 33 ++++++++++++
 .../docs/actions/replaceWithTarget3.yml       | 33 ++++++++++++
 .../docs/actions/replaceWithTarget4.yml       | 33 ++++++++++++
 .../docs/actions/replaceWithTarget5.yml       | 40 +++++++++++++++
 .../docs/actions/replaceWithTarget6.yml       | 47 +++++++++++++++++
 .../recorded/docs/actions/reverseTargets.yml  | 23 +++++++++
 .../actions/rewrapWithPairedDelimiter.yml     | 26 ++++++++++
 .../recorded/docs/actions/setSelection.yml    | 24 +++++++++
 .../docs/actions/setSelectionAfter.yml        | 24 +++++++++
 .../docs/actions/setSelectionBefore.yml       | 24 +++++++++
 .../recorded/docs/actions/sortTargets.yml     | 23 +++++++++
 .../recorded/docs/actions/swapTargets.yml     | 30 +++++++++++
 .../recorded/docs/actions/swapTargets2.yml    | 44 ++++++++++++++++
 .../docs/actions/toggleLineComment.yml        | 24 +++++++++
 .../docs/actions/toggleLineComment2.yml       | 24 +++++++++
 .../docs/actions/wrapWithPairedDelimiter.yml  | 26 ++++++++++
 .../docs/actions/wrapWithPairedDelimiter2.yml | 47 +++++++++++++++++
 103 files changed, 2442 insertions(+), 5 deletions(-)
 create mode 100644 resources/fixtures/recorded/docs/actions/addSelection.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/addSelectionAfter.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/addSelectionBefore.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/applyFormatter.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/applyFormatter2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/applyFormatter3.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/breakLine.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/callAsFunction.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/callAsFunction2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/callAsFunction3.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/clearAndSetSelection.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/cutToClipboard.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/decrement.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/decrement2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/decrement3.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/deselect.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/editNewLineAfter.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/editNewLineAfter2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/editNewLineBefore.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/editNewLineBefore2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/increment.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/increment2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/increment3.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/indentLine.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertCopyAfter.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertCopyAfter2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertCopyBefore.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertCopyBefore2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertEmptyLineAfter.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertEmptyLineAfter2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertEmptyLineBefore.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertEmptyLineBefore2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertEmptyLinesAround.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertEmptyLinesAround2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/insertSnippet.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/joinLines.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/moveToTarget.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/moveToTarget2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/nextHomophone.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/nextHomophone2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/outdentLine.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/pasteFromClipboard.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/pasteFromClipboard2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/pasteFromClipboard3.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/randomizeTargets.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/remove.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/replaceWithTarget.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/replaceWithTarget2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/replaceWithTarget3.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/replaceWithTarget4.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/replaceWithTarget5.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/replaceWithTarget6.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/reverseTargets.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/rewrapWithPairedDelimiter.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/setSelection.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/setSelectionAfter.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/setSelectionBefore.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/sortTargets.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/swapTargets.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/swapTargets2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/toggleLineComment.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/toggleLineComment2.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/wrapWithPairedDelimiter.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/wrapWithPairedDelimiter2.yml

diff --git a/packages/app-web-docs/src/docs/components/RecordedTestVisualizer.tsx b/packages/app-web-docs/src/docs/components/RecordedTestVisualizer.tsx
index cf582cabe28..9e6b525fb8c 100644
--- a/packages/app-web-docs/src/docs/components/RecordedTestVisualizer.tsx
+++ b/packages/app-web-docs/src/docs/components/RecordedTestVisualizer.tsx
@@ -141,9 +141,9 @@ function CodeState({
   const decorations = useMemo(
     () => [
       ...state.selections.map(toDecoration),
-      ...toMarkDecorations(state.marks),
+      ...toMarkDecorations(state.marks, state.documentContents),
     ],
-    [state.selections, state.marks],
+    [state.selections, state.marks, state.documentContents],
   );
   return (
     <Code
@@ -178,19 +178,46 @@ function toDecoration(plainSelection: SelectionPlainObject): DecorationItem {
   };
 }
 
+/**
+ * Converts serialized token marks to Shiki decorations around the first
+ * occurrence of each mark's decorated character within its token.
+ */
 function toMarkDecorations(
   marks: SerializedMarks | undefined,
+  documentContents: string,
 ): DecorationItem[] {
   if (marks == null) {
     return [];
   }
 
+  const lines = documentContents.split(/\r?\n/u);
+
   return Object.entries(marks).map(([key, range]) => {
-    const { hatStyle } = splitKey(key);
+    if (range.start.line !== range.end.line) {
+      throw new Error(`Mark ${key} spans multiple lines`);
+    }
+
+    const line = lines[range.start.line];
+
+    if (line == null) {
+      throw new Error(`Mark ${key} is outside the document`);
+    }
+
+    const { hatStyle, character } = splitKey(key);
+    const tokenText = line.slice(range.start.character, range.end.character);
+    const characterOffset = tokenText.indexOf(character);
+    const characterStart = range.start.character + characterOffset;
+
+    if (characterOffset === -1) {
+      throw new Error(`Mark ${key} does not occur in its token`);
+    }
 
     return {
-      start: range.start,
-      end: range.end,
+      start: { line: range.start.line, character: characterStart },
+      end: {
+        line: range.start.line,
+        character: characterStart + character.length,
+      },
       alwaysWrap: true,
       properties: {
         className: ["code-hat", `code-hat-${hatStyle}`],
diff --git a/packages/app-web-docs/src/docs/user/actions/addSelection.mdx b/packages/app-web-docs/src/docs/user/actions/addSelection.mdx
index 15607287b4c..702ef14ae4a 100644
--- a/packages/app-web-docs/src/docs/user/actions/addSelection.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/addSelection.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Append
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Append (Add selection)
 
 Cursorless ID: `addSelection`
@@ -17,3 +19,15 @@ Default: `append`
 ## Examples
 
 - `"append blue air"` - Adds the token containing letter `a` with a blue hat to the current selections.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"append air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/addSelection" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/addSelectionAfter.mdx b/packages/app-web-docs/src/docs/user/actions/addSelectionAfter.mdx
index fdc2d4a3996..99968729fd5 100644
--- a/packages/app-web-docs/src/docs/user/actions/addSelectionAfter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/addSelectionAfter.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Append post
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Append post (Add selection after)
 
 Cursorless ID: `addSelectionAfter`
@@ -17,3 +19,15 @@ Default: `append post`
 ## Examples
 
 - `"append post blue air"` - Adds an empty selection after the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"append post air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/addSelectionAfter" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/addSelectionBefore.mdx b/packages/app-web-docs/src/docs/user/actions/addSelectionBefore.mdx
index 0a13fbcd48f..b3f3ff3eef1 100644
--- a/packages/app-web-docs/src/docs/user/actions/addSelectionBefore.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/addSelectionBefore.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Append pre
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Append pre (Add selection before)
 
 Cursorless ID: `addSelectionBefore`
@@ -17,3 +19,15 @@ Default: `append pre`
 ## Examples
 
 - `"append pre blue air"` - Adds an empty selection before the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"append pre air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/addSelectionBefore" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/applyFormatter.mdx b/packages/app-web-docs/src/docs/user/actions/applyFormatter.mdx
index 5cba30920c7..5734e60e612 100644
--- a/packages/app-web-docs/src/docs/user/actions/applyFormatter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/applyFormatter.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Format
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Format (Apply formatter)
 
 Cursorless ID: `applyFormatter`
@@ -17,3 +19,23 @@ Default: `format`
 ## Examples
 
 - `"format camel at blue air"` - Reformats the token containing letter `a` with a blue hat as camel case.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"form camel at bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/applyFormatter" />
+
+### `"form snake at bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/applyFormatter2" />
+
+### `"form camel at line"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/applyFormatter3" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/breakLine.mdx b/packages/app-web-docs/src/docs/user/actions/breakLine.mdx
index 75c611970d9..d60d895c140 100644
--- a/packages/app-web-docs/src/docs/user/actions/breakLine.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/breakLine.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Break
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Break (Break line)
 
 Cursorless ID: `breakLine`
@@ -17,3 +19,15 @@ Default: `break`
 ## Examples
 
 - `"break blue air"` - Breaks the line before the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"break air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/breakLine" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/callAsFunction.mdx b/packages/app-web-docs/src/docs/user/actions/callAsFunction.mdx
index 9f61c50f852..45292f293bd 100644
--- a/packages/app-web-docs/src/docs/user/actions/callAsFunction.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/callAsFunction.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Call
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Call (Call as function)
 
 Cursorless ID: `callAsFunction`
@@ -19,3 +21,23 @@ Default: `call`
 
 - `"call blue air"` - Inserts a call to the token containing letter `a` with a blue hat at the current selection.
 - `"call blue air on green bat"` - Inserts a call to the token containing letter `a` with a blue hat on the token containing letter `b` with a green hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"call air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/callAsFunction" />
+
+### `"call air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/callAsFunction2" />
+
+### `"call air on bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/callAsFunction3" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/clearAndSetSelection.mdx b/packages/app-web-docs/src/docs/user/actions/clearAndSetSelection.mdx
index 9944cf84428..7c8b1a14e7d 100644
--- a/packages/app-web-docs/src/docs/user/actions/clearAndSetSelection.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/clearAndSetSelection.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Change
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Change
 
 Cursorless ID: `clearAndSetSelection`
@@ -18,3 +20,15 @@ Legacy: `clear`
 ## Examples
 
 - `"change blue air"` - Changes the token containing letter `a` with a blue hat by clearing it and leaving the cursor in its place.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"change air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/clearAndSetSelection" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/cutToClipboard.mdx b/packages/app-web-docs/src/docs/user/actions/cutToClipboard.mdx
index c7ac5161862..990e83db0c1 100644
--- a/packages/app-web-docs/src/docs/user/actions/cutToClipboard.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/cutToClipboard.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Carve
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Carve (Cut to clipboard)
 
 Cursorless ID: `cutToClipboard`
@@ -17,3 +19,15 @@ Default: `carve`
 ## Examples
 
 - `"carve blue air"` - Cuts the token containing letter `a` with a blue hat to the clipboard.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"carve bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/cutToClipboard" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/decrement.mdx b/packages/app-web-docs/src/docs/user/actions/decrement.mdx
index ab91bf48618..3b4cd3e4808 100644
--- a/packages/app-web-docs/src/docs/user/actions/decrement.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/decrement.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Decrement
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Decrement
 
 Cursorless ID: `decrement`
@@ -17,3 +19,23 @@ Default: `decrement`
 ## Examples
 
 - `"decrement blue five"` - Decrements the number at the token containing number `5` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"decrement five"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/decrement" />
+
+### `"decrement air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/decrement2" />
+
+### `"decrement line"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/decrement3" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/deselect.mdx b/packages/app-web-docs/src/docs/user/actions/deselect.mdx
index 1c0116b859d..79f4cc8b4e3 100644
--- a/packages/app-web-docs/src/docs/user/actions/deselect.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/deselect.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Give
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Give (Deselect)
 
 Cursorless ID: `deselect`
@@ -17,3 +19,15 @@ Default: `give`
 ## Examples
 
 - `"give blue air"` - Removes the token containing letter `a` with a blue hat from the current selections.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"give air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/deselect" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/editNewLineAfter.mdx b/packages/app-web-docs/src/docs/user/actions/editNewLineAfter.mdx
index 377c2f2591e..0f476f666d6 100644
--- a/packages/app-web-docs/src/docs/user/actions/editNewLineAfter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/editNewLineAfter.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Pour
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Pour (Edit new line/scope after)
 
 Scope defaults to line. When used with a provided scope target, this action inserts the delimiters or spacing required for a new instance of that scope.
@@ -21,3 +23,19 @@ Default: `pour`
 
 - `"pour blue air"` - Inserts a new line below the token containing letter `a` with a blue hat and moves the cursor to it.
 - `"pour item blue air"` - Inserts the delimiters for a new collection item after the item containing the token containing letter `a` with a blue hat and moves the cursor there.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"pour air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/editNewLineAfter" />
+
+### `"pour token air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/editNewLineAfter2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/editNewLineBefore.mdx b/packages/app-web-docs/src/docs/user/actions/editNewLineBefore.mdx
index 6de79669fda..a2f22eb117e 100644
--- a/packages/app-web-docs/src/docs/user/actions/editNewLineBefore.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/editNewLineBefore.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Drink
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Drink (Edit new line/scope before)
 
 Scope defaults to line. When used with a provided scope target, this action inserts the delimiters or spacing required for a new instance of that scope.
@@ -21,3 +23,19 @@ Default: `drink`
 
 - `"drink blue air"` - Inserts a new line above the token containing letter `a` with a blue hat and moves the cursor to it.
 - `"drink item blue air"` - Inserts the delimiters for a new collection item before the item containing the token containing letter `a` with a blue hat and moves the cursor there.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"drink air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/editNewLineBefore" />
+
+### `"drink token air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/editNewLineBefore2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/increment.mdx b/packages/app-web-docs/src/docs/user/actions/increment.mdx
index cf2b424daa6..cd1e4242cec 100644
--- a/packages/app-web-docs/src/docs/user/actions/increment.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/increment.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Increment
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Increment
 
 Cursorless ID: `increment`
@@ -17,3 +19,23 @@ Default: `increment`
 ## Examples
 
 - `"increment blue five"` - Increments the token containing number `5` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"increment five"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/increment" />
+
+### `"increment air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/increment2" />
+
+### `"increment line"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/increment3" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/indentLine.mdx b/packages/app-web-docs/src/docs/user/actions/indentLine.mdx
index 67ce8c478d2..dc9f8f661ba 100644
--- a/packages/app-web-docs/src/docs/user/actions/indentLine.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/indentLine.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Indent
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Indent (Indent line)
 
 Cursorless ID: `indentLine`
@@ -17,3 +19,15 @@ Default: `indent`
 ## Examples
 
 - `"indent blue air"` - Indents the line containing the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"indent air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/indentLine" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/insertCopyAfter.mdx b/packages/app-web-docs/src/docs/user/actions/insertCopyAfter.mdx
index c8df2556ccc..1a4b1bdf40e 100644
--- a/packages/app-web-docs/src/docs/user/actions/insertCopyAfter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/insertCopyAfter.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Clone
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Clone (Insert copy after)
 
 After insertion, each selection moves to its newly created copy.
@@ -19,3 +21,19 @@ Default: `clone`
 ## Examples
 
 - `"clone funk blue air"` - Inserts a copy of the function containing the token containing letter `a` with a blue hat after itself.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"clone air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertCopyAfter" />
+
+### `"clone token air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertCopyAfter2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/insertCopyBefore.mdx b/packages/app-web-docs/src/docs/user/actions/insertCopyBefore.mdx
index ccc3849ebce..9119dad6b8a 100644
--- a/packages/app-web-docs/src/docs/user/actions/insertCopyBefore.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/insertCopyBefore.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Clone up
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Clone up (Insert copy before)
 
 After insertion, each selection moves to its newly created copy.
@@ -19,3 +21,19 @@ Default: `clone up`
 ## Examples
 
 - `"clone up funk blue air"` - Inserts a copy of the function containing the token containing letter `a` with a blue hat before itself.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"clone up air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertCopyBefore" />
+
+### `"clone up token air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertCopyBefore2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/insertEmptyLineAfter.mdx b/packages/app-web-docs/src/docs/user/actions/insertEmptyLineAfter.mdx
index 8d7087c21c8..cd1f01cf196 100644
--- a/packages/app-web-docs/src/docs/user/actions/insertEmptyLineAfter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/insertEmptyLineAfter.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Float
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Float (Insert empty line/scope after)
 
 Scope defaults to line. When used with a provided scope target, this action inserts the delimiters or spacing required for a new instance of that scope.
@@ -20,3 +22,19 @@ Default: `float`
 
 - `"float blue air"` - Inserts an empty line below the token containing letter `a` with a blue hat without moving the cursor.
 - `"float item blue air"` - Inserts the required delimiter after the collection item containing the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"float air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertEmptyLineAfter" />
+
+### `"float token bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertEmptyLineAfter2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/insertEmptyLineBefore.mdx b/packages/app-web-docs/src/docs/user/actions/insertEmptyLineBefore.mdx
index 98dcde6dbd2..eaeef801ab1 100644
--- a/packages/app-web-docs/src/docs/user/actions/insertEmptyLineBefore.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/insertEmptyLineBefore.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Drop
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Drop (Insert empty line/scope before)
 
 Scope defaults to line. When used with a provided scope target, this action inserts the delimiters or spacing required for a new instance of that scope.
@@ -20,3 +22,19 @@ Default: `drop`
 
 - `"drop blue air"` - Inserts an empty line above the token containing letter `a` with a blue hat without moving the cursor.
 - `"drop item blue air"` - Inserts the required delimiter before the collection item containing the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"drop air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertEmptyLineBefore" />
+
+### `"drop token air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertEmptyLineBefore2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/insertEmptyLinesAround.mdx b/packages/app-web-docs/src/docs/user/actions/insertEmptyLinesAround.mdx
index 831f4ceee27..0b660eb4cdb 100644
--- a/packages/app-web-docs/src/docs/user/actions/insertEmptyLinesAround.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/insertEmptyLinesAround.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Puff
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Puff (Insert empty lines/scopes around)
 
 Scope defaults to line. When used with a provided scope target, this action inserts the delimiters or spacing required for a new instance of that scope.
@@ -20,3 +22,19 @@ Default: `puff`
 
 - `"puff blue air"` - Inserts empty lines around the line containing the token containing letter `a` with a blue hat without moving the cursor.
 - `"puff token blue air"` - Inserts spaces around the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"puff air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertEmptyLinesAround" />
+
+### `"puff token bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertEmptyLinesAround2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/insertSnippet.mdx b/packages/app-web-docs/src/docs/user/actions/insertSnippet.mdx
index 4ca6244956f..145d3c3995a 100644
--- a/packages/app-web-docs/src/docs/user/actions/insertSnippet.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/insertSnippet.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Snip
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Snip (Insert snippet)
 
 Cursorless ID: `insertSnippet`
@@ -17,3 +19,15 @@ Default: `snip`
 ## Examples
 
 - `"snip if after blue air"` - Inserts an if-statement snippet after the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"snip if after air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/insertSnippet" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/joinLines.mdx b/packages/app-web-docs/src/docs/user/actions/joinLines.mdx
index c7a4bc4d89a..4d425f855e6 100644
--- a/packages/app-web-docs/src/docs/user/actions/joinLines.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/joinLines.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Join
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Join (Join lines)
 
 When the target spans multiple lines, joins all of those lines; otherwise joins the target's line with the following line.
@@ -19,3 +21,15 @@ Default: `join`
 ## Examples
 
 - `"join blue air"` - Joins the line containing the token containing letter `a` with a blue hat with the following line.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"join air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/joinLines" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx b/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
index bcf992b2041..156e6152e62 100644
--- a/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Move
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Move (Move to target)
 
 A target destination is replaced, while a position destination such as `before` or `after` inserts there. The source is removed from its original location in either case.
@@ -21,3 +23,19 @@ Default: `move`
 
 - `"move blue air"` - Moves the token containing letter `a` with a blue hat to the current selection.
 - `"move blue air after green bat"` - Moves the token containing letter `a` with a blue hat to after the token containing letter `b` with a green hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"move air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/moveToTarget" />
+
+### `"move air to bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/moveToTarget2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/nextHomophone.mdx b/packages/app-web-docs/src/docs/user/actions/nextHomophone.mdx
index ba9f99479e5..52930dd31ba 100644
--- a/packages/app-web-docs/src/docs/user/actions/nextHomophone.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/nextHomophone.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Phones
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Phones (Next homophone)
 
 Cycles through words that sound alike, such as changing `where` to `wear`.
@@ -19,3 +21,19 @@ Default: `phones`
 ## Examples
 
 - `"phones blue air"` - Replaces the token containing letter `a` with a blue hat with its next homophone.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"phones sit"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/nextHomophone" />
+
+### `"phones sit"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/nextHomophone2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/outdentLine.mdx b/packages/app-web-docs/src/docs/user/actions/outdentLine.mdx
index 2d920f98e36..8dfb80bf3e0 100644
--- a/packages/app-web-docs/src/docs/user/actions/outdentLine.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/outdentLine.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Dedent
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Dedent (Outdent line)
 
 Cursorless ID: `outdentLine`
@@ -17,3 +19,15 @@ Default: `dedent`
 ## Examples
 
 - `"dedent blue air"` - Decreases the indentation of the line containing the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"dedent air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/outdentLine" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/pasteFromClipboard.mdx b/packages/app-web-docs/src/docs/user/actions/pasteFromClipboard.mdx
index 6368559d79e..ff045e8b7bb 100644
--- a/packages/app-web-docs/src/docs/user/actions/pasteFromClipboard.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/pasteFromClipboard.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Paste
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Paste (Paste from clipboard)
 
 Cursorless ID: `pasteFromClipboard`
@@ -17,3 +19,23 @@ Default: `paste`
 ## Examples
 
 - `"paste after blue air"` - Pastes the clipboard contents after the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"paste to air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/pasteFromClipboard" />
+
+### `"paste before air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/pasteFromClipboard2" />
+
+### `"paste after air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/pasteFromClipboard3" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/randomizeTargets.mdx b/packages/app-web-docs/src/docs/user/actions/randomizeTargets.mdx
index 364557a47ed..79a038a000e 100644
--- a/packages/app-web-docs/src/docs/user/actions/randomizeTargets.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/randomizeTargets.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Shuffle
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Shuffle (Randomize targets)
 
 This action changes the order of multiple target contents. The targets can come from a list or range target, or from existing multiple selections.
@@ -21,3 +23,15 @@ Default: `shuffle`
 - `"shuffle every item blue air"` - Randomizes the collection items associated with the token containing letter `a` with a blue hat.
 - `"shuffle line blue air slice green bat"` - Randomizes the lines from the token containing letter `a` with a blue hat through the token containing letter `b` with a green hat.
 - `"shuffle this"` - Randomizes the current selections.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"shuffle every item"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/randomizeTargets" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/remove.mdx b/packages/app-web-docs/src/docs/user/actions/remove.mdx
index cc20583b1ea..07d3cf464c3 100644
--- a/packages/app-web-docs/src/docs/user/actions/remove.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/remove.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Chuck
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Chuck (Remove)
 
 This action can be used to remove a target without moving the cursor.
@@ -19,3 +21,15 @@ Default: `chuck`
 ## Examples
 
 - `"chuck blue air"` - Removes the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"chuck air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/remove" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/replaceWithTarget.mdx b/packages/app-web-docs/src/docs/user/actions/replaceWithTarget.mdx
index 49bc966fbed..00f4f89a4c0 100644
--- a/packages/app-web-docs/src/docs/user/actions/replaceWithTarget.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/replaceWithTarget.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Bring
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Bring (Replace with target)
 
 Cursorless ID: `replaceWithTarget`
@@ -19,3 +21,35 @@ Default: `bring`
 
 - `"bring blue air"` - Inserts a copy of the token containing letter `a` with a blue hat at the current selection.
 - `"bring blue air to green bat"` - Replaces the token containing letter `b` with a green hat with a copy of the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"bring air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/replaceWithTarget" />
+
+### `"bring air to bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/replaceWithTarget2" />
+
+### `"bring air before bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/replaceWithTarget3" />
+
+### `"bring bat after air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/replaceWithTarget4" />
+
+### `"bring air to bat and cap"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/replaceWithTarget5" />
+
+### `"bring air and bat to cap and drum"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/replaceWithTarget6" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/reverseTargets.mdx b/packages/app-web-docs/src/docs/user/actions/reverseTargets.mdx
index 2c88ea0abc1..b3ed576f423 100644
--- a/packages/app-web-docs/src/docs/user/actions/reverseTargets.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/reverseTargets.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Reverse
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Reverse (Reverse targets)
 
 This action changes the order of multiple target contents. The targets can come from a list or range target, or from existing multiple selections.
@@ -21,3 +23,15 @@ Default: `reverse`
 - `"reverse every item blue air"` - Reverses the collection items associated with the token containing letter `a` with a blue hat.
 - `"reverse line blue air slice green bat"` - Reverses the lines from the token containing letter `a` with a blue hat through the token containing letter `b` with a green hat.
 - `"reverse this"` - Reverses the current selections.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"reverse every item"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/reverseTargets" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/rewrapWithPairedDelimiter.mdx b/packages/app-web-docs/src/docs/user/actions/rewrapWithPairedDelimiter.mdx
index 1379975fb2d..23820ddbd14 100644
--- a/packages/app-web-docs/src/docs/user/actions/rewrapWithPairedDelimiter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/rewrapWithPairedDelimiter.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Repack
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Repack (Rewrap with paired delimiter)
 
 See [paired delimiters](../paired-delimiters.md) for the available pairs.
@@ -19,3 +21,15 @@ Default: `repack`
 ## Examples
 
 - `"curly repack blue air"` - Replaces the paired delimiters around the token containing letter `a` with a blue hat with curly brackets.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"curly repack air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/rewrapWithPairedDelimiter" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/setSelection.mdx b/packages/app-web-docs/src/docs/user/actions/setSelection.mdx
index 125abba5c5c..17fad789442 100644
--- a/packages/app-web-docs/src/docs/user/actions/setSelection.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/setSelection.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Take
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Take (Select)
 
 When used with a list target, this action creates one cursor for each target.
@@ -19,3 +21,15 @@ Default: `take`
 ## Examples
 
 - `"take blue air"` - Selects the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"take air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/setSelection" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/setSelectionAfter.mdx b/packages/app-web-docs/src/docs/user/actions/setSelectionAfter.mdx
index affe113a2fb..38accaea93e 100644
--- a/packages/app-web-docs/src/docs/user/actions/setSelectionAfter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/setSelectionAfter.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Post
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Post (Set selection after)
 
 When used with a list target, this action creates one cursor for each target.
@@ -19,3 +21,15 @@ Default: `post`
 ## Examples
 
 - `"post blue air"` - Places the cursor after the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"post air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/setSelectionAfter" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/setSelectionBefore.mdx b/packages/app-web-docs/src/docs/user/actions/setSelectionBefore.mdx
index 69ea0d907de..1fb70cbbc59 100644
--- a/packages/app-web-docs/src/docs/user/actions/setSelectionBefore.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/setSelectionBefore.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Pre
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Pre (Set selection before)
 
 When used with a list target, this action creates one cursor for each target.
@@ -19,3 +21,15 @@ Default: `pre`
 ## Examples
 
 - `"pre blue air"` - Places the cursor before the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"pre air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/setSelectionBefore" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/sortTargets.mdx b/packages/app-web-docs/src/docs/user/actions/sortTargets.mdx
index 8d8a534896c..8ada3806435 100644
--- a/packages/app-web-docs/src/docs/user/actions/sortTargets.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/sortTargets.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Sort
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Sort (Sort targets)
 
 This action changes the order of multiple target contents. The targets can come from a list or range target, or from existing multiple selections.
@@ -21,3 +23,15 @@ Default: `sort`
 - `"sort every item blue air"` - Sorts the collection items associated with the token containing letter `a` with a blue hat.
 - `"sort line blue air slice green bat"` - Sorts the lines from the token containing letter `a` with a blue hat through the token containing letter `b` with a green hat.
 - `"sort this"` - Sorts the current selections.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"sort every item"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/sortTargets" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/swapTargets.mdx b/packages/app-web-docs/src/docs/user/actions/swapTargets.mdx
index 17291680683..2033450d5be 100644
--- a/packages/app-web-docs/src/docs/user/actions/swapTargets.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/swapTargets.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Swap
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Swap (Swap targets)
 
 When both operands contain multiple targets, their targets are paired by position and swapped.
@@ -21,3 +23,19 @@ Default: `swap`
 
 - `"swap with blue air"` - Swaps the current selection with the token containing letter `a` with a blue hat.
 - `"swap blue air with green bat"` - Swaps the token containing letter `a` with a blue hat and the token containing letter `b` with a green hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"swap air with bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/swapTargets" />
+
+### `"swap air and bat with cap and drum"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/swapTargets2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/toggleLineComment.mdx b/packages/app-web-docs/src/docs/user/actions/toggleLineComment.mdx
index 01df9c0ea90..a8aceb1cb64 100644
--- a/packages/app-web-docs/src/docs/user/actions/toggleLineComment.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/toggleLineComment.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Comment
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Comment (Toggle line comment)
 
 Cursorless ID: `toggleLineComment`
@@ -17,3 +19,19 @@ Default: `comment`
 ## Examples
 
 - `"comment blue air"` - Toggles the comment on the line containing the token containing letter `a` with a blue hat.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"comment air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/toggleLineComment" />
+
+### `"comment air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/toggleLineComment2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/wrapWithPairedDelimiter.mdx b/packages/app-web-docs/src/docs/user/actions/wrapWithPairedDelimiter.mdx
index 73d8f645ea9..15854230bd8 100644
--- a/packages/app-web-docs/src/docs/user/actions/wrapWithPairedDelimiter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/wrapWithPairedDelimiter.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Wrap
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Wrap (Wrap with paired delimiter/snippet)
 
 See [paired delimiters](../paired-delimiters.md) for the available pairs.
@@ -21,3 +23,19 @@ Default: `wrap`
 
 - `"box wrap blue air"` - Wraps the token containing letter `a` with a blue hat in square brackets.
 - `"if wrap blue air"` - Wraps the token containing letter `a` with a blue hat in an if-statement snippet.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"round wrap air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/wrapWithPairedDelimiter" />
+
+### `"if wrap air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/wrapWithPairedDelimiter2" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/test-vscode-e2e/src/suite/shouldSkipTest.ts b/packages/test-vscode-e2e/src/suite/shouldSkipTest.ts
index abc0f4089d3..c14dc2301ee 100644
--- a/packages/test-vscode-e2e/src/suite/shouldSkipTest.ts
+++ b/packages/test-vscode-e2e/src/suite/shouldSkipTest.ts
@@ -9,6 +9,12 @@ const isVersionProblematic =
   semver.lt(vscode.version, "1.107.0") && semver.gte(vscode.version, "1.98.0");
 
 export function shouldSkipRecordedTest(name: string): boolean {
+  switch (name) {
+    case "recorded/docs/actions/randomizeTargets":
+      return true;
+    // No default
+  }
+
   return isVersionProblematic && name.startsWith("recorded/languages/latex/");
 }
 
diff --git a/resources/fixtures/recorded/docs/actions/addSelection.yml b/resources/fixtures/recorded/docs/actions/addSelection.yml
new file mode 100644
index 00000000000..be100c1ebd7
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/addSelection.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: append air
+  action:
+    name: addSelection
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 6}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 6}
+    - anchor: {line: 0, character: 7}
+      active: {line: 0, character: 10}
diff --git a/resources/fixtures/recorded/docs/actions/addSelectionAfter.yml b/resources/fixtures/recorded/docs/actions/addSelectionAfter.yml
new file mode 100644
index 00000000000..b7960cfffad
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/addSelectionAfter.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: append post air
+  action:
+    name: addSelectionAfter
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 6}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 6}
+    - anchor: {line: 0, character: 10}
+      active: {line: 0, character: 10}
diff --git a/resources/fixtures/recorded/docs/actions/addSelectionBefore.yml b/resources/fixtures/recorded/docs/actions/addSelectionBefore.yml
new file mode 100644
index 00000000000..ca6b552a730
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/addSelectionBefore.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: append pre air
+  action:
+    name: addSelectionBefore
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 6}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 6}
+    - anchor: {line: 0, character: 7}
+      active: {line: 0, character: 7}
diff --git a/resources/fixtures/recorded/docs/actions/applyFormatter.yml b/resources/fixtures/recorded/docs/actions/applyFormatter.yml
new file mode 100644
index 00000000000..b89cae384c0
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/applyFormatter.yml
@@ -0,0 +1,29 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: form camel at bat
+  action:
+    name: replace
+    replaceWith: [bbbAaa]
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+spokenFormError: Action 'replace'
+initialState:
+  documentContents: // bbb_aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbbAaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/applyFormatter2.yml b/resources/fixtures/recorded/docs/actions/applyFormatter2.yml
new file mode 100644
index 00000000000..bb3383ca934
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/applyFormatter2.yml
@@ -0,0 +1,29 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: form snake at bat
+  action:
+    name: replace
+    replaceWith: [bbb_aaa]
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+spokenFormError: Action 'replace'
+initialState:
+  documentContents: // bbbAaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 9}
+finalState:
+  documentContents: // bbb_aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/applyFormatter3.yml b/resources/fixtures/recorded/docs/actions/applyFormatter3.yml
new file mode 100644
index 00000000000..7b0cc73a11c
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/applyFormatter3.yml
@@ -0,0 +1,28 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: form camel at line
+  action:
+    name: replace
+    replaceWith: ['aaaBbb']
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: primitive
+        modifiers:
+          - type: containingScope
+            scopeType: {type: line}
+  usePrePhraseSnapshot: false
+spokenFormError: Action 'replace'
+initialState:
+  documentContents: aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks: {}
+finalState:
+  documentContents: "aaaBbb"
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/breakLine.yml b/resources/fixtures/recorded/docs/actions/breakLine.yml
new file mode 100644
index 00000000000..534d9b49ecb
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/breakLine.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: break air
+  action:
+    name: breakLine
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: |-
+    // bbb
+    aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/callAsFunction.yml b/resources/fixtures/recorded/docs/actions/callAsFunction.yml
new file mode 100644
index 00000000000..a6677265814
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/callAsFunction.yml
@@ -0,0 +1,25 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: call air
+  action:
+    name: callAsFunction
+    callee:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    argument: {type: implicit}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: aaa()// bbb aaa
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}
diff --git a/resources/fixtures/recorded/docs/actions/callAsFunction2.yml b/resources/fixtures/recorded/docs/actions/callAsFunction2.yml
new file mode 100644
index 00000000000..52f53af15c4
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/callAsFunction2.yml
@@ -0,0 +1,25 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: call air
+  action:
+    name: callAsFunction
+    callee:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    argument: {type: implicit}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: "// bbb aaa"
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 6}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: "// aaa(bbb) aaa"
+  selections:
+    - anchor: {line: 0, character: 7}
+      active: {line: 0, character: 10}
diff --git a/resources/fixtures/recorded/docs/actions/callAsFunction3.yml b/resources/fixtures/recorded/docs/actions/callAsFunction3.yml
new file mode 100644
index 00000000000..3ef7060d952
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/callAsFunction3.yml
@@ -0,0 +1,30 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: call air on bat
+  action:
+    name: callAsFunction
+    callee:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    argument:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: // aaa(bbb) aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/clearAndSetSelection.yml b/resources/fixtures/recorded/docs/actions/clearAndSetSelection.yml
new file mode 100644
index 00000000000..152d3cee8ee
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/clearAndSetSelection.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: change air
+  action:
+    name: clearAndSetSelection
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: "// bbb "
+  selections:
+    - anchor: {line: 0, character: 7}
+      active: {line: 0, character: 7}
diff --git a/resources/fixtures/recorded/docs/actions/cutToClipboard.yml b/resources/fixtures/recorded/docs/actions/cutToClipboard.yml
new file mode 100644
index 00000000000..41d6cfbbe91
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/cutToClipboard.yml
@@ -0,0 +1,25 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: carve bat
+  action:
+    name: cutToClipboard
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: // aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  clipboard: bbb
diff --git a/resources/fixtures/recorded/docs/actions/decrement.yml b/resources/fixtures/recorded/docs/actions/decrement.yml
new file mode 100644
index 00000000000..6d7cd070281
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/decrement.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: decrement five
+  action:
+    name: decrement
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: '5'}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // 5 aaa10
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.5:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 4}
+finalState:
+  documentContents: // 4 aaa10
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/decrement2.yml b/resources/fixtures/recorded/docs/actions/decrement2.yml
new file mode 100644
index 00000000000..73e8f4fdfec
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/decrement2.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: decrement air
+  action:
+    name: decrement
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // 5 aaa10
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 5}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // 5 aaa9
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/decrement3.yml b/resources/fixtures/recorded/docs/actions/decrement3.yml
new file mode 100644
index 00000000000..a4c905f4b23
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/decrement3.yml
@@ -0,0 +1,23 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: decrement line
+  action:
+    name: decrement
+    target:
+      type: primitive
+      modifiers:
+        - type: containingScope
+          scopeType: {type: line}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // 5 aaa10
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks: {}
+finalState:
+  documentContents: // 4 aaa9
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/deselect.yml b/resources/fixtures/recorded/docs/actions/deselect.yml
new file mode 100644
index 00000000000..b0846a4ed08
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/deselect.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: give air
+  action:
+    name: deselect
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 3}
+    - anchor: {line: 0, character: 7}
+      active: {line: 0, character: 7}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 3}
diff --git a/resources/fixtures/recorded/docs/actions/editNewLineAfter.yml b/resources/fixtures/recorded/docs/actions/editNewLineAfter.yml
new file mode 100644
index 00000000000..b861119b924
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/editNewLineAfter.yml
@@ -0,0 +1,25 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: pour air
+  action:
+    name: editNewLineAfter
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: |
+    // bbb aaa
+  selections:
+    - anchor: {line: 1, character: 0}
+      active: {line: 1, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/editNewLineAfter2.yml b/resources/fixtures/recorded/docs/actions/editNewLineAfter2.yml
new file mode 100644
index 00000000000..d70389851d9
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/editNewLineAfter2.yml
@@ -0,0 +1,27 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: pour token air
+  action:
+    name: editNewLineAfter
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+      modifiers:
+        - type: containingScope
+          scopeType: {type: token}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: "// bbb aaa "
+  selections:
+    - anchor: {line: 0, character: 11}
+      active: {line: 0, character: 11}
diff --git a/resources/fixtures/recorded/docs/actions/editNewLineBefore.yml b/resources/fixtures/recorded/docs/actions/editNewLineBefore.yml
new file mode 100644
index 00000000000..46155139c27
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/editNewLineBefore.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: drink air
+  action:
+    name: editNewLineBefore
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: |-
+
+    // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/editNewLineBefore2.yml b/resources/fixtures/recorded/docs/actions/editNewLineBefore2.yml
new file mode 100644
index 00000000000..9a772efc6c1
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/editNewLineBefore2.yml
@@ -0,0 +1,27 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: drink token air
+  action:
+    name: editNewLineBefore
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+      modifiers:
+        - type: containingScope
+          scopeType: {type: token}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb  aaa
+  selections:
+    - anchor: {line: 0, character: 7}
+      active: {line: 0, character: 7}
diff --git a/resources/fixtures/recorded/docs/actions/increment.yml b/resources/fixtures/recorded/docs/actions/increment.yml
new file mode 100644
index 00000000000..1fd2a4a7d77
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/increment.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: increment five
+  action:
+    name: increment
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: '5'}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // 5 aaa10
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.5:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 4}
+finalState:
+  documentContents: // 6 aaa10
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/increment2.yml b/resources/fixtures/recorded/docs/actions/increment2.yml
new file mode 100644
index 00000000000..f4ab773b88e
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/increment2.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: increment air
+  action:
+    name: increment
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // 5 aaa10
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 5}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // 5 aaa11
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/increment3.yml b/resources/fixtures/recorded/docs/actions/increment3.yml
new file mode 100644
index 00000000000..6f8faa9f950
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/increment3.yml
@@ -0,0 +1,23 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: increment line
+  action:
+    name: increment
+    target:
+      type: primitive
+      modifiers:
+        - type: containingScope
+          scopeType: {type: line}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // 5 aaa10
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks: {}
+finalState:
+  documentContents: // 6 aaa11
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/indentLine.yml b/resources/fixtures/recorded/docs/actions/indentLine.yml
new file mode 100644
index 00000000000..cbee024dbc7
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/indentLine.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: indent air
+  action:
+    name: indentLine
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: "    // bbb aaa"
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}
diff --git a/resources/fixtures/recorded/docs/actions/insertCopyAfter.yml b/resources/fixtures/recorded/docs/actions/insertCopyAfter.yml
new file mode 100644
index 00000000000..f38569ba5fd
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertCopyAfter.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: clone air
+  action:
+    name: insertCopyAfter
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: |-
+    // bbb aaa
+    // bbb aaa
+  selections:
+    - anchor: {line: 1, character: 0}
+      active: {line: 1, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertCopyAfter2.yml b/resources/fixtures/recorded/docs/actions/insertCopyAfter2.yml
new file mode 100644
index 00000000000..87e4184b2de
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertCopyAfter2.yml
@@ -0,0 +1,27 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: clone token air
+  action:
+    name: insertCopyAfter
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+      modifiers:
+        - type: containingScope
+          scopeType: {type: token}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertCopyBefore.yml b/resources/fixtures/recorded/docs/actions/insertCopyBefore.yml
new file mode 100644
index 00000000000..7ade55ce3c5
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertCopyBefore.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: clone up air
+  action:
+    name: insertCopyBefore
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: |-
+    // bbb aaa
+    // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertCopyBefore2.yml b/resources/fixtures/recorded/docs/actions/insertCopyBefore2.yml
new file mode 100644
index 00000000000..ce79fed4c08
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertCopyBefore2.yml
@@ -0,0 +1,27 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: clone up token air
+  action:
+    name: insertCopyBefore
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+      modifiers:
+        - type: containingScope
+          scopeType: {type: token}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertEmptyLineAfter.yml b/resources/fixtures/recorded/docs/actions/insertEmptyLineAfter.yml
new file mode 100644
index 00000000000..80eb93bc96e
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertEmptyLineAfter.yml
@@ -0,0 +1,25 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: float air
+  action:
+    name: insertEmptyLineAfter
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: |
+    // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertEmptyLineAfter2.yml b/resources/fixtures/recorded/docs/actions/insertEmptyLineAfter2.yml
new file mode 100644
index 00000000000..e443fa21242
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertEmptyLineAfter2.yml
@@ -0,0 +1,27 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: float token bat
+  action:
+    name: insertEmptyLineAfter
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: b}
+      modifiers:
+        - type: containingScope
+          scopeType: {type: token}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: // bbb  aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertEmptyLineBefore.yml b/resources/fixtures/recorded/docs/actions/insertEmptyLineBefore.yml
new file mode 100644
index 00000000000..88fd4af0135
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertEmptyLineBefore.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: drop air
+  action:
+    name: insertEmptyLineBefore
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: |-
+
+    // bbb aaa
+  selections:
+    - anchor: {line: 1, character: 0}
+      active: {line: 1, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertEmptyLineBefore2.yml b/resources/fixtures/recorded/docs/actions/insertEmptyLineBefore2.yml
new file mode 100644
index 00000000000..106948d8e8d
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertEmptyLineBefore2.yml
@@ -0,0 +1,27 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: drop token air
+  action:
+    name: insertEmptyLineBefore
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+      modifiers:
+        - type: containingScope
+          scopeType: {type: token}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb  aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertEmptyLinesAround.yml b/resources/fixtures/recorded/docs/actions/insertEmptyLinesAround.yml
new file mode 100644
index 00000000000..45250d5a0b4
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertEmptyLinesAround.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: puff air
+  action:
+    name: insertEmptyLinesAround
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: |
+
+    // bbb aaa
+  selections:
+    - anchor: {line: 1, character: 0}
+      active: {line: 1, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertEmptyLinesAround2.yml b/resources/fixtures/recorded/docs/actions/insertEmptyLinesAround2.yml
new file mode 100644
index 00000000000..32366a0decf
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertEmptyLinesAround2.yml
@@ -0,0 +1,27 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: puff token bat
+  action:
+    name: insertEmptyLinesAround
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: b}
+      modifiers:
+        - type: containingScope
+          scopeType: {type: token}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: //  bbb  aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/insertSnippet.yml b/resources/fixtures/recorded/docs/actions/insertSnippet.yml
new file mode 100644
index 00000000000..4b6ebd4ff30
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/insertSnippet.yml
@@ -0,0 +1,51 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: snip if after air
+  action:
+    name: insertSnippet
+    snippetDescription:
+      type: list
+      fallbackLanguage: typescript
+      snippets:
+        - type: custom
+          body: "if ($1) {\n\t$0\n}"
+          scopeTypes:
+            - {type: statement}
+          languages: [c, cpp, csharp, java, javascript, typescript, javascriptreact, typescriptreact]
+        - type: custom
+          body: "if $1:\n\t$0"
+          scopeTypes:
+            - {type: statement}
+          languages: [python]
+        - type: custom
+          body: "if $1 then\n\t$0\nend"
+          scopeTypes:
+            - {type: statement}
+          languages: [lua]
+    destination:
+      type: primitive
+      insertionMode: after
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+spokenFormError: list insertion snippet
+initialState:
+  documentContents: const aaa = 0;
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 6}
+      end: {line: 0, character: 9}
+finalState:
+  documentContents: |-
+    const aaa = 0;
+    if () {
+        
+    }
+  selections:
+    - anchor: {line: 1, character: 4}
+      active: {line: 1, character: 4}
diff --git a/resources/fixtures/recorded/docs/actions/joinLines.yml b/resources/fixtures/recorded/docs/actions/joinLines.yml
new file mode 100644
index 00000000000..824e246d072
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/joinLines.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: join air
+  action:
+    name: joinLines
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: |-
+    // aaa
+    bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: // aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/moveToTarget.yml b/resources/fixtures/recorded/docs/actions/moveToTarget.yml
new file mode 100644
index 00000000000..3ae1f1d1772
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/moveToTarget.yml
@@ -0,0 +1,25 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: move air
+  action:
+    name: moveToTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    destination: {type: implicit}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: aaa// bbb
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 3}
diff --git a/resources/fixtures/recorded/docs/actions/moveToTarget2.yml b/resources/fixtures/recorded/docs/actions/moveToTarget2.yml
new file mode 100644
index 00000000000..e5f6a497b66
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/moveToTarget2.yml
@@ -0,0 +1,33 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: move air to bat
+  action:
+    name: moveToTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: // aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/nextHomophone.yml b/resources/fixtures/recorded/docs/actions/nextHomophone.yml
new file mode 100644
index 00000000000..4e732883e18
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/nextHomophone.yml
@@ -0,0 +1,29 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: phones sit
+  action:
+    name: replace
+    replaceWith: [rite]
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: i}
+  usePrePhraseSnapshot: false
+spokenFormError: Action 'replace'
+initialState:
+  documentContents: // right
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.i:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 8}
+finalState:
+  documentContents: // rite
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/nextHomophone2.yml b/resources/fixtures/recorded/docs/actions/nextHomophone2.yml
new file mode 100644
index 00000000000..4a804ce53cc
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/nextHomophone2.yml
@@ -0,0 +1,29 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: phones sit
+  action:
+    name: replace
+    replaceWith: [write]
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: i}
+  usePrePhraseSnapshot: false
+spokenFormError: Action 'replace'
+initialState:
+  documentContents: // rite
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.i:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 7}
+finalState:
+  documentContents: // write
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/outdentLine.yml b/resources/fixtures/recorded/docs/actions/outdentLine.yml
new file mode 100644
index 00000000000..7805b8df1c6
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/outdentLine.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: dedent air
+  action:
+    name: outdentLine
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: "    // bbb aaa"
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 11}
+      end: {line: 0, character: 14}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/pasteFromClipboard.yml b/resources/fixtures/recorded/docs/actions/pasteFromClipboard.yml
new file mode 100644
index 00000000000..0df47247065
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/pasteFromClipboard.yml
@@ -0,0 +1,28 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: paste to air
+  action:
+    name: pasteFromClipboard
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+  clipboard: clipboard
+finalState:
+  documentContents: // bbb clipboard
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/pasteFromClipboard2.yml b/resources/fixtures/recorded/docs/actions/pasteFromClipboard2.yml
new file mode 100644
index 00000000000..d856121e1e0
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/pasteFromClipboard2.yml
@@ -0,0 +1,28 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: paste before air
+  action:
+    name: pasteFromClipboard
+    destination:
+      type: primitive
+      insertionMode: before
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+  clipboard: clipboard
+finalState:
+  documentContents: // bbb clipboard aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/pasteFromClipboard3.yml b/resources/fixtures/recorded/docs/actions/pasteFromClipboard3.yml
new file mode 100644
index 00000000000..41752740231
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/pasteFromClipboard3.yml
@@ -0,0 +1,28 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: paste after air
+  action:
+    name: pasteFromClipboard
+    destination:
+      type: primitive
+      insertionMode: after
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+  clipboard: clipboard
+finalState:
+  documentContents: // bbb aaa clipboard
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/randomizeTargets.yml b/resources/fixtures/recorded/docs/actions/randomizeTargets.yml
new file mode 100644
index 00000000000..9020599fdbe
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/randomizeTargets.yml
@@ -0,0 +1,23 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: shuffle every item
+  action:
+    name: randomizeTargets
+    target:
+      type: primitive
+      modifiers:
+        - type: everyScope
+          scopeType: {type: collectionItem}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: "[1, 2, 3]"
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}
+  marks: {}
+finalState:
+  documentContents: "[2, 3, 1]"
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}
diff --git a/resources/fixtures/recorded/docs/actions/remove.yml b/resources/fixtures/recorded/docs/actions/remove.yml
new file mode 100644
index 00000000000..657c1cec200
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/remove.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: chuck air
+  action:
+    name: remove
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/replaceWithTarget.yml b/resources/fixtures/recorded/docs/actions/replaceWithTarget.yml
new file mode 100644
index 00000000000..4efcb9a2b7b
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/replaceWithTarget.yml
@@ -0,0 +1,25 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: bring air
+  action:
+    name: replaceWithTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    destination: {type: implicit}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: aaa// bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 3}
diff --git a/resources/fixtures/recorded/docs/actions/replaceWithTarget2.yml b/resources/fixtures/recorded/docs/actions/replaceWithTarget2.yml
new file mode 100644
index 00000000000..5bd0b970641
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/replaceWithTarget2.yml
@@ -0,0 +1,33 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: bring air to bat
+  action:
+    name: replaceWithTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: // aaa aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/replaceWithTarget3.yml b/resources/fixtures/recorded/docs/actions/replaceWithTarget3.yml
new file mode 100644
index 00000000000..e2856054daa
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/replaceWithTarget3.yml
@@ -0,0 +1,33 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: bring air before bat
+  action:
+    name: replaceWithTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    destination:
+      type: primitive
+      insertionMode: before
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: // aaa bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/replaceWithTarget4.yml b/resources/fixtures/recorded/docs/actions/replaceWithTarget4.yml
new file mode 100644
index 00000000000..29f0796956d
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/replaceWithTarget4.yml
@@ -0,0 +1,33 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: bring bat after air
+  action:
+    name: replaceWithTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: b}
+    destination:
+      type: primitive
+      insertionMode: after
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/replaceWithTarget5.yml b/resources/fixtures/recorded/docs/actions/replaceWithTarget5.yml
new file mode 100644
index 00000000000..59c11488108
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/replaceWithTarget5.yml
@@ -0,0 +1,40 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: bring air to bat and cap
+  action:
+    name: replaceWithTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: list
+        elements:
+          - type: primitive
+            mark: {type: decoratedSymbol, symbolColor: default, character: b}
+          - type: primitive
+            mark: {type: decoratedSymbol, symbolColor: default, character: c}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // aaa bbb ccc
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+    default.b:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.c:
+      start: {line: 0, character: 11}
+      end: {line: 0, character: 14}
+finalState:
+  documentContents: // aaa aaa aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/replaceWithTarget6.yml b/resources/fixtures/recorded/docs/actions/replaceWithTarget6.yml
new file mode 100644
index 00000000000..f652ba28f51
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/replaceWithTarget6.yml
@@ -0,0 +1,47 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: bring air and bat to cap and drum
+  action:
+    name: replaceWithTarget
+    source:
+      type: list
+      elements:
+        - type: primitive
+          mark: {type: decoratedSymbol, symbolColor: default, character: a}
+        - type: primitive
+          mark: {type: decoratedSymbol, symbolColor: default, character: b}
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: list
+        elements:
+          - type: primitive
+            mark: {type: decoratedSymbol, symbolColor: default, character: c}
+          - type: primitive
+            mark: {type: decoratedSymbol, symbolColor: default, character: d}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // aaa bbb ccc ddd
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+    default.b:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.c:
+      start: {line: 0, character: 11}
+      end: {line: 0, character: 14}
+    default.d:
+      start: {line: 0, character: 15}
+      end: {line: 0, character: 18}
+finalState:
+  documentContents: // aaa bbb aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/reverseTargets.yml b/resources/fixtures/recorded/docs/actions/reverseTargets.yml
new file mode 100644
index 00000000000..6f6a17c3ea3
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/reverseTargets.yml
@@ -0,0 +1,23 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: reverse every item
+  action:
+    name: reverseTargets
+    target:
+      type: primitive
+      modifiers:
+        - type: everyScope
+          scopeType: {type: collectionItem}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: "[1, 2, 3]"
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}
+  marks: {}
+finalState:
+  documentContents: "[3, 2, 1]"
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}
diff --git a/resources/fixtures/recorded/docs/actions/rewrapWithPairedDelimiter.yml b/resources/fixtures/recorded/docs/actions/rewrapWithPairedDelimiter.yml
new file mode 100644
index 00000000000..1dae3d9cb4b
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/rewrapWithPairedDelimiter.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: curly repack air
+  action:
+    name: rewrapWithPairedDelimiter
+    left: "{"
+    right: "}"
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb (aaa)
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 8}
+      end: {line: 0, character: 11}
+finalState:
+  documentContents: // bbb {aaa}
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/setSelection.yml b/resources/fixtures/recorded/docs/actions/setSelection.yml
new file mode 100644
index 00000000000..8704124a98b
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/setSelection.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: take air
+  action:
+    name: setSelection
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 7}
+      active: {line: 0, character: 10}
diff --git a/resources/fixtures/recorded/docs/actions/setSelectionAfter.yml b/resources/fixtures/recorded/docs/actions/setSelectionAfter.yml
new file mode 100644
index 00000000000..d93009856f9
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/setSelectionAfter.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: post air
+  action:
+    name: setSelectionAfter
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 10}
+      active: {line: 0, character: 10}
diff --git a/resources/fixtures/recorded/docs/actions/setSelectionBefore.yml b/resources/fixtures/recorded/docs/actions/setSelectionBefore.yml
new file mode 100644
index 00000000000..6b18bb3138a
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/setSelectionBefore.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: pre air
+  action:
+    name: setSelectionBefore
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 7}
+      active: {line: 0, character: 7}
diff --git a/resources/fixtures/recorded/docs/actions/sortTargets.yml b/resources/fixtures/recorded/docs/actions/sortTargets.yml
new file mode 100644
index 00000000000..d53f045031b
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/sortTargets.yml
@@ -0,0 +1,23 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: sort every item
+  action:
+    name: sortTargets
+    target:
+      type: primitive
+      modifiers:
+        - type: everyScope
+          scopeType: {type: collectionItem}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: "[3, 2, 1]"
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}
+  marks: {}
+finalState:
+  documentContents: "[1, 2, 3]"
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}
diff --git a/resources/fixtures/recorded/docs/actions/swapTargets.yml b/resources/fixtures/recorded/docs/actions/swapTargets.yml
new file mode 100644
index 00000000000..fdd42a5e58f
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/swapTargets.yml
@@ -0,0 +1,30 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: swap air with bat
+  action:
+    name: swapTargets
+    target1:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    target2:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+    default.b:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/swapTargets2.yml b/resources/fixtures/recorded/docs/actions/swapTargets2.yml
new file mode 100644
index 00000000000..a78d9c5f635
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/swapTargets2.yml
@@ -0,0 +1,44 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: swap air and bat with cap and drum
+  action:
+    name: swapTargets
+    target1:
+      type: list
+      elements:
+        - type: primitive
+          mark: {type: decoratedSymbol, symbolColor: default, character: a}
+        - type: primitive
+          mark: {type: decoratedSymbol, symbolColor: default, character: b}
+    target2:
+      type: list
+      elements:
+        - type: primitive
+          mark: {type: decoratedSymbol, symbolColor: default, character: c}
+        - type: primitive
+          mark: {type: decoratedSymbol, symbolColor: default, character: d}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // aaa bbb ccc ddd
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+    default.b:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.c:
+      start: {line: 0, character: 11}
+      end: {line: 0, character: 14}
+    default.d:
+      start: {line: 0, character: 15}
+      end: {line: 0, character: 18}
+finalState:
+  documentContents: // ccc ddd aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/toggleLineComment.yml b/resources/fixtures/recorded/docs/actions/toggleLineComment.yml
new file mode 100644
index 00000000000..62adf06e69e
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/toggleLineComment.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: comment air
+  action:
+    name: toggleLineComment
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 4}
+      end: {line: 0, character: 7}
+finalState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 3}
+      active: {line: 0, character: 3}
diff --git a/resources/fixtures/recorded/docs/actions/toggleLineComment2.yml b/resources/fixtures/recorded/docs/actions/toggleLineComment2.yml
new file mode 100644
index 00000000000..56801a17c71
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/toggleLineComment2.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: comment air
+  action:
+    name: toggleLineComment
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/wrapWithPairedDelimiter.yml b/resources/fixtures/recorded/docs/actions/wrapWithPairedDelimiter.yml
new file mode 100644
index 00000000000..eb75606187d
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/wrapWithPairedDelimiter.yml
@@ -0,0 +1,26 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: round wrap air
+  action:
+    name: wrapWithPairedDelimiter
+    left: (
+    right: )
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // bbb (aaa)
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/wrapWithPairedDelimiter2.yml b/resources/fixtures/recorded/docs/actions/wrapWithPairedDelimiter2.yml
new file mode 100644
index 00000000000..cf80b101a69
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/wrapWithPairedDelimiter2.yml
@@ -0,0 +1,47 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: if wrap air
+  action:
+    name: wrapWithSnippet
+    snippetDescription:
+      type: list
+      fallbackLanguage: typescript
+      snippets:
+        - type: custom
+          body: "if ($1) {\n\t$0\n}"
+          variableName: "0"
+          scopeType: {type: statement}
+          languages: [c, cpp, csharp, java, javascript, typescript, javascriptreact, typescriptreact]
+        - type: custom
+          body: "if $1:\n\t$0"
+          variableName: "0"
+          scopeType: {type: statement}
+          languages: [python]
+        - type: custom
+          body: "if $1 then\n\t$0\nend"
+          variableName: "0"
+          scopeType: {type: statement}
+          languages: [lua]
+    target:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+spokenFormError: list wrap with snippet
+initialState:
+  documentContents: const aaa = 0;
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 6}
+      end: {line: 0, character: 9}
+finalState:
+  documentContents: |-
+    if () {
+        const aaa = 0;
+    }
+  selections:
+    - anchor: {line: 0, character: 4}
+      active: {line: 0, character: 4}

From 444ec2ec8ab4ce8f9a605cf7542409d44df34330 Mon Sep 17 00:00:00 2001
From: Andreas Arvidsson <andreas.arvidsson87@gmail.com>
Date: Wed, 2 Sep 2026 00:06:41 +0200
Subject: [PATCH 2/5] Fixed trailing whitespace

---
 CHANGELOG.md                                               | 1 +
 resources/fixtures/recorded/docs/actions/insertSnippet.yml | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1cb2e2a3137..4e4359b36db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 2026
 
+- 2026-09-02: Visualize actions on the documentation page. ([#3330](https://github.com/cursorless-dev/cursorless/pull/3330))
 - 2026-09-01: Visualize modifiers on the documentation page. ([#3328](https://github.com/cursorless-dev/cursorless/pull/3328); [#3329](https://github.com/cursorless-dev/cursorless/pull/3329))
 - 2026-08-30: Overhauled the user documentation with generated and grouped action, modifier, and scope reference pages, richer descriptions and examples, dedicated paired-delimiter and target guides, and a streamlined landing page. ([#3303](https://github.com/cursorless-dev/cursorless/pull/3303); [#3304](https://github.com/cursorless-dev/cursorless/pull/3304); [#3305](https://github.com/cursorless-dev/cursorless/pull/3305); [#3306](https://github.com/cursorless-dev/cursorless/pull/3306); [#3307](https://github.com/cursorless-dev/cursorless/pull/3307); [#3308](https://github.com/cursorless-dev/cursorless/pull/3308); [#3309](https://github.com/cursorless-dev/cursorless/pull/3309); [#3310](https://github.com/cursorless-dev/cursorless/pull/3310); [#3311](https://github.com/cursorless-dev/cursorless/pull/3311); [#3312](https://github.com/cursorless-dev/cursorless/pull/3312); [#3313](https://github.com/cursorless-dev/cursorless/pull/3313); [#3314](https://github.com/cursorless-dev/cursorless/pull/3314); [#3315](https://github.com/cursorless-dev/cursorless/pull/3315); [#3316](https://github.com/cursorless-dev/cursorless/pull/3316))
 - 2026-05-03: Add support for if and for statements in Talon-script. [`#3274`](https://github.com/cursorless-dev/cursorless/pull/3274)
diff --git a/resources/fixtures/recorded/docs/actions/insertSnippet.yml b/resources/fixtures/recorded/docs/actions/insertSnippet.yml
index 4b6ebd4ff30..9e1892e0785 100644
--- a/resources/fixtures/recorded/docs/actions/insertSnippet.yml
+++ b/resources/fixtures/recorded/docs/actions/insertSnippet.yml
@@ -44,7 +44,7 @@ finalState:
   documentContents: |-
     const aaa = 0;
     if () {
-        
+
     }
   selections:
     - anchor: {line: 1, character: 4}

From b5e3e379b0dabe95ff096194e024c6c552a42aac Mon Sep 17 00:00:00 2001
From: Andreas Arvidsson <andreas.arvidsson87@gmail.com>
Date: Wed, 2 Sep 2026 00:08:46 +0200
Subject: [PATCH 3/5] Fix fail test

---
 resources/fixtures/recorded/docs/actions/insertSnippet.yml | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/resources/fixtures/recorded/docs/actions/insertSnippet.yml b/resources/fixtures/recorded/docs/actions/insertSnippet.yml
index 9e1892e0785..589727309f2 100644
--- a/resources/fixtures/recorded/docs/actions/insertSnippet.yml
+++ b/resources/fixtures/recorded/docs/actions/insertSnippet.yml
@@ -41,11 +41,7 @@ initialState:
       start: {line: 0, character: 6}
       end: {line: 0, character: 9}
 finalState:
-  documentContents: |-
-    const aaa = 0;
-    if () {
-
-    }
+  documentContents: "const aaa = 0;\nif () {\n    \n}"
   selections:
     - anchor: {line: 1, character: 4}
       active: {line: 1, character: 4}

From 414965a39c268404c5842bc8796abcf7916aa104 Mon Sep 17 00:00:00 2001
From: Andreas Arvidsson <andreas.arvidsson87@gmail.com>
Date: Wed, 2 Sep 2026 00:19:49 +0200
Subject: [PATCH 4/5] update tests

---
 .../src/docs/user/actions/moveToTarget.mdx    |  8 +++++
 .../recorded/docs/actions/applyFormatter3.yml |  4 +--
 .../recorded/docs/actions/callAsFunction2.yml |  4 +--
 .../recorded/docs/actions/insertSnippet.yml   |  6 +++-
 .../recorded/docs/actions/moveToTarget3.yml   | 33 +++++++++++++++++++
 .../recorded/docs/actions/moveToTarget4.yml   | 33 +++++++++++++++++++
 6 files changed, 83 insertions(+), 5 deletions(-)
 create mode 100644 resources/fixtures/recorded/docs/actions/moveToTarget3.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/moveToTarget4.yml

diff --git a/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx b/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
index 156e6152e62..82d0d575523 100644
--- a/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
@@ -38,4 +38,12 @@ Default: `move`
 
 <RecordedTestVisualizer fixtureName="docs/actions/moveToTarget2" />
 
+### `"move air before bat"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/moveToTarget3" />
+
+### `"move bat after air"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/moveToTarget4" />
+
 </RecordedTestVisualizerProvider>
diff --git a/resources/fixtures/recorded/docs/actions/applyFormatter3.yml b/resources/fixtures/recorded/docs/actions/applyFormatter3.yml
index 7b0cc73a11c..970171ee0e4 100644
--- a/resources/fixtures/recorded/docs/actions/applyFormatter3.yml
+++ b/resources/fixtures/recorded/docs/actions/applyFormatter3.yml
@@ -4,7 +4,7 @@ command:
   spokenForm: form camel at line
   action:
     name: replace
-    replaceWith: ['aaaBbb']
+    replaceWith: [aaaBbb]
     destination:
       type: primitive
       insertionMode: to
@@ -22,7 +22,7 @@ initialState:
       active: {line: 0, character: 0}
   marks: {}
 finalState:
-  documentContents: "aaaBbb"
+  documentContents: aaaBbb
   selections:
     - anchor: {line: 0, character: 0}
       active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/callAsFunction2.yml b/resources/fixtures/recorded/docs/actions/callAsFunction2.yml
index 52f53af15c4..8d51255deec 100644
--- a/resources/fixtures/recorded/docs/actions/callAsFunction2.yml
+++ b/resources/fixtures/recorded/docs/actions/callAsFunction2.yml
@@ -10,7 +10,7 @@ command:
     argument: {type: implicit}
   usePrePhraseSnapshot: false
 initialState:
-  documentContents: "// bbb aaa"
+  documentContents: // bbb aaa
   selections:
     - anchor: {line: 0, character: 3}
       active: {line: 0, character: 6}
@@ -19,7 +19,7 @@ initialState:
       start: {line: 0, character: 7}
       end: {line: 0, character: 10}
 finalState:
-  documentContents: "// aaa(bbb) aaa"
+  documentContents: // aaa(bbb) aaa
   selections:
     - anchor: {line: 0, character: 7}
       active: {line: 0, character: 10}
diff --git a/resources/fixtures/recorded/docs/actions/insertSnippet.yml b/resources/fixtures/recorded/docs/actions/insertSnippet.yml
index 589727309f2..4b6ebd4ff30 100644
--- a/resources/fixtures/recorded/docs/actions/insertSnippet.yml
+++ b/resources/fixtures/recorded/docs/actions/insertSnippet.yml
@@ -41,7 +41,11 @@ initialState:
       start: {line: 0, character: 6}
       end: {line: 0, character: 9}
 finalState:
-  documentContents: "const aaa = 0;\nif () {\n    \n}"
+  documentContents: |-
+    const aaa = 0;
+    if () {
+        
+    }
   selections:
     - anchor: {line: 1, character: 4}
       active: {line: 1, character: 4}
diff --git a/resources/fixtures/recorded/docs/actions/moveToTarget3.yml b/resources/fixtures/recorded/docs/actions/moveToTarget3.yml
new file mode 100644
index 00000000000..b9628e1f973
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/moveToTarget3.yml
@@ -0,0 +1,33 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: move air before bat
+  action:
+    name: moveToTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: a}
+    destination:
+      type: primitive
+      insertionMode: before
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: b}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+finalState:
+  documentContents: // aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
diff --git a/resources/fixtures/recorded/docs/actions/moveToTarget4.yml b/resources/fixtures/recorded/docs/actions/moveToTarget4.yml
new file mode 100644
index 00000000000..8f61f895186
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/moveToTarget4.yml
@@ -0,0 +1,33 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: move bat after air
+  action:
+    name: moveToTarget
+    source:
+      type: primitive
+      mark: {type: decoratedSymbol, symbolColor: default, character: b}
+    destination:
+      type: primitive
+      insertionMode: after
+      target:
+        type: primitive
+        mark: {type: decoratedSymbol, symbolColor: default, character: a}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // bbb aaa
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.b:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+    default.a:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+finalState:
+  documentContents: // aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}

From a6b414cc4e1cd4f0fbe27da18bf614cca348ce60 Mon Sep 17 00:00:00 2001
From: Andreas Arvidsson <andreas.arvidsson87@gmail.com>
Date: Wed, 2 Sep 2026 00:35:34 +0200
Subject: [PATCH 5/5] Added clipboard

---
 .../components/RecordedTestVisualizer.tsx     | 24 ++++++----
 .../src/docs/user/actions/applyFormatter.mdx  |  6 +--
 .../src/docs/user/actions/copyToClipboard.mdx | 14 ++++++
 .../src/docs/user/actions/cutToClipboard.mdx  |  2 +-
 .../src/docs/user/actions/moveToTarget.mdx    |  4 ++
 .../recorded/docs/actions/applyFormatter.yml  |  2 +-
 .../recorded/docs/actions/applyFormatter2.yml |  2 +-
 .../recorded/docs/actions/applyFormatter3.yml |  2 +-
 .../recorded/docs/actions/copyToClipboard.yml | 24 ++++++++++
 .../recorded/docs/actions/cutToClipboard.yml  | 17 ++++---
 .../recorded/docs/actions/moveToTarget5.yml   | 47 +++++++++++++++++++
 11 files changed, 120 insertions(+), 24 deletions(-)
 create mode 100644 resources/fixtures/recorded/docs/actions/copyToClipboard.yml
 create mode 100644 resources/fixtures/recorded/docs/actions/moveToTarget5.yml

diff --git a/packages/app-web-docs/src/docs/components/RecordedTestVisualizer.tsx b/packages/app-web-docs/src/docs/components/RecordedTestVisualizer.tsx
index 9e6b525fb8c..4c22eb4c338 100644
--- a/packages/app-web-docs/src/docs/components/RecordedTestVisualizer.tsx
+++ b/packages/app-web-docs/src/docs/components/RecordedTestVisualizer.tsx
@@ -146,14 +146,22 @@ function CodeState({
     [state.selections, state.marks, state.documentContents],
   );
   return (
-    <Code
-      link={link}
-      languageId={languageId}
-      renderWhitespace={renderWhitespace}
-      decorations={decorations}
-    >
-      {state.documentContents}
-    </Code>
+    <>
+      <Code
+        link={link}
+        languageId={languageId}
+        renderWhitespace={renderWhitespace}
+        decorations={decorations}
+      >
+        {state.documentContents}
+      </Code>
+      {state.clipboard != null && (
+        <div className="mt-2">
+          <strong>Clipboard:</strong>
+          &nbsp;<i>&quot;{state.clipboard}&quot;</i>
+        </div>
+      )}
+    </>
   );
 }
 
diff --git a/packages/app-web-docs/src/docs/user/actions/applyFormatter.mdx b/packages/app-web-docs/src/docs/user/actions/applyFormatter.mdx
index 5734e60e612..77989e6f729 100644
--- a/packages/app-web-docs/src/docs/user/actions/applyFormatter.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/applyFormatter.mdx
@@ -26,15 +26,15 @@ Default: `format`
 
 <RecordedTestVisualizerOptions />
 
-### `"form camel at bat"`
+### `"format camel at bat"`
 
 <RecordedTestVisualizer fixtureName="docs/actions/applyFormatter" />
 
-### `"form snake at bat"`
+### `"format snake at bat"`
 
 <RecordedTestVisualizer fixtureName="docs/actions/applyFormatter2" />
 
-### `"form camel at line"`
+### `"format camel at line"`
 
 <RecordedTestVisualizer fixtureName="docs/actions/applyFormatter3" />
 
diff --git a/packages/app-web-docs/src/docs/user/actions/copyToClipboard.mdx b/packages/app-web-docs/src/docs/user/actions/copyToClipboard.mdx
index da112a0cc73..5b72c8b8aab 100644
--- a/packages/app-web-docs/src/docs/user/actions/copyToClipboard.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/copyToClipboard.mdx
@@ -2,6 +2,8 @@
 sidebar_label: Copy
 ---
 
+import { RecordedTestVisualizer, RecordedTestVisualizerOptions, RecordedTestVisualizerProvider } from "@site/src/docs/components/RecordedTestVisualizer";
+
 # Copy (Copy to clipboard)
 
 Cursorless ID: `copyToClipboard`
@@ -17,3 +19,15 @@ Default: `copy`
 ## Examples
 
 - `"copy blue air"` - Copies the token containing letter `a` with a blue hat to the clipboard.
+
+## Visualization
+
+<RecordedTestVisualizerProvider>
+
+<RecordedTestVisualizerOptions />
+
+### `"copy line"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/copyToClipboard" />
+
+</RecordedTestVisualizerProvider>
diff --git a/packages/app-web-docs/src/docs/user/actions/cutToClipboard.mdx b/packages/app-web-docs/src/docs/user/actions/cutToClipboard.mdx
index 990e83db0c1..ca43875ea88 100644
--- a/packages/app-web-docs/src/docs/user/actions/cutToClipboard.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/cutToClipboard.mdx
@@ -26,7 +26,7 @@ Default: `carve`
 
 <RecordedTestVisualizerOptions />
 
-### `"carve bat"`
+### `"carve line"`
 
 <RecordedTestVisualizer fixtureName="docs/actions/cutToClipboard" />
 
diff --git a/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx b/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
index 82d0d575523..50cdcac47e4 100644
--- a/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
+++ b/packages/app-web-docs/src/docs/user/actions/moveToTarget.mdx
@@ -46,4 +46,8 @@ Default: `move`
 
 <RecordedTestVisualizer fixtureName="docs/actions/moveToTarget4" />
 
+### `"move air and bat to cap and drum"`
+
+<RecordedTestVisualizer fixtureName="docs/actions/moveToTarget5" />
+
 </RecordedTestVisualizerProvider>
diff --git a/resources/fixtures/recorded/docs/actions/applyFormatter.yml b/resources/fixtures/recorded/docs/actions/applyFormatter.yml
index b89cae384c0..ccc694fcd3e 100644
--- a/resources/fixtures/recorded/docs/actions/applyFormatter.yml
+++ b/resources/fixtures/recorded/docs/actions/applyFormatter.yml
@@ -1,7 +1,7 @@
 languageId: typescript
 command:
   version: 7
-  spokenForm: form camel at bat
+  spokenForm: format camel at bat
   action:
     name: replace
     replaceWith: [bbbAaa]
diff --git a/resources/fixtures/recorded/docs/actions/applyFormatter2.yml b/resources/fixtures/recorded/docs/actions/applyFormatter2.yml
index bb3383ca934..b74ae57f5c5 100644
--- a/resources/fixtures/recorded/docs/actions/applyFormatter2.yml
+++ b/resources/fixtures/recorded/docs/actions/applyFormatter2.yml
@@ -1,7 +1,7 @@
 languageId: typescript
 command:
   version: 7
-  spokenForm: form snake at bat
+  spokenForm: format snake at bat
   action:
     name: replace
     replaceWith: [bbb_aaa]
diff --git a/resources/fixtures/recorded/docs/actions/applyFormatter3.yml b/resources/fixtures/recorded/docs/actions/applyFormatter3.yml
index 970171ee0e4..1c6e3c07ee8 100644
--- a/resources/fixtures/recorded/docs/actions/applyFormatter3.yml
+++ b/resources/fixtures/recorded/docs/actions/applyFormatter3.yml
@@ -1,7 +1,7 @@
 languageId: typescript
 command:
   version: 7
-  spokenForm: form camel at line
+  spokenForm: format camel at line
   action:
     name: replace
     replaceWith: [aaaBbb]
diff --git a/resources/fixtures/recorded/docs/actions/copyToClipboard.yml b/resources/fixtures/recorded/docs/actions/copyToClipboard.yml
new file mode 100644
index 00000000000..08b28057c45
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/copyToClipboard.yml
@@ -0,0 +1,24 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: copy line
+  action:
+    name: copyToClipboard
+    target:
+      type: primitive
+      modifiers:
+        - type: containingScope
+          scopeType: {type: line}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: Hello there
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks: {}
+finalState:
+  documentContents: Hello there
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  clipboard: Hello there
diff --git a/resources/fixtures/recorded/docs/actions/cutToClipboard.yml b/resources/fixtures/recorded/docs/actions/cutToClipboard.yml
index 41d6cfbbe91..75760651979 100644
--- a/resources/fixtures/recorded/docs/actions/cutToClipboard.yml
+++ b/resources/fixtures/recorded/docs/actions/cutToClipboard.yml
@@ -1,25 +1,24 @@
 languageId: typescript
 command:
   version: 7
-  spokenForm: carve bat
+  spokenForm: carve line
   action:
     name: cutToClipboard
     target:
       type: primitive
-      mark: {type: decoratedSymbol, symbolColor: default, character: b}
+      modifiers:
+        - type: containingScope
+          scopeType: {type: line}
   usePrePhraseSnapshot: false
 initialState:
-  documentContents: // bbb aaa
+  documentContents: Hello there
   selections:
     - anchor: {line: 0, character: 0}
       active: {line: 0, character: 0}
-  marks:
-    default.b:
-      start: {line: 0, character: 3}
-      end: {line: 0, character: 6}
+  marks: {}
 finalState:
-  documentContents: // aaa
+  documentContents: ""
   selections:
     - anchor: {line: 0, character: 0}
       active: {line: 0, character: 0}
-  clipboard: bbb
+  clipboard: Hello there
diff --git a/resources/fixtures/recorded/docs/actions/moveToTarget5.yml b/resources/fixtures/recorded/docs/actions/moveToTarget5.yml
new file mode 100644
index 00000000000..04675935110
--- /dev/null
+++ b/resources/fixtures/recorded/docs/actions/moveToTarget5.yml
@@ -0,0 +1,47 @@
+languageId: typescript
+command:
+  version: 7
+  spokenForm: move air and bat to cap and drum
+  action:
+    name: moveToTarget
+    source:
+      type: list
+      elements:
+        - type: primitive
+          mark: {type: decoratedSymbol, symbolColor: default, character: a}
+        - type: primitive
+          mark: {type: decoratedSymbol, symbolColor: default, character: b}
+    destination:
+      type: primitive
+      insertionMode: to
+      target:
+        type: list
+        elements:
+          - type: primitive
+            mark: {type: decoratedSymbol, symbolColor: default, character: c}
+          - type: primitive
+            mark: {type: decoratedSymbol, symbolColor: default, character: d}
+  usePrePhraseSnapshot: false
+initialState:
+  documentContents: // aaa bbb ccc ddd
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}
+  marks:
+    default.a:
+      start: {line: 0, character: 3}
+      end: {line: 0, character: 6}
+    default.b:
+      start: {line: 0, character: 7}
+      end: {line: 0, character: 10}
+    default.c:
+      start: {line: 0, character: 11}
+      end: {line: 0, character: 14}
+    default.d:
+      start: {line: 0, character: 15}
+      end: {line: 0, character: 18}
+finalState:
+  documentContents: // aaa bbb
+  selections:
+    - anchor: {line: 0, character: 0}
+      active: {line: 0, character: 0}