{"id":13434,"library":"lexical","title":"Lexical Editor Framework","description":"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.","status":"active","version":"0.43.0","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/lexical","tags":["javascript","react","lexical","editor","contenteditable","rich-text","typescript"],"install":[{"cmd":"npm install lexical","lang":"bash","label":"npm"},{"cmd":"yarn add lexical","lang":"bash","label":"yarn"},{"cmd":"pnpm add lexical","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the primary function to instantiate a Lexical editor. Lexical is ESM-first, so named imports are standard.","wrong":"const editor = require('lexical').createEditor;","symbol":"createEditor","correct":"import { createEditor } from 'lexical';"},{"note":"For React applications, `LexicalComposer` is the root component and context provider, found in the `@lexical/react` package, not the core `lexical` package.","wrong":"import { LexicalComposer } from 'lexical';","symbol":"LexicalComposer","correct":"import { LexicalComposer } from '@lexical/react';"},{"note":"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.","wrong":"import { $getSelection } from '@lexical/utils';","symbol":"$getSelection","correct":"import { $getSelection } from 'lexical';"},{"note":"Basic node types like `TextNode`, `ElementNode`, and `RootNode` are exported directly from the `lexical` package. Custom nodes will extend these.","wrong":"import { TextNode } from '@lexical/nodes';","symbol":"TextNode","correct":"import { TextNode } from 'lexical';"}],"quickstart":{"code":"import * as React from 'react';\nimport { LexicalComposer } from '@lexical/react/LexicalComposer';\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable';\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';\nimport { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';\nimport LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';\nimport { HeadingNode, QuoteNode, ListItemNode, ListNode, ParagraphNode, TextNode, CodeNode, LinkNode } from 'lexical';\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin';\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';\nimport { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';\nimport { TreeViewPlugin } from '@lexical/react/LexicalTreeViewPlugin';\nimport type { EditorConfig } from 'lexical';\n\nconst editorConfig: EditorConfig = {\n namespace: 'MyRichTextEditor',\n theme: {\n // Example theme styles - typically defined in a CSS file\n paragraph: 'editor-paragraph',\n text: {\n bold: 'editor-text-bold',\n italic: 'editor-text-italic',\n underline: 'editor-text-underline',\n },\n },\n nodes: [\n HeadingNode,\n QuoteNode,\n ListItemNode,\n ListNode,\n ParagraphNode,\n TextNode,\n CodeNode,\n LinkNode,\n ],\n onError: (error: Error) => {\n console.error('Lexical editor error:', error);\n },\n};\n\nfunction MyCustomAutoFocusPlugin() {\n const [editor] = useLexicalComposerContext();\n React.useEffect(() => {\n editor.focus();\n }, [editor]);\n return null;\n}\n\nexport function MyLexicalEditor() {\n return (\n \n
\n \n );\n}","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Prism highlighting functionality has been extracted from `@lexical/code`. If you previously relied on built-in Prism integration, it will no longer function automatically.","severity":"breaking","affected_versions":">=0.42.0"},{"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.","message":"The `--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.","severity":"breaking","affected_versions":">=0.41.0"},{"fix":"Update your imports to `import { utilityName } from 'lexical';` instead of `import { utilityName } from '@lexical/utils';`.","message":"Several common utilities, including `mergeRegister`, `addClassNames`, and `removeClassNames`, were moved from the `@lexical/utils` package to the main `lexical` package.","severity":"breaking","affected_versions":">=0.40.0"},{"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.","message":"JSON 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.","severity":"breaking","affected_versions":">=0.39.0"},{"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.","message":"The `DecoratorNode` API was updated in v0.36.1, which removed the explicit type requirement and warning for `decorate()` and widened its type.","severity":"breaking","affected_versions":">=0.36.1"},{"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.","message":"Significant breaking changes were introduced to the `@lexical/yjs` package, particularly concerning custom node property syncing.","severity":"breaking","affected_versions":">=0.36.1"},{"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.","message":"Lexical'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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"These utilities were moved to the main `lexical` package in v0.40.0. Update your imports to `import { utilityName } from 'lexical';`.","cause":"Attempting to import utilities like `mergeRegister` from the deprecated `@lexical/utils` package.","error":"Module not found: Error: Can't resolve '@lexical/utils' in '...'"},{"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.","cause":"Lexical hooks (e.g., `useLexicalComposerContext`) or editor operations are being called outside the scope of a `LexicalComposer` or before the editor is fully mounted.","error":"Error: The Lexical editor is not attached to the DOM or is not a descendant of a LexicalComposer component."},{"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.","cause":"A custom `DecoratorNode` implementation does not conform to the `decorate()` method signature requirements after API changes in Lexical v0.36.1+.","error":"Property 'decorate' is missing in type 'MyCustomDecoratorNode' but required in type 'DecoratorNode'"},{"fix":"Add all custom nodes to the `nodes` array within the `editorConfig` object that is passed to `LexicalComposer` or `createEditor`.","cause":"A custom `LexicalNode` (e.g., `DecoratorNode`, `ElementNode`) is used within the editor state but has not been registered in the editor's configuration.","error":"TypeError: Cannot read properties of undefined (reading 'registerDecorator') (or similar error related to node registration)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}