---
title: "Mentions and emoji"
description: "Mention and Emoji add @mentions and emojis to the text, each as a node of its own, with a suggestion popup while people type."
canonical_url: "https://tiptap.dev/docs/editor/extensions/mentions-and-emoji"
---

# Mentions and emoji

Mention and Emoji add @mentions and emojis to the text, each as a node of its own, with a suggestion popup while people type.

## When you use them

- **Mentioning people.** Mention adds @mentions, for example to ping users, and shows a popup of matching items while someone types.
- **Several kinds of mentions.** Mention's `suggestions` setting defines more than one trigger, for example `@` for people and `#` for movies.
- **Emojis.** Emoji turns typed and pasted emojis into nodes, so emojis that a system can't show get a fallback image. It can also turn emoticons such as `<3` into emojis.

## How they work

- **They are nodes.** A mention or an emoji is a node inside the text, and Emoji renders inline. Copying text out of the editor turns emojis back into plain text. [Nodes and marks](https://tiptap.dev/docs/editor/core-concepts/nodes-and-marks.md)
- **The popup comes from the Suggestion utility.** Both have a `suggestion` setting that defines, for example, the character that opens the popup. Mention needs `@tiptap/suggestion` installed next to it. [Suggestion utility](https://tiptap.dev/docs/editor/api/utilities/suggestion.md)
- **The items and the rendering are yours.** Mention items can come from a filtered list or from async queries to an API, and you can pass a custom component to render them.
- **You add them yourself.** Neither is part of the [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md).

## Related

- [Menus and handles](https://tiptap.dev/docs/editor/extensions/menus.md) place other controls next to the content.
- [Text formatting](https://tiptap.dev/docs/editor/extensions/text-formatting.md) covers links and other marks inside a sentence.