Skip to main content

Lexical Plugins

React-based plugins are using Lexical editor instance from <LexicalComposer> context:

import {LexicalComposer} from '@lexical/react/LexicalComposer';
import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
const initialConfig = {
namespace: 'MyEditor',

<LexicalComposer initialConfig={initialConfig}>
contentEditable={<ContentEditable />}
placeholder={<div>Enter some text...</div>}
<HistoryPlugin />
<OnChangePlugin onChange={onChange} />

Note: Many plugins might require you to register the one or many Lexical nodes in order for the plugin to work. You can do this by passing a reference to the node to the nodes array in your initial editor configuration.

const initialConfig = {
namespace: 'MyEditor',
nodes: [ListNode, ListItemNode], // Pass the references to the nodes here


React wrapper for @lexical/plain-text that adds major features for plain text editing, including typing, deletion and copy/pasting

contentEditable={<ContentEditable />}
placeholder={<div>Enter some text...</div>}


React wrapper for @lexical/rich-text that adds major features for rich text editing, including typing, deletion, copy/pasting, indent/outdent and bold/italic/underline/strikethrough text formatting

contentEditable={<ContentEditable />}
placeholder={<div>Enter some text...</div>}


Plugin that calls onChange whenever Lexical state is updated. Using ignoreHistoryMergeTagChange (true by default) and ignoreSelectionChange (false by default) can give more granular control over changes that are causing onChange call

<OnChangePlugin onChange={onChange} />


React wrapper for @lexical/history that adds support for history stack management and undo / redo commands

<HistoryPlugin />


React wrapper for @lexical/link that adds support for links, including $toggleLink command support that toggles link for selected text

<LinkPlugin />


React wrapper for @lexical/list that adds support for lists (ordered and unordered)

<ListPlugin />


React wrapper for @lexical/list that adds support for check lists. Note that it requires some css to render check/uncheck marks. See PlaygroundEditorTheme.css for details.

<CheckListPlugin />


React wrapper for @lexical/table that adds support for tables

<TablePlugin />


Plugin that allows tab indentation in combination with @lexical/rich-text.

<TabIndentationPlugin />


Plugin will convert text into links based on passed matchers list. In example below whenever user types url-like string it will automaticaly convert it into a link node


const MATCHERS = [
(text) => {
const match = URL_MATCHER.exec(text);
if (match === null) {
return null;
const fullMatch = match[0];
return {
index: match.index,
length: fullMatch.length,
text: fullMatch,
url: fullMatch.startsWith('http') ? fullMatch : `https://${fullMatch}`,
// attributes: { rel: 'noreferrer', target: '_blank' }, // Optional link attributes


<AutoLinkPlugin matchers={MATCHERS} />


Adds clearEditor command support to clear editor's content

<ClearEditorPlugin />


Adds markdown shortcut support: headings, lists, code blocks, quotes, links and inline styles (bold, italic, strikethrough)

<MarkdownShortcutPlugin />


This plugin allows you to render a table of contents for a page from the headings from the editor. It listens to any deletions or modifications to those headings and updates the table of contents. Additionally, it's able to track any newly added headings and inserts them in the table of contents once they are created. This plugin also supports lazy loading - so you can defer adding the plugin until when the user needs it.

In order to use TableOfContentsPlugin, you need to pass a callback function in its children. This callback function gives you access to the up-to-date data of the table of contents. You can access this data through a single parameter for the callback which comes in the form of an array of arrays [[headingKey, headingTextContent, headingTag], [], [], ...]

headingKey: Unique key that identifies the heading. headingTextContent: A string of the exact text of the heading. headingTag: A string that reads either 'h1', 'h2', or 'h3'.

{(tableOfContentsArray) => {
return <MyCustomTableOfContentsPlugin tableOfContents={tableOfContentsArray} />;


Allows you to get a ref to the underlying editor instance outside of LexicalComposer, which is convenient when you want to interact with the editor from a separate part of your application.

  const editorRef = useRef(null);
<EditorRefPlugin editorRef={editorRef} />