back to home

facebook / lexical

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

23,052 stars
2,101 forks
552 issues
TypeScriptJavaScriptCSS

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 on-demand, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Source files are only loaded when you start an analysis to optimize performance.

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.in/repo/facebook/lexical)
Preview:Analyzed by RepoMind

Repository Summary (README)

Preview

Lexical

An extensible text editor framework that provides excellent reliability, accessibility and performance.

NPM Version NPM Downloads Build Status Discord Twitter Follow

Documentation | Getting Started | Playground | Gallery


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.

License

MIT License © Meta Platforms, Inc.