Reliable
Lexical is comprised of editor instances that each attach to a single content editable element. A set of editor states represent the current and pending states of the editor at any given time.
Accessible
Lexical is designed for everyone. It follows best practices established in WCAG and is compatible with screen readers and other assistive technologies.
Fast
Lexical is minimal. It doesn't directly concern itself with UI components, toolbars or rich-text features and markdown. The logic for these features can be included via a plugin interface.
With minimal setup, it's quick to start using Lexical!
import {LexicalComposer} from '@lexical/react/LexicalComposer';
import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
const Editor = () => {
const initialConfig = {
theme: {}
};
return (
<LexicalComposer initialConfig={initialConfig}>
<RichTextPlugin
contentEditable={<ContentEditable />}
ErrorBoundary={LexicalErrorBoundary}
placeholder={<div>Placeholder</div>}
/>
</LexicalComposer>
);
}
export default Editor
At it's core, Lexical is a framework agnostic text editor framework. But there are also React bindings that let you create editors using React components.
Lexical editors are simply built using plugins, where the LexicalComposer component wraps all of the editor's plugins which provide functionalities for the editor.
While Lexical is a text-editing engine at it's core, we believe that users shouldn't have to rewrite the same rich text functionality over and over in every implementation. Lexical exposes a set of individual, modular packages that can be used to add common features like history, links, lists and tables.
View all packagesA helpful community makes open-source better.
We are deeply committed to being open-source. That means openly helping each other in improving Lexical. We've listed some Lexical-related communities that you can check out.