# 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 as a script file and run:

## 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: 取代 Draft.js 吗？**
A: 是的。Meta 内部已迁移。Draft.js 不再维护，新项目建议直接用 Lexical。

**Q: 和 TipTap 比？**
A: Lexical 更轻、API 更现代、Meta 维护；TipTap 基于 ProseMirror，生态成熟、扩展更丰富。

**Q: 支持协作编辑？**
A: 支持。`@lexical/yjs` 集成 Yjs CRDT。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/89ca3d82-356f-11f1-9bc6-00163e2b0d79
Author: Script Depot