Lexical is a lean, highly extensible, and framework-agnostic JavaScript text editor framework created by Meta. It is designed to be lightweight and performant, prioritizing reliability and accessibility. Lexical's core package is only 22kb, ensuring developers only include the features they require. The framework works by attaching itself to a contentEditable element, providing a declarative API that abstracts away the complexities of direct DOM manipulation. It is currently used in production to power the text editing experiences for millions of daily users across major platforms including Facebook, Instagram, Messenger, WhatsApp, and Workplace.

Lexical employs a sophisticated, immutable data model known as Editor State, which consists of a node tree and a selection object. This model effectively decouples structure from formatting, enabling a canonical document representation regardless of the order in which styles are applied. By utilizing an internal DOM reconciler that performs highly efficient diffing between current and pending states, Lexical provides a consistent, high-performance editing surface. The framework also supports complex features such as real-time collaborative editing through Yjs integration.

Some of the key features are:

• Framework Agnostic: Core functionality is independent of any UI framework, with official React bindings available.
• Extensible Architecture: A plugin-based system allows developers to build and add modular features, such as tables, lists, and custom nodes.
• Immutable State Model: Data is handled as immutable snapshots, enabling efficient time-travel capabilities like undo and redo.
• Built-in Accessibility: Designed from the ground up to follow WCAG best practices and maintain compatibility with assistive technologies.
• Serialization Support: Seamless import and export capabilities for JSON, Markdown, and HTML, facilitating data transfer and persistence.
• Type Safety: Written in TypeScript with comprehensive type definitions to improve the developer experience.

Lexical operates using an event-driven system where developers register listeners, node transforms, and commands to handle user interactions and content changes. The system uses a specialized update closure where developers perform synchronous mutations on a clone of the editor state, which Lexical then batches and reconciles back to the DOM, ensuring high performance and minimal layout thrashing. The framework provides helper functions, prefixed with $, to ensure logic is executed within the safe context of an update or read operation.

Some common use cases include:

• WYSIWYG Editors: Building robust rich text editors for content management systems.
• Messaging Apps: Creating lightweight, feature-rich composers for chat products.
• Collaboration Tools: Developing shared writing surfaces with real-time editing support.
• Social Media Platforms: Powering user-generated content editors that require support for mentions, hashtags, and media embeds.