# Lexical — Extensible Rich Text Editor Framework by Meta

> Lexical is an extensible text editor framework from Meta providing excellent reliability, accessibility, and performance. Powers Facebook posts, comments, and messaging — designed for modern collaborative editing.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i lexical @lexical/react
```

```tsx
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: (e: Error) => console.error(e),
};

function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Start typing...</div>}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
    </LexicalComposer>
  );
}
```

## Intro

Lexical is Meta extensible text editor framework. Built to power Facebook posts, comments, and Messenger composer at billion-user scale. Designed for accessibility (a11y first), performance (immutable state tree), and extensibility (plugin architecture).

- **Repo**: https://github.com/facebook/lexical
- **Stars**: 23K+
- **Language**: TypeScript
- **License**: MIT

## What Lexical Does

- **Rich text** — bold, italic, headings, lists, links, code
- **Plugins** — modular features (markdown, mentions, tables, code blocks)
- **Collaboration** — Yjs CRDT integration
- **Extensible nodes** — define custom node types
- **Immutable state** — predictable updates via EditorState
- **A11y** — ARIA roles, keyboard navigation
- **SSR** — server-render initial state

## Architecture

Editor maintains an immutable EditorState tree. Updates happen in `editor.update()` callbacks (transactional). DOM is a projection of state — never edited directly. Plugins register listeners and commands; nodes define their own DOM rendering and JSON serialization.

## Self-Hosting

Client library, no server.

## Key Features

- ~22KB core (smaller than Draft.js or Slate)
- Immutable EditorState
- Transactional updates
- Plugin architecture
- Yjs collaboration support
- Markdown shortcuts
- Tables, lists, code blocks plugins
- Custom node types
- Accessibility-first

## Comparison

| Editor | Backed By | Architecture | Bundle |
|---|---|---|---|
| Lexical | Meta | Immutable tree | ~22KB |
| TipTap | ProseMirror | Node tree | ~50KB |
| Slate | Independent | Immutable tree | ~30KB |
| Quill | Independent | Delta ops | ~40KB |
| Draft.js | Meta (deprecated) | Immutable | ~80KB |

## FAQ

**Q: Does it replace Draft.js?**
A: Yes. Meta has migrated internally. Draft.js is no longer maintained; new projects should go straight to Lexical.

**Q: How does it compare to TipTap?**
A: Lexical is lighter, has a more modern API, and is maintained by Meta; TipTap is built on ProseMirror with a mature ecosystem and richer extensions.

**Q: Does it support collaborative editing?**
A: Yes. `@lexical/yjs` integrates with Yjs CRDT.

## Sources & Credits

- Docs: https://lexical.dev
- GitHub: https://github.com/facebook/lexical
- License: MIT

---
Source: https://tokrepo.com/en/workflows/lexical-extensible-rich-text-editor-framework-meta-89ca3d82
Author: Script Depot