back to home

facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

22,990 stars
2,091 forks
561 issues
TypeScriptJavaScriptCSS
Chat with CodebaseArchitecture ScanSecurity AuditExplain Codebase

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing facebook/lexical in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Click here to launch the interactive analysis workspace

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind-ai.vercel.app/repo/facebook/lexical)
Preview:Analyzed by RepoMind

Repository Summary (README)

Preview
<p align="center"> <a href="https://lexical.dev"><picture> <source media="(prefers-color-scheme: dark)" srcset="https://lexical.dev/img/logo-dark.svg" /> <source media="(prefers-color-scheme: light)" srcset="https://lexical.dev/img/logo.svg" /> <img alt="Lexical" src="https://lexical.dev/img/logo.svg" height="60" /> </picture></a> </p> <p align="center"> An extensible text editor framework that provides excellent reliability, accessibility and performance. </p> <p align="center"> <a href="https://www.npmjs.com/package/lexical"><img alt="NPM Version" src="https://img.shields.io/npm/v/lexical?color=43be15&label="/></a> <a href="https://www.npmjs.com/package/lexical"><img alt="NPM Downloads" src="https://img.shields.io/npm/dw/lexical"/></a> <a href="https://github.com/facebook/lexical/actions/workflows/tests.yml"><img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/facebook/lexical/tests.yml"/></a> <a href="https://discord.gg/KmG4wQnnD9"><img alt="Discord" src="https://img.shields.io/discord/953974421008293909"/></a> <a href="https://x.com/intent/follow?screen_name=lexicaljs"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/lexicaljs"/></a> </p> <p align="center"> <a href="https://lexical.dev/docs/intro">Documentation</a> | <a href="https://lexical.dev/docs/getting-started/quick-start">Getting Started</a> | <a href="https://playground.lexical.dev">Playground</a> | <a href="https://lexical.dev/gallery">Gallery</a> </p> <br />

Features

  • Framework Agnostic Core - Works with any UI framework, with official React bindings
  • Reliable & Accessible - Built-in accessibility support and WCAG compliance
  • Extensible - Plugin-based architecture with powerful extension points
  • Immutable State Model - Time-travel ready with built-in undo/redo
  • Collaborative Editing - Real-time collaboration via Yjs integration
  • Serialization - Import/export from JSON, Markdown, and HTML
  • Rich Content - Support for tables, lists, code blocks, images, and custom nodes
  • Cross-browser - Firefox 115+, Safari 15+, Chrome 86+ (see Supported Browsers)
  • Type Safe - Written in TypeScript with comprehensive type definitions

Quick Start

npm install lexical @lexical/react

import { $getRoot, $getSelection } from 'lexical';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';

const initialConfig = {
  namespace: 'MyEditor',
  onError: (error) => console.error(error),
};

function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
    </LexicalComposer>
  );
}

Try it yourself:

Development

# Install dependencies
pnpm install

# Start playground dev server
pnpm run start

# Run tests
pnpm run test-unit
pnpm run test-e2e-chromium

# Lint and type check
pnpm run ci-check

See CONTRIBUTING.md for detailed development guidelines.

Documentation

Community & Support

Browser Support

BrowserVersion
Chrome86+
Firefox115+
Safari15+
Edge86+

Contributors

We welcome contributions! Please read our Contributing Guide to learn about our development process and how to propose bugfixes and improvements.

<a href="https://github.com/facebook/lexical/graphs/contributors"><img src="https://contrib.rocks/image?repo=facebook/lexical" /></a>

License

MIT License © Meta Platforms, Inc.