---
title: "Focus extension"
description: "Use the Focus extension in Tiptap to track and highlight the cursor's position. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/focus"
---

# Focus extension

Use the Focus extension in Tiptap to track and highlight the cursor's position. Learn more in our docs!

The Focus extension adds a CSS class to focused nodes. By default it adds `.has-focus`, but you can change that.

Note that it’s only a class, the styling is totally up to you. The usage example below has some CSS for that class.

> **Interactive demo:** [Focus](https://embed.tiptap.dev/preview/Extensions/Focus)

## Install

```bash
npm install @tiptap/extensions
```

And import it in your editor:

```ts
import { Editor } from '@tiptap/core'
import { Focus } from '@tiptap/extensions'

new Editor({
  extensions: [Focus],
})
```

## Settings

### className

The class that is applied to the focused element.

Default: `'has-focus'`

```js
Focus.configure({
  className: 'focus',
})
```

### mode

Apply the class to `'all'`, the `'shallowest'` or the `'deepest'` node.

Default: `'all'`

```js
Focus.configure({
  mode: 'deepest',
})
```

## Source code

[packages/extensions/focus/](https://github.com/ueberdosis/tiptap/blob/main/packages/extensions/src/focus/)