Lexical — Extensible Rich Text Editor Framework by Meta

What it is

Lexical is an extensible text editor framework from Meta. It provides the core editor engine and a plugin system for building rich text editors with excellent reliability, accessibility, and performance. Lexical powers Facebook posts, comments, and messaging. It is designed around an immutable state model that makes collaborative editing and undo/redo straightforward.

Lexical is designed for frontend developers building rich text editing experiences in React or vanilla JavaScript applications.

How it saves time or tokens

Building a rich text editor from scratch is one of the hardest frontend challenges: content editable behavior is inconsistent across browsers, accessibility requirements are complex, and collaborative editing needs a solid state model. Lexical provides all of this as a framework. The plugin system lets you add features (mentions, hashtags, tables, embeds) incrementally without modifying the core editor. A production-quality editor that would take months to build from scratch can be assembled from Lexical plugins in days.

How to use

1. Install Lexical with React bindings:

npm install lexical @lexical/react

1. Create a basic rich text editor:

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';

const initialConfig = {
  namespace: 'MyEditor',
  onError: (error: Error) => console.error(error),
};

export function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
    </LexicalComposer>
  );
}

1. Add plugins for additional features (toolbar, mentions, tables, etc.).

Example

Adding a toolbar with bold, italic, and link formatting:

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { FORMAT_TEXT_COMMAND } from 'lexical';

function ToolbarPlugin() {
  const [editor] = useLexicalComposerContext();

  return (
    <div className='toolbar'>
      <button onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}>
        Bold
      </button>
      <button onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}>
        Italic
      </button>
    </div>
  );
}

Related on TokRepo

• Coding tools — Browse frontend development tools
• Documentation tools — Explore text editing and documentation tools

Common pitfalls

• Trying to access the DOM directly instead of using Lexical's state model. Lexical manages the DOM through its editor state. Direct DOM manipulation will break the editor's state synchronization.
• Not wrapping plugins inside LexicalComposer. All Lexical plugins must be children of the LexicalComposer component. Plugins outside the composer cannot access the editor instance.
• Ignoring accessibility from the start. Lexical provides excellent accessibility primitives, but you must use them correctly in custom plugins. Test with screen readers during development, not as an afterthought.