Skip to main content

​
Introduction to Lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance. Built and maintained by Meta, Lexical powers text editing experiences across Facebook, Messenger, and WhatsApp.
Lexical is framework-agnostic at its core, with official React bindings available through @lexical/react.

​
Why Lexical?

Lexical was designed to solve the fundamental challenges of building rich text editors on the web. Traditional approaches using contentEditable are fraught with browser inconsistencies and edge cases. Lexical abstracts these complexities, allowing you to build reliable text editing experiences.

​
Key Features

Framework Agnostic

Core framework works with any UI library, with official React bindings available

Reliable & Accessible

Built-in accessibility support and WCAG compliance out of the box

Extensible Architecture

Plugin-based system with powerful extension points for custom functionality

Immutable State

Time-travel ready with built-in undo/redo support through immutable state model

Collaborative Editing

Real-time collaboration via Yjs integration for multi-user editing

Flexible Serialization

Import/export support for JSON, Markdown, and HTML formats

Rich Content Support

Built-in support for tables, lists, code blocks, images, and custom nodes

Type Safe

Written in TypeScript with comprehensive type definitions

​
Core Concepts

Lexical is built around several key architectural concepts:

​
Editor Instance

The editor instance, created via createEditor(), is the central hub that wires everything together. It manages the editor state, registers listeners, commands, and transforms, and handles DOM reconciliation.

​
EditorState

The EditorState is an immutable data model representing the editor content at a point in time. It contains:
  • A node tree (hierarchical structure of LexicalNodes)
  • A selection object (current cursor/selection state)
  • Fully serializable to/from JSON

​
Updates and Reads

Lexical uses a double-buffering update model:
  • editor.update(() => {...}) - for mutations
  • editor.read(() => {...}) - for read-only access
Functions prefixed with $ (like $getRoot(), $getSelection()) can only be called within these contexts.

​
Nodes

Everything in the editor is represented by nodes:
  • TextNode - Individual text segments with formatting
  • ElementNode - Container nodes like paragraphs, headings, lists
  • DecoratorNode - Custom React/DOM components embedded in the editor

Quickstart

Build your first Lexical editor in minutes

Installation

Install Lexical with your preferred package manager

Browser Support

Check which browsers are supported

API Reference

Explore the complete API documentation

​
Who Uses Lexical?

Lexical powers text editing experiences at Meta across:
  • Facebook posts and comments
  • Messenger chat input
  • WhatsApp web interface
  • Workplace by Meta
Thousands of developers worldwide use Lexical to build everything from simple comment boxes to full-featured document editors.

​
Next Steps

Ready to get started? Head over to the Quickstart Guide to build your first Lexical editor, or check out the Installation instructions for detailed setup information.

Build docs developers (and LLMs) love

Get started for freeTalk to us