lexical

What is lexical?

Lexical is a modern, extensible text editor framework that provides a set of tools and APIs to build rich text editors with ease. It is designed to be highly performant, flexible, and easy to integrate into various applications.

What are lexical's main functionalities?

Basic Text Editing

This feature allows you to create a basic text editor instance and perform simple text editing operations such as appending text.

const { createEditor } = require('lexical');
const editor = createEditor();
editor.update(() => {
  const root = editor.getRoot();
  root.appendText('Hello, Lexical!');
});

Custom Plugins

Lexical supports custom plugins to extend the editor's functionality. This example demonstrates how to create a custom plugin that logs the editor state changes.

const { createEditor, LexicalComposer } = require('lexical');
const MyCustomPlugin = () => {
  return {
    onChange(editorState) {
      console.log('Editor state changed:', editorState);
    }
  };
};
const editor = createEditor({ plugins: [MyCustomPlugin] });

Rich Text Formatting

This feature allows you to apply rich text formatting such as bold, italic, and underline to the text within the editor.

const { createEditor, $createParagraphNode, $createTextNode } = require('lexical');
const editor = createEditor();
editor.update(() => {
  const root = editor.getRoot();
  const paragraph = $createParagraphNode();
  const text = $createTextNode('Bold Text');
  text.toggleFormat('bold');
  paragraph.append(text);
  root.append(paragraph);
});

Other packages similar to lexical

draft-js

Draft.js is a rich text editor framework for React. It provides a set of tools to build complex text editors with support for rich text formatting, custom blocks, and more. Compared to Lexical, Draft.js is more mature but may have a steeper learning curve and less flexibility in terms of customization.

slate

Slate is another highly customizable framework for building rich text editors in React. It offers a more flexible and extensible architecture compared to Draft.js, allowing developers to define their own data models and editor behaviors. Slate is similar to Lexical in terms of flexibility but may require more boilerplate code to set up.

prosemirror

ProseMirror is a toolkit for building rich text editors with a focus on extensibility and performance. It provides a highly customizable schema system and a range of plugins to extend the editor's capabilities. ProseMirror is comparable to Lexical in terms of performance and extensibility but may have a more complex API.

README

lexical

Lexical is an extensible JavaScript text-editor that provides reliable, accessible and performant typing experiences for the web.

The lexical package contains only the core Lexical engine and nodes. This package is intended to be used in conjunction with packages that wire Lexical up to applications, such as @lexical/react.