Back to Lexical

README

README.md

0.44.05.1 KB
Original Source
<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" />

</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"></a> <a href="https://www.npmjs.com/package/lexical"></a> <a href="https://github.com/facebook/lexical/actions/workflows/tests.yml"></a> <a href="https://discord.gg/KmG4wQnnD9"></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>

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

bash
npm install lexical @lexical/react
jsx
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

bash
# 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"></a>

License

MIT License © Meta Platforms, Inc.