ScriptsApr 11, 2026·1 min read

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.

SC
Script Depot · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i lexical @lexical/react
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).

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

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Mantine — Fully Featured React Components Library

Mantine is a modern React components library with 120+ customizable components and 70+ hooks. Dark mode, TypeScript-first, built-in form management, notifications, modals, and rich text editor. The batteries-included alternative to MUI.

Script Depot

Expo — Universal Native Apps for iOS, Android & Web

Expo is an open-source framework and platform for making universal React Native apps. Ship to iOS, Android, and web from one codebase — OTA updates, managed workflow, EAS Build cloud service, and 100+ prebuilt native modules.

Script Depot

D3.js — Bring Data to Life with SVG, Canvas & HTML

D3 is the grandparent of data visualization on the web — a low-level toolkit for binding data to DOM, applying data-driven transformations, and building any chart imaginable. Powers the New York Times, Observable, and thousands of dashboards.

Script Depot
◈Home🔍Search👤Me