Lexical

Lexical is Meta’s extensible text editor framework, engineered to be the reliable, accessible, and performant foundation for rich-text editing on the web. Its framework-agnostic core exposes a small, composable API around an immutable editor state and a DOM reconciler, so you describe content as a tree of nodes and let Lexical efficiently diff and render changes.

Rather than shipping a monolithic editor, Lexical gives you primitives and a plugin-based architecture you assemble into exactly the editing surface you need. Official React bindings, first-class TypeScript support, and a rich ecosystem of packages for lists, tables, code blocks, Markdown, collaboration, and more make it a production-grade base for everything from comment boxes to full document editors.

What You Get

• A framework-agnostic core with an immutable, serializable editor state and an efficient DOM reconciler
• A plugin-based architecture with commands, node overrides, and custom node types for extending behavior
• Official React bindings (@lexical/react) plus feature packages for lists, tables, code, links, and Markdown
• Built-in accessibility, undo/redo history, and JSON/HTML/Markdown serialization
• Real-time collaborative editing through Yjs integration and comprehensive TypeScript definitions

Common Use Cases

• Building rich-text comment boxes, chat composers, and note-taking inputs
• Powering full document editors with tables, code blocks, images, and custom embeds
• Adding collaborative, real-time editing surfaces backed by Yjs
• Creating domain-specific editors with custom nodes and command-driven behavior

Under The Hood

Architecture - Lexical centers on an immutable EditorState tree of LexicalNode instances, mutated only inside transactional editor.update() closures in LexicalUpdates.ts; the LexicalReconciler.ts pass then diffs the pending state against the current DOM and applies the minimal mutations to the contenteditable element, while LexicalEditor.ts owns registration of commands, node types, transforms, and listeners. Selection is modeled explicitly in LexicalSelection.ts and normalized so behavior stays consistent across browsers. Tech Stack - The core is written in TypeScript (~79% of the repo) with a thin Flow-typed compatibility layer, published as a tree-shakeable ESM/CJS package with zero runtime dependencies beyond an internal helper. The project is a pnpm workspace monorepo of 30+ packages, built with a custom Rollup-based script and tested with Vitest and Playwright. Code Quality - Code quality is high: the lexical core alone carries dozens of unit test files alongside browser and end-to-end suites, strict TypeScript types, an internal ESLint plugin, and a ci-check gate covering lint, types, and Flow. Modules are cohesive and single-purpose (reconciler, GC, mutations, normalization each isolated), and the immutable-state discipline keeps update logic explicit and testable. API Design - The public API is compact and ergonomic once its model clicks: $-prefixed functions (e.g. $getRoot, $getSelection) signal editor-state scope, custom nodes extend well-defined base classes, and behavior is composed through commands and plugins rather than configuration. Official React bindings and extensive documentation at lexical.dev lower the barrier, though the immutable-state and reconciliation concepts impose a real initial learning curve.