lexical

library0.0.5jsnpmunverified

Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility, and performance. Currently at version 0.43.0, it follows a monthly release schedule, ensuring continuous improvements and bug fixes. The core of Lexical is a dependency-free engine, allowing for powerful, simple, and complex editor implementations to be built on top. Key differentiators include its framework-agnostic core (with official React bindings via `@lexical/react`), a plugin-based architecture for extensibility (rather than a monolithic approach), an immutable state model for time-travel capabilities, and robust support for collaborative editing via Yjs integration. It is designed to be highly customizable, enabling developers to create unique text editing experiences that scale in size and functionality, rather than being a ready-to-use editor with a predefined UI.

web-framework

npm install lexical

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LEXICAL

lexical

web-frameworkjavascriptv0.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createEditor

✓ import { createEditor } from 'lexical';

✗ const editor = require('lexical').createEditor;

This is the primary function to instantiate a Lexical editor. Lexical is ESM-first, so named imports are standard.

LexicalComposer

✓ import { LexicalComposer } from '@lexical/react';

✗ import { LexicalComposer } from 'lexical';

For React applications, `LexicalComposer` is the root component and context provider, found in the `@lexical/react` package, not the core `lexical` package.

$getSelection

✓ import { $getSelection } from 'lexical';

✗ import { $getSelection } from '@lexical/utils';

Since v0.40.0, many core utility functions and primitives, including `$getSelection` and `mergeRegister`, have been moved directly into the main `lexical` package for easier access and consistency.

TextNode

✓ import { TextNode } from 'lexical';

✗ import { TextNode } from '@lexical/nodes';

Basic node types like `TextNode`, `ElementNode`, and `RootNode` are exported directly from the `lexical` package. Custom nodes will extend these.

This quickstart demonstrates how to set up a basic rich-text editor using Lexical with React and TypeScript, including essential plugins like rich text editing, history, lists, links, and an auto-focus feature.

import * as React from 'react'; import { LexicalComposer } from '@lexical/react/LexicalComposer'; import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'; import { ContentEditable } from '@lexical/react/LexicalContentEditable'; import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'; import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin'; import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'; import { HeadingNode, QuoteNode, ListItemNode, ListNode, ParagraphNode, TextNode, CodeNode, LinkNode } from 'lexical'; import { ListPlugin } from '@lexical/react/LexicalListPlugin'; import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'; import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin'; import { TreeViewPlugin } from '@lexical/react/LexicalTreeViewPlugin'; import type { EditorConfig } from 'lexical'; const editorConfig: EditorConfig = { namespace: 'MyRichTextEditor', theme: { // Example theme styles - typically defined in a CSS file paragraph: 'editor-paragraph', text: { bold: 'editor-text-bold', italic: 'editor-text-italic', underline: 'editor-text-underline', }, }, nodes: [ HeadingNode, QuoteNode, ListItemNode, ListNode, ParagraphNode, TextNode, CodeNode, LinkNode, ], onError: (error: Error) => { console.error('Lexical editor error:', error); }, }; function MyCustomAutoFocusPlugin() { const [editor] = useLexicalComposerContext(); React.useEffect(() => { editor.focus(); }, [editor]); return null; } export function MyLexicalEditor() { return ( <LexicalComposer initialConfig={editorConfig}> <div className="editor-container" style={{ border: '1px solid #ccc', minHeight: '150px' }}> <RichTextPlugin contentEditable={<ContentEditable className="content-editable" style={{ padding: '10px', outline: 'none' }} />} placeholder={<div className="editor-placeholder" style={{ position: 'absolute', top: '10px', left: '10px', color: '#999', pointerEvents: 'none' }}>Enter some text...</div>} ErrorBoundary={LexicalErrorBoundary} /> <HistoryPlugin /> <ListPlugin /> <LinkPlugin /> <AutoFocusPlugin /> <AutoLinkPlugin /> {process.env.NODE_ENV === 'development' && <TreeViewPlugin treeContainerClassName="tree-view-container" />} {/* Debugger plugin */} </div> </LexicalComposer> ); }

Debug

Known issues

breakingPrism highlighting functionality has been extracted from `@lexical/code`. If you previously relied on built-in Prism integration, it will no longer function automatically.

fix

You must now manage Prism highlighting independently or provide your own implementation within `@lexical/code`'s API. Review `@lexical/code` documentation for updated guidelines.

affects: >=0.42.0

breakingThe `--lexical-indent-base-value` CSS custom property is now only read from the root element of the editor, rather than from indented elements within the document.

fix

Ensure any CSS or code setting `--lexical-indent-base-value` targets the editor's root element (e.g., the `LexicalComposer` container), not internal indented nodes.

affects: >=0.41.0

breakingSeveral common utilities, including `mergeRegister`, `addClassNames`, and `removeClassNames`, were moved from the `@lexical/utils` package to the main `lexical` package.

fix

Update your imports to `import { utilityName } from 'lexical';` instead of `import { utilityName } from '@lexical/utils';`.

affects: >=0.40.0

breakingJSON serialization for `ElementNode` now only includes `textFormat` and `textStyle` properties when they are not set to default values and the node does not have `TextNode` children. This aims to reduce payload size.

fix

If you rely on `textFormat` or `textStyle` always being present in serialized JSON for `ElementNode`s, you may need to adjust your deserialization logic or ensure `TextNode` children exist when formatting is applied. These properties are recomputed on reconciliation.

affects: >=0.39.0

breakingThe `DecoratorNode` API was updated in v0.36.1, which removed the explicit type requirement and warning for `decorate()` and widened its type.

fix

Review custom `DecoratorNode` implementations and update them to align with the new API. Ensure your `decorate()` method signature is compatible with the widened type, if you had a stricter signature previously.

affects: >=0.36.1

breakingSignificant breaking changes were introduced to the `@lexical/yjs` package, particularly concerning custom node property syncing.

fix

Users of `@lexical/yjs` must consult the official documentation for v0.36.1 and later to adapt to the new API, ensuring all node properties intended for syncing are initialized in the constructor, even if `undefined` initially.

affects: >=0.36.1

gotchaLexical's core operates with an immutable editor state. Direct mutation of editor state objects outside of `editor.update()` or similar mechanisms will lead to unexpected behavior or errors.

fix

Always perform editor state modifications within an `editor.update()` callback, where the state is temporarily mutable. Outside of these callbacks, treat editor states as immutable snapshots.

affects: >=0.1.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve '@lexical/utils' in '...'

Attempting to import utilities like `mergeRegister` from the deprecated `@lexical/utils` package.

fix

These utilities were moved to the main `lexical` package in v0.40.0. Update your imports to `import { utilityName } from 'lexical';`.

Error: The Lexical editor is not attached to the DOM or is not a descendant of a LexicalComposer component.

Lexical hooks (e.g., `useLexicalComposerContext`) or editor operations are being called outside the scope of a `LexicalComposer` or before the editor is fully mounted.

fix

Ensure that any code interacting with the Lexical editor context is rendered as a child of `LexicalComposer` and that the editor is fully initialized.

Property 'decorate' is missing in type 'MyCustomDecoratorNode' but required in type 'DecoratorNode<T>'

A custom `DecoratorNode` implementation does not conform to the `decorate()` method signature requirements after API changes in Lexical v0.36.1+.

fix

Review the `DecoratorNode` API in Lexical v0.36.1+. The `decorate()` method's type requirements were relaxed and widened. Adjust your custom `DecoratorNode` implementation, ensuring `decorate()` is present if your node requires it for rendering.

TypeError: Cannot read properties of undefined (reading 'registerDecorator') (or similar error related to node registration)

A custom `LexicalNode` (e.g., `DecoratorNode`, `ElementNode`) is used within the editor state but has not been registered in the editor's configuration.

fix

Add all custom nodes to the `nodes` array within the `editorConfig` object that is passed to `LexicalComposer` or `createEditor`.

Upgrade

Version history

0.0.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/facebook/lexical ↗

packagehttps://www.npmjs.com/package/lexical ↗

homepagehttps://lexical.dev ↗