> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# Commands

> Commands are the way to manipulate the editor content in Tiptap. They provide a fluent API for content manipulation.

## Command System

Tiptap provides a command system that allows you to manipulate the editor content. Commands can be executed individually, chained together, or checked for availability.

### Single Commands

Execute commands directly:

```typescript theme={null}
editor.commands.focus()
editor.commands.toggleBold()
editor.commands.insertContent('<p>Hello!</p>')
```

### Chained Commands

Chain multiple commands and execute them at once:

```typescript theme={null}
editor
  .chain()
  .focus()
  .toggleBold()
  .insertContent('Hello')
  .run()
```

### Can Commands

Check if a command can be executed without running it:

```typescript theme={null}
if (editor.can().toggleBold()) {
  // Bold can be toggled
}

// Also works with chains
if (editor.can().chain().focus().toggleBold().run()) {
  // The entire chain can be executed
}
```

## Content Commands

### setContent()

Replace the whole document with new content.

```typescript theme={null}
editor.commands.setContent(content: Content, options?: SetContentOptions): boolean
```

<ParamField path="content" type="Content" required>
  The new content (HTML, JSON, or ProseMirror node).
</ParamField>

<ParamField path="options" type="SetContentOptions">
  <Expandable title="properties">
    <ParamField path="parseOptions" type="ParseOptions" default="{}">
      Options for parsing the content.
    </ParamField>

    <ParamField path="errorOnInvalidContent" type="boolean">
      Whether to throw an error if content is invalid.
    </ParamField>

    <ParamField path="emitUpdate" type="boolean" default="true">
      Whether to emit an update event.
    </ParamField>
  </Expandable>
</ParamField>

**Example**

```typescript theme={null}
editor.commands.setContent('<p>Example text</p>')

editor.commands.setContent({
  type: 'doc',
  content: [{
    type: 'paragraph',
    content: [{ type: 'text', text: 'Example' }]
  }]
})
```

### insertContent()

Insert content at the current position.

```typescript theme={null}
editor.commands.insertContent(value: Content, options?: InsertContentOptions): boolean
```

<ParamField path="value" type="Content" required>
  The content to insert.
</ParamField>

<ParamField path="options" type="InsertContentOptions">
  <Expandable title="properties">
    <ParamField path="parseOptions" type="ParseOptions">
      Options for parsing the content.
    </ParamField>

    <ParamField path="updateSelection" type="boolean" default="true">
      Whether to update the selection after inserting.
    </ParamField>
  </Expandable>
</ParamField>

**Example**

```typescript theme={null}
editor.commands.insertContent('<p>New paragraph</p>')
editor.commands.insertContent({ type: 'paragraph', content: [{ type: 'text', text: 'Hello' }] })
```

### insertContentAt()

Insert content at a specific position.

```typescript theme={null}
editor.commands.insertContentAt(
  position: number | Range,
  value: Content,
  options?: InsertContentOptions
): boolean
```

<ParamField path="position" type="number | Range" required>
  The position or range where to insert content.
</ParamField>

<ParamField path="value" type="Content" required>
  The content to insert.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.insertContentAt(10, '<p>Inserted at position 10</p>')
editor.commands.insertContentAt({ from: 0, to: 5 }, 'Replacement')
```

### clearContent()

Clear the entire document.

```typescript theme={null}
editor.commands.clearContent(emitUpdate?: boolean): boolean
```

<ParamField path="emitUpdate" type="boolean" default="true">
  Whether to emit an update event.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.clearContent()
```

## Selection Commands

### focus()

Focus the editor at a specific position.

```typescript theme={null}
editor.commands.focus(
  position?: FocusPosition,
  options?: { scrollIntoView?: boolean }
): boolean
```

<ParamField path="position" type="FocusPosition">
  Where to focus: `'start'`, `'end'`, `'all'`, `true`, `false`, or a number.
</ParamField>

<ParamField path="options.scrollIntoView" type="boolean" default="true">
  Whether to scroll the focused position into view.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.focus()
editor.commands.focus('start')
editor.commands.focus('end')
editor.commands.focus(32)
editor.commands.focus('all')
```

### blur()

Remove focus from the editor.

```typescript theme={null}
editor.commands.blur(): boolean
```

**Example**

```typescript theme={null}
editor.commands.blur()
```

### setTextSelection()

Set the text selection.

```typescript theme={null}
editor.commands.setTextSelection(position: number | Range): boolean
```

<ParamField path="position" type="number | Range" required>
  The position or range to select.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.setTextSelection(10)
editor.commands.setTextSelection({ from: 5, to: 15 })
```

### selectAll()

Select the entire document.

```typescript theme={null}
editor.commands.selectAll(): boolean
```

**Example**

```typescript theme={null}
editor.commands.selectAll()
```

### selectParentNode()

Select the parent node.

```typescript theme={null}
editor.commands.selectParentNode(): boolean
```

**Example**

```typescript theme={null}
editor.commands.selectParentNode()
```

## Mark Commands

### setMark()

Apply a mark to the selection.

```typescript theme={null}
editor.commands.setMark(
  typeOrName: string | MarkType,
  attributes?: Record<string, any>
): boolean
```

<ParamField path="typeOrName" type="string | MarkType" required>
  The mark type or name.
</ParamField>

<ParamField path="attributes" type="Record<string, any>">
  Attributes to apply to the mark.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.setMark('bold')
editor.commands.setMark('link', { href: 'https://example.com' })
```

### toggleMark()

Toggle a mark on and off.

```typescript theme={null}
editor.commands.toggleMark(
  typeOrName: string | MarkType,
  attributes?: Record<string, any>,
  options?: { extendEmptyMarkRange?: boolean }
): boolean
```

<ParamField path="typeOrName" type="string | MarkType" required>
  The mark type or name.
</ParamField>

<ParamField path="attributes" type="Record<string, any>">
  Attributes of the mark.
</ParamField>

<ParamField path="options.extendEmptyMarkRange" type="boolean" default="false">
  Removes the mark even across the current selection.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.toggleMark('bold')
editor.commands.toggleMark('highlight', { color: 'yellow' })
```

### unsetMark()

Remove a mark from the selection.

```typescript theme={null}
editor.commands.unsetMark(
  typeOrName: string | MarkType,
  options?: { extendEmptyMarkRange?: boolean }
): boolean
```

<ParamField path="typeOrName" type="string | MarkType" required>
  The mark type or name.
</ParamField>

<ParamField path="options.extendEmptyMarkRange" type="boolean" default="false">
  Removes the mark even across the current selection.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.unsetMark('bold')
editor.commands.unsetMark('link')
```

### unsetAllMarks()

Remove all marks from the selection.

```typescript theme={null}
editor.commands.unsetAllMarks(): boolean
```

**Example**

```typescript theme={null}
editor.commands.unsetAllMarks()
```

## Node Commands

### setNode()

Change the type of a node.

```typescript theme={null}
editor.commands.setNode(
  typeOrName: string | NodeType,
  attributes?: Record<string, any>
): boolean
```

<ParamField path="typeOrName" type="string | NodeType" required>
  The node type or name.
</ParamField>

<ParamField path="attributes" type="Record<string, any>">
  Attributes to set on the node.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.setNode('heading', { level: 2 })
editor.commands.setNode('paragraph')
```

### toggleNode()

Toggle a node with another node.

```typescript theme={null}
editor.commands.toggleNode(
  typeOrName: string | NodeType,
  toggleTypeOrName: string | NodeType,
  attributes?: Record<string, any>
): boolean
```

<ParamField path="typeOrName" type="string | NodeType" required>
  The node type or name to toggle.
</ParamField>

<ParamField path="toggleTypeOrName" type="string | NodeType" required>
  The node type to toggle with.
</ParamField>

<ParamField path="attributes" type="Record<string, any>">
  Attributes for the node.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.toggleNode('codeBlock', 'paragraph')
```

### deleteNode()

Delete a node.

```typescript theme={null}
editor.commands.deleteNode(typeOrName: string | NodeType): boolean
```

<ParamField path="typeOrName" type="string | NodeType" required>
  The node type or name to delete.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.deleteNode('image')
```

### deleteCurrentNode()

Delete the currently selected node.

```typescript theme={null}
editor.commands.deleteCurrentNode(): boolean
```

**Example**

```typescript theme={null}
editor.commands.deleteCurrentNode()
```

## List Commands

### toggleList()

Toggle between a list and normal paragraphs.

```typescript theme={null}
editor.commands.toggleList(
  listTypeOrName: string | NodeType,
  itemTypeOrName: string | NodeType
): boolean
```

<ParamField path="listTypeOrName" type="string | NodeType" required>
  The list type (e.g., `'bulletList'`, `'orderedList'`).
</ParamField>

<ParamField path="itemTypeOrName" type="string | NodeType" required>
  The list item type (usually `'listItem'`).
</ParamField>

**Example**

```typescript theme={null}
editor.commands.toggleList('bulletList', 'listItem')
editor.commands.toggleList('orderedList', 'listItem')
```

### sinkListItem()

Sink a list item (increase indent).

```typescript theme={null}
editor.commands.sinkListItem(typeOrName: string | NodeType): boolean
```

<ParamField path="typeOrName" type="string | NodeType" required>
  The list item type.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.sinkListItem('listItem')
```

### liftListItem()

Lift a list item (decrease indent).

```typescript theme={null}
editor.commands.liftListItem(typeOrName: string | NodeType): boolean
```

<ParamField path="typeOrName" type="string | NodeType" required>
  The list item type.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.liftListItem('listItem')
```

### splitListItem()

Split a list item at the current position.

```typescript theme={null}
editor.commands.splitListItem(typeOrName: string | NodeType): boolean
```

<ParamField path="typeOrName" type="string | NodeType" required>
  The list item type.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.splitListItem('listItem')
```

## Text Transformation Commands

### deleteSelection()

Delete the current selection.

```typescript theme={null}
editor.commands.deleteSelection(): boolean
```

**Example**

```typescript theme={null}
editor.commands.deleteSelection()
```

### deleteRange()

Delete content in a range.

```typescript theme={null}
editor.commands.deleteRange(range: Range): boolean
```

<ParamField path="range" type="Range" required>
  The range to delete.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.deleteRange({ from: 5, to: 10 })
```

### enter()

Trigger enter key behavior.

```typescript theme={null}
editor.commands.enter(): boolean
```

**Example**

```typescript theme={null}
editor.commands.enter()
```

## Attribute Commands

### updateAttributes()

Update attributes of a node or mark.

```typescript theme={null}
editor.commands.updateAttributes(
  typeOrName: string | NodeType | MarkType,
  attributes: Record<string, any>
): boolean
```

<ParamField path="typeOrName" type="string | NodeType | MarkType" required>
  The node or mark type or name.
</ParamField>

<ParamField path="attributes" type="Record<string, any>" required>
  The attributes to update.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.updateAttributes('heading', { level: 3 })
editor.commands.updateAttributes('link', { href: 'https://new-url.com' })
```

### resetAttributes()

Reset node or mark attributes to defaults.

```typescript theme={null}
editor.commands.resetAttributes(
  typeOrName: string | NodeType | MarkType,
  attributes: string | string[]
): boolean
```

<ParamField path="typeOrName" type="string | NodeType | MarkType" required>
  The node or mark type or name.
</ParamField>

<ParamField path="attributes" type="string | string[]" required>
  The attribute names to reset.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.resetAttributes('textStyle', 'color')
editor.commands.resetAttributes('heading', ['level', 'textAlign'])
```

## Utility Commands

### scrollIntoView()

Scroll the current selection into view.

```typescript theme={null}
editor.commands.scrollIntoView(): boolean
```

**Example**

```typescript theme={null}
editor.commands.scrollIntoView()
```

### setMeta()

Set transaction metadata.

```typescript theme={null}
editor.commands.setMeta(key: string, value: any): boolean
```

<ParamField path="key" type="string" required>
  The metadata key.
</ParamField>

<ParamField path="value" type="any" required>
  The metadata value.
</ParamField>

**Example**

```typescript theme={null}
editor.commands.setMeta('appendedTransaction', true)
```

## Creating Custom Commands

You can create custom commands in extensions:

```typescript theme={null}
import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create({
  name: 'customExtension',

  addCommands() {
    return {
      // Simple command
      myCommand: () => ({ commands }) => {
        return commands.insertContent('Custom content!')
      },

      // Command with parameters
      insertCustomNode: (attrs) => ({ commands }) => {
        return commands.insertContent({
          type: 'customNode',
          attrs,
        })
      },

      // Complex command with transaction access
      complexCommand: () => ({ tr, state, dispatch }) => {
        if (!dispatch) return true

        const { from, to } = state.selection
        tr.insertText('Hello', from, to)

        return true
      },
    }
  },
})

// Usage
editor.commands.myCommand()
editor.commands.insertCustomNode({ id: '123' })
editor.chain().focus().myCommand().run()
```

## Command Return Values

All commands return a boolean:

* `true` - Command executed successfully
* `false` - Command could not be executed (e.g., invalid state, not applicable)

```typescript theme={null}
const success = editor.commands.toggleBold()

if (success) {
  console.log('Bold toggled successfully')
} else {
  console.log('Could not toggle bold')
}
```