Precision Editing with Text Objects

Motions like w and $ are great for moving around, but they treat text as a linear stream of characters.

Text Objects treat text as structured blocks. They allow you to operate on semantic units like:

“The content inside these parentheses”
“This entire function block”
“This HTML tag”
“This quoted string”

Text Objects are the secret weapon that makes Vim users look like wizards. They almost always follow this grammar:

**Operator + ( i

a ) + Object**

Where:

i = Inner (The content inside the container)
a = Around (The content plus the container itself)

🔍 Inner vs Around

Imagine the text: ( hello world )

di( (Delete Inner ( ): Deletes ` hello world ` → Result: ()
da( (Delete Around ( ): Deletes ( hello world ) → Result: `` (nothing)

  function test() 
  {
   return true; 
  }
  

i{ (Inner Block)

a{ (Around Block)

1. The Delimiters

These objects are defined by pairs of characters.

Object	Name	Example Context	`di...` Result
`"`	Double Quotes	`print("hello")`	`print("")`
`'`	Single Quotes	`const x = 'foo'`	`const x = ''`
`	Backticks	`code`
`(`	Parentheses	`func(arg1)`	`func()`
`[`	Brackets	`arr[index]`	`arr[]`
`{`	Braces	`if { x }`	`if {}`
`<`	Angle Brackets	`<div class="x">`	`<>`
`t`	HTML Tag	`<div>content</div>`	`<div></div>`

[!TIP] b is an alias for ( (parentheses). B is an alias for { (curly braces). dib is easier to type than di(.

2. Semantic Objects

These objects depend on the structure of the document.

Object	Name	Description
`w`	Word	A sequence of letters/numbers. `diw` deletes the word under cursor.
`W`	WORD	A sequence of non-whitespace characters (includes punctuation).
`s`	Sentence	Ends with `.`, `!`, or `?`.
`p`	Paragraph	Bounded by empty lines.

[!IMPORTANT] diw (Delete Inner Word) works even if your cursor is in the middle of the word. You don’t need to move to the start of the word first! This is a huge efficiency gain.

3. Real World Examples

Editing HTML

Target: <div><p>Content to change</p></div> Command: cit (Change Inner Tag) Result: <div><p>|</p></div> (Cursor inside p tag in Insert Mode)

Editing JSON

Target: { "key": "value" } Command: ci" (Change Inner Quote) - assuming cursor is on “value”. Result: { "key": "|" }

Refactoring Functions

Target:

function heavyCalc() {
  // 50 lines of code...
}

Command: ci{ (Change Inner Brace) - with cursor anywhere inside the function. Result:

function heavyCalc() {
  |
}

4. Interactive Text Object Visualizer

Hover over the buttons to see what text would be selected by the command.

Visualizerfunction init() {
  const config = {
  name: "Vim Mode",
  active: true
  };
  return config;
}

Hover buttons to visualize selection