# facebook/lexical

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/facebook-lexical).**

23,562 stars · 2,187 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/facebook/lexical
- Homepage: https://lexical.dev
- awesome-repositories: https://awesome-repositories.com/repository/facebook-lexical.md

## Description

Lexical is a modular rich text editor framework used to build extensible web-based editors. It functions as a state-driven content editor that maintains a serializable, immutable snapshot of document content to ensure predictable updates and accessibility compliance.

The framework is distinguished by its plugin-based architecture and customizable node framework, which allow developers to extend editor behavior through specialized content nodes and encapsulated runtime logic. It also includes a collaborative editing engine capable of synchronizing document state across multiple clients in real time using shared data models and conflict resolution.

The toolkit covers a broad range of capabilities, including the development of block-based editing workflows, chat composers, and rich input fields. It provides tools for web content management through the serialization of state to JSON, HTML, and Markdown, as well as a DOM-based text processor that maps internal state to browser selection ranges.

## Tags

### User Interface & Experience

- [Rich Text Editors](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors.md) — Provides a modular framework for building extensible rich text editors with accessibility compliance and structured document models. ([source](https://cdn.jsdelivr.net/gh/facebook/lexical@main/README.md))
- [Accessibility Standards](https://awesome-repositories.com/f/user-interface-experience/accessibility-standards.md) — Implements built-in support for WCAG standards to ensure the editor is accessible to all users. ([source](https://cdn.jsdelivr.net/gh/facebook/lexical@main/README.md))
- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Develops text input interfaces with ARIA attributes and keyboard support for screen readers.
- [Command-Based Action Dispatchers](https://awesome-repositories.com/f/user-interface-experience/command-based-action-dispatchers.md) — Provides a prioritized command system to coordinate complex editor behaviors through registered listeners.
- [Content Node Definitions](https://awesome-repositories.com/f/user-interface-experience/custom-ui-development-tools/node-ui-customization/content-node-definitions.md) — Creates specialized content types by extending base node classes to define custom rendering. ([source](https://github.com/facebook/lexical/blob/main/AGENTS.md))
- [DOM-State Mapping Layers](https://awesome-repositories.com/f/user-interface-experience/dom-state-mapping-layers.md) — Maps internal editor state to the browser DOM while managing content-editable elements and selection ranges.
- [Editor Command APIs](https://awesome-repositories.com/f/user-interface-experience/editor-command-apis.md) — Provides programmatic APIs to execute prioritized editor commands for document and content manipulation. ([source](https://lexical.dev/docs/intro))
- [Real-Time Collaborative Editing](https://awesome-repositories.com/f/user-interface-experience/real-time-collaborative-editing.md) — Synchronizes document changes across multiple users in real time using shared state and conflict resolution.
- [Document State Management](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors/document-state-management.md) — Implements a system for tracking the immutable state and metadata of text ranges and atomic blocks. ([source](https://cdn.jsdelivr.net/gh/facebook/lexical@main/README.md))
- [Text Formatting Tools](https://awesome-repositories.com/f/user-interface-experience/text-formatting-tools.md) — Provides the ability to apply and toggle styles such as bold, italic, underline, and alignment to text nodes. ([source](https://lexical.dev/docs/api/modules/lexical))
- [Chat Input Composers](https://awesome-repositories.com/f/user-interface-experience/chat-input-composers.md) — Implements a lightweight input field optimized for conversational interfaces and real-time messaging. ([source](https://lexical.dev/))
- [Content Block Editors](https://awesome-repositories.com/f/user-interface-experience/content-block-editors.md) — Supports creating a writing experience where content is organized into movable blocks with slash-command shortcuts. ([source](https://lexical.dev/))
- [Editor Components](https://awesome-repositories.com/f/user-interface-experience/editor-components.md) — Provides a set of editor components that wrap APIs and plugins for modular assembly of the interface. ([source](https://lexical.dev/docs/getting-started/react))
- [Editor State Listeners](https://awesome-repositories.com/f/user-interface-experience/editor-state-listeners.md) — Provides mechanisms to track real-time updates to the editor state to synchronize external UI components. ([source](https://lexical.dev/docs/getting-started/react))
- [Rich Input Extensions](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/rich-input-extensions.md) — Provides a compact text field that supports basic formatting while maintaining the behavior of a standard input. ([source](https://lexical.dev/))
- [Selection Mapping Layers](https://awesome-repositories.com/f/user-interface-experience/selection-mapping-layers.md) — Translates native browser DOM selection ranges into internal coordinates to decouple the view from the data model.
- [Update Batching](https://awesome-repositories.com/f/user-interface-experience/update-batching.md) — Implements update batching to group multiple document changes into single transactions for improved performance.

### Web Development

- [Rich-Text Frameworks](https://awesome-repositories.com/f/web-development/rich-text-frameworks.md) — Offers a modular toolkit for building custom web-based text editors with a structured data model and accessibility compliance.
- [Buffered State Update Mechanisms](https://awesome-repositories.com/f/web-development/buffered-state-update-mechanisms.md) — Modifies the document through a buffered update process that batches changes before committing. ([source](https://lexical.dev/docs/concepts/editor-state))
- [Collaborative Editing Conflict Resolution](https://awesome-repositories.com/f/web-development/collaborative-editing-conflict-resolution.md) — Supports real-time collaborative editing with synchronization and conflict resolution engines. ([source](https://lexical.dev/docs/api/))
- [Collaborative Editing Engines](https://awesome-repositories.com/f/web-development/collaborative-editing-engines.md) — Integrates with collaborative editing engines to enable simultaneous multi-user document editing. ([source](https://cdn.jsdelivr.net/gh/facebook/lexical@main/README.md))
- [State-Driven Content Models](https://awesome-repositories.com/f/web-development/editor-content-commands/state-driven-content-models.md) — Implements a state-driven approach that maintains serializable immutable snapshots of document content for consistent updates.
- [Editor State Update Handlers](https://awesome-repositories.com/f/web-development/editor-state-update-handlers.md) — Modifies the editor state through batched updates or command listeners to synchronize changes. ([source](https://lexical.dev/docs/getting-started/quick-start))
- [Text Editor Initializations](https://awesome-repositories.com/f/web-development/text-editor-initializations.md) — Provides the core mechanism to connect the editor state model to a DOM element for creating a content-editable area. ([source](https://lexical.dev/docs/packages/lexical))
- [Virtual DOM Diffing](https://awesome-repositories.com/f/web-development/virtual-dom-diffing/dom-state-preservation/virtual-dom-diffing.md) — Updates the browser DOM by diffing the internal state against the pending state to minimize mutations. ([source](https://lexical.dev/docs/intro))
- [Content Insertion Utilities](https://awesome-repositories.com/f/web-development/content-insertion-utilities.md) — Includes functions for programmatically injecting nodes or raw text at the current caret position. ([source](https://lexical.dev/docs/api/modules/lexical))
- [Presence Tracking](https://awesome-repositories.com/f/web-development/presence-tracking.md) — Tracks and displays real-time user presence within shared documents using client identifiers. ([source](https://lexical.dev/docs/collaboration/react))
- [Virtual DOM Reconciliation](https://awesome-repositories.com/f/web-development/virtual-dom-reconciliation/virtual-dom-reconciliation.md) — Uses reconciliation strategies to diff internal state against the DOM and minimize browser mutations.

### Part of an Awesome List

- [Document Serialization](https://awesome-repositories.com/f/awesome-lists/data/data-export/json-exports/document-serialization.md) — Serializes rich-text editor documents into JSON, HTML, and Markdown formats for storage and transfer. ([source](https://cdn.jsdelivr.net/gh/facebook/lexical@main/README.md))
- [Modular Editor Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/editors-and-content/modular-editor-frameworks.md) — Offers a plugin system to extend editor behavior through specialized content nodes and runtime logic.

### Business & Productivity Software

- [Real-time Collaborative Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-tools/real-time-collaboration/real-time-collaborative-editors.md) — Implements real-time collaborative editing by synchronizing editor state and tracking presence across multiple clients. ([source](https://lexical.dev/docs/collaboration/react))
- [Editor Update Listeners](https://awesome-repositories.com/f/business-productivity-software/data-change-listeners/editor-update-listeners.md) — Triggers callback functions whenever the editor state changes to synchronize external UI. ([source](https://lexical.dev/docs/api/modules/lexical))

### Content Management & Publishing

- [HTML to State Parsers](https://awesome-repositories.com/f/content-management-publishing/html-to-state-parsers.md) — Parses HTML strings back into a structured editor format to restore external content. ([source](https://lexical.dev/docs/serialization/))
- [State to HTML Converters](https://awesome-repositories.com/f/content-management-publishing/state-to-html-converters.md) — Transforms internal editor state into HTML strings for data transfer or rendering. ([source](https://lexical.dev/docs/serialization/))
- [Block-Based Editing Workflows](https://awesome-repositories.com/f/content-management-publishing/programmatic-content-modification/block-based-content-modification/block-based-editing-workflows.md) — Supports a writing experience organized into movable content blocks with specialized shortcuts.
- [Rich Text Content Serialization](https://awesome-repositories.com/f/content-management-publishing/rich-text-content-serialization.md) — Converts rich text content between internal application states and formats like HTML or JSON.

### Development Tools & Productivity

- [Content Node Transformers](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-system-extensibility/build-system-extensions/abstract-syntax-tree-transformers/content-node-transformers.md) — Modifies the node tree during the update workflow to enforce specific document structures. ([source](https://lexical.dev/docs/intro))
- [Plugin-Based Editor Frameworks](https://awesome-repositories.com/f/development-tools-productivity/code-editors-ides/extension-ecosystems-management/editor-extensions/editor-architectures/plugin-based-editor-frameworks.md) — Provides a plugin-driven architecture that allows developers to extend core rendering and transformation logic through modular extensions.
- [Editor Selection Mapping](https://awesome-repositories.com/f/development-tools-productivity/editor-selection-mapping.md) — Maps native browser selection ranges to internal editor positions, including support for the Shadow DOM. ([source](https://lexical.dev/docs/api/modules/lexical))

### Software Engineering & Architecture

- [Custom Node Definitions](https://awesome-repositories.com/f/software-engineering-architecture/custom-node-definitions.md) — Extends the data model by substituting core node classes with custom subclasses for specialized content. ([source](https://lexical.dev/docs/api/modules/lexical))
- [Editor Capability Extensions](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/editor-capability-extensions.md) — Offers a modular system to extend editor functionality via custom nodes, plugins, and toggleable configurations. ([source](https://lexical.dev/docs/api/))
- [Composable Extension Bundles](https://awesome-repositories.com/f/software-engineering-architecture/modular-extension-systems/runtime-capability-extensions/composable-extension-bundles.md) — Bundles configuration and runtime behavior into reusable units that define node sets and dependencies. ([source](https://lexical.dev/docs/api/modules/lexical))
- [Modular Feature Architectures](https://awesome-repositories.com/f/software-engineering-architecture/modular-feature-architectures.md) — Encapsulates node registration and behavior into modular units to simplify the addition of complex editor capabilities. ([source](https://lexical.dev/docs/extensions/intro))
- [Node-Tree Data Models](https://awesome-repositories.com/f/software-engineering-architecture/node-tree-data-models.md) — Represents document content as a structured tree of specialized node classes for extensible content modeling.
- [Immutable State Patterns](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/immutable-data-strategies/immutable-state-patterns.md) — Utilizes an immutable state model to maintain serializable snapshots and ensure predictable document transitions.
- [Plugin-Based Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures.md) — Employs a plugin-based architecture to encapsulate node registrations and runtime logic into modular units.
- [State Change Triggers](https://awesome-repositories.com/f/software-engineering-architecture/schema-based-state-validation/cross-state-validation/state-change-triggers.md) — Executes specific logic via triggers whenever the internal editor state is updated. ([source](https://lexical.dev/docs/concepts/editor-state))
- [Structural Navigation](https://awesome-repositories.com/f/software-engineering-architecture/tree-traversal-algorithms/document-tree-traversers/structural-navigation.md) — Allows traversing the document node hierarchy using familial relationships to locate specific content. ([source](https://lexical.dev/docs/api/modules/lexical))

### Data & Databases

- [Editor](https://awesome-repositories.com/f/data-databases/agent-state-persistence/state-serialization/editor.md) — Converts internal editor state into string formats for network transmission or persistent storage. ([source](https://lexical.dev/docs/getting-started/react))
- [JSON Serializers](https://awesome-repositories.com/f/data-databases/data-processing-pipelines/data-serialization/json-serializers.md) — Converts the internal editor structure into a JSON representation for persistent storage and restoration. ([source](https://lexical.dev/docs/serialization/))
- [Editor Element Property Sync](https://awesome-repositories.com/f/data-databases/object-property-accessors/property-synchronizers/editor-element-property-sync.md) — Synchronizes custom node attributes between peers to maintain consistency across collaborative sessions. ([source](https://lexical.dev/docs/collaboration/react))
- [Rich Text Formatting Toolbars](https://awesome-repositories.com/f/data-databases/text-processing-utilities/text-extraction/selected-text-retrieval/rich-text-formatting-toolbars.md) — Allows the creation of custom user interface toolbars to control and apply text formatting styles. ([source](https://lexical.dev/docs/getting-started/react))