npm i @udecode/plate-ui-mention


A plugin framework for building rich text editors with slate.

by udecode

11.0.6 (see all)License:MITTypeScript:Built-In
npm i @udecode/plate-ui-mention


PRs Welcome Tested with Jest
Powered by Vercel

Visit plate.udecode.io for docs, guides, API and more!


Plate consulting:

Looking to hire:

DM @zbeyens to get added to the list if your offer includes Plate contribution.


Slate is a low-level editor framework that helps you deal with difficult parts when building an editor, such as events handlers, elements, formatting, commands, rendering, serializing, normalizing, etc.

While you are trying to build your own editors, it still needs a lot of skills to make something similar to Quill or ProseMirror. This repository allows you to build your editor right away with minimal slate knowledge.

@udecode/plate is built on top of slate to handle plugins and state management for an optimal development experience. This repository comes with a lot of plugins as elements, marks, serializers, normalizers, queries, transforms, components and so on.

  • 🏎 Simple Start

You only need one component to get started: <Plate>

  • 🐻 State Management

zustand store is internally used to support multiple editor states.

  • 💅 Design System

The API is design system friendly. We provide a default design system for quick start but you can plug-in your own one using a single function.

  • 🔌 40+ Packages

We enforce separation of concerns by packaging each feature for build optimization and versioning.

  • 🛠 Extensible

All plugins accept extensible options and if you need to fork a plugin, all its functions are exported.

  • 📦 Tree-shaking / ES modules
  • ✅ TypeScript types
  • ✅ Unit tested with slate@0.63.0 and slate-react@0.65.2


To find out more see the following Plate documentation sections:

The documentation is far from being complete and will be constantly evolving (as will the packages).

Contributing and project organization

Ideas and discussions

Discussions is the best place for bringing opinions and contributions. Letting us know if we're going in the right or wrong direction is great feedback and will be much appreciated!


Plate is a modular, multi-package, monorepo project. It consists of a core package that creates the plugin system, based on which the plugin packages are implemented.

See the contributing guide to learn how to contribute your code to the project.


Core libraries

@udecode/plate-common@udecode/plate-common npm package badgeCommon queries, transforms and utilities.
@udecode/plate-core@udecode/plate-core npm package badgeCore plate architecture.

Element Plugins

@udecode/plate-basic-elements@udecode/plate-basic-elements npm package badgeBasic elements plugins.
@udecode/plate-alignment@udecode/plate-alignment npm package badgeText alignment plugin.
@udecode/plate-ui-alignment@udecode/plate-ui-alignment npm package badgeText alignment UI.
@udecode/plate-block-quote@udecode/plate-block-quote npm package badgeBlock quote plugin.
@udecode/plate-ui-block-quote@udecode/plate-ui-block-quote npm package badgeBlock quote UI.
@udecode/plate-code-block@udecode/plate-code-block npm package badgeCode block plugin.
@udecode/plate-ui-code-block@udecode/plate-ui-code-block npm package badgeCode block UI.
@udecode/plate-excalidraw@udecode/plate-excalidraw npm package badgeExcalidraw plugin.
@udecode/plate-heading@udecode/plate-heading npm package badgeHeadings (1-6) plugin.
@udecode/plate-image@udecode/plate-image npm package badgeImage plugin. Supports pasting images from clipboard.
@udecode/plate-ui-image@udecode/plate-ui-image npm package badgeImage UI.
@udecode/plate-link@udecode/plate-link npm package badgeLink plugin.
@udecode/plate-ui-link@udecode/plate-ui-link npm package badgeLink UI.
@udecode/plate-list@udecode/plate-list npm package badgeBulleted, numbered and to-do list plugins.
@udecode/plate-ui-list@udecode/plate-ui-list npm package badgeList UI.
@udecode/plate-media-embed@udecode/plate-media-embed npm package badgeMedia embed plugin.
@udecode/plate-ui-media-embed@udecode/plate-ui-media-embed npm package badgeMedia embed UI.
@udecode/plate-mention@udecode/plate-mention npm package badgeMention plugin (autocomplete @mentions, #tags, etc.).
@udecode/plate-ui-mention@udecode/plate-ui-mention npm package badgeMention UI.
@udecode/plate-paragraph@udecode/plate-paragraph npm package badgeParagraph plugin.
@udecode/plate-table@udecode/plate-table npm package badgeTable plugin.
@udecode/plate-ui-table@udecode/plate-ui-table npm package badgeTable UI.

Mark Plugins

@udecode/plate-basic-marks@udecode/plate-basic-marks npm package badgeBasic marks plugins: bold, code, italic, strikethrough, subscript, superscript and underline.
@udecode/plate-font@udecode/plate-font npm package badgeFont color and background color plugins.
@udecode/plate-highlight@udecode/plate-highlight npm package badgeHighlight plugin.
@udecode/plate-kbd@udecode/plate-kbd npm package badgeKeyboard input plugin.

Serializer Plugins

@udecode/plate-serializer-md@udecode/plate-serializer-md npm package badgeMarkdown serializer plugin.
@udecode/plate-serializer-csv@udecode/plate-serializer-csv npm package badgeCSV serializer plugin.


@udecode/plate@udecode/plate npm package badgeAll-in-one package.
@udecode/plate-autoformat@udecode/plate-autoformat npm package badgeAutoformatting plugin. Replaces predefined characters with a corresponding format (e.g. foo becomes bold).
@udecode/plate-break@udecode/plate-break npm package badgeInsert break plugins.
@udecode/plate-ui-dnd@udecode/plate-ui-dnd npm package badgeDrag and drop with react-dnd.
@udecode/plate-find-replace@udecode/plate-find-replace npm package badgeFind and replace plugin.
@udecode/plate-ui-find-replace@udecode/plate-ui-find-replace npm package badgeFind and replace UI.
@udecode/plate-node-id@udecode/plate-node-id npm package badgeNode ID plugin.
@udecode/plate-normalizers@udecode/plate-normalizers npm package badgeNormalizer plugins.
@udecode/plate-reset-node@udecode/plate-reset-node npm package badgeReset node plugin.
@udecode/plate-select@udecode/plate-select npm package badgeNode selecting plugins.
@udecode/plate-styled-components@udecode/plate-ui-fluent npm package badgeStyled components (Plate UI library).
@udecode/plate-trailing-block@udecode/plate-trailing-block npm package badgeTrailing-block plugin.
@udecode/plate-ui-toolbar@udecode/plate-ui-toolbar npm package badgeToolbar UI (balloon, heading, buttons, etc.).
@udecode/plate-test-utils@udecode/plate-test-utils npm package badgeTest utilities.

Looking for slate-plugins?

This repo has been renamed to plate. The name change should not disrupt any current usage, repo clones, pull requests or issue reporting. Links should redirect to the new location. The library formerly known as @udecode/slate-plugins is now available as @udecode/plate.

Author's Note

@zbeyens: I'm building an app with an editor like many of you and my first initiative was to spend months to share this work, while hundreds of developers were coding and debugging the exact same features. Open-source is a long-term investment for a bug-free product and reducing technical debt, so I can only encourage you to join this collaboration. Our goal is to build a fully-featured editor.

Become a Sponsor!


🌟 Stars and 📥 Pull requests are welcome! Don't hesitate to share your plugins here. Read our contributing guide to get started, or find us on Slack, we will take the time to guide you.

Thanks goes to these wonderful people (emoji key):

Ziad Beyens


Dylan Schiemann


Horacio Herrera

💻 🔌 💡 🐛 🤔

Eivind Barstad Waaler

💻 🔌 💡 🐛

Petr Sahula

💻 🔌 💡

Mark Vujevits



💻 🔌 🐛 🤔




💻 🐛

Daniel Lunde

💻 🔌

Roman Landenband

💻 🔌 💡


🔌 💡 🐛

Csaba Benkő


This project follows the all-contributors specification. Contributions of any kind welcome!





GitHub Stars



3mos ago








11d ago
No alternatives found
No tutorials found
Add a tutorial