Skip to main content

​
Installation

Lexical is published as multiple npm packages under the @lexical scope. This guide covers installation for different use cases.

​
Package Managers

Install Lexical using your preferred package manager: 
npm install lexical @lexical/react
The lexical package contains the core framework, while @lexical/react provides React-specific bindings and components.

​
Core Packages

​
lexical

The core Lexical framework - required for all projects. 
{
  "name": "lexical",
  "version": "0.41.0",
  "description": "Lexical is an extensible text editor framework that provides excellent reliability, accessible and performance."
}
Install: 
npm install lexical
What’s included:
  • Core editor (createEditor)
  • Base node types (TextNode, ElementNode, DecoratorNode)
  • Selection management
  • Update and read APIs
  • Command system
  • Event listeners

​
@lexical/react

React bindings and components for Lexical. 
{
  "name": "@lexical/react",
  "version": "0.41.0",
  "peerDependencies": {
    "react": ">=17.x",
    "react-dom": ">=17.x"
  }
}
Install: 
npm install @lexical/react react react-dom
What’s included:
  • LexicalComposer - Root context provider
  • ContentEditable - Editable content component
  • Plugin components (PlainTextPlugin, RichTextPlugin, etc.)
  • React hooks for editor access
  • Error boundary component
@lexical/react requires React 17 or higher. Make sure you have compatible versions of react and react-dom installed.

​
Feature Packages

Lexical provides modular feature packages for extended functionality:

​
Rich Text Editing

npm install @lexical/rich-text
Adds support for:
  • Headings (H1-H6)
  • Block quotes
  • Text formatting (bold, italic, underline, strikethrough)
  • Code blocks

​
Lists

npm install @lexical/list
Adds support for:
  • Ordered lists
  • Unordered lists
  • Checklist/todo lists
  • Nested lists
npm install @lexical/link
Adds support for:
  • Link nodes
  • Auto-link detection
  • Link editing utilities

​
Tables

npm install @lexical/table
Adds support for:
  • Table creation and editing
  • Cell merging
  • Table navigation
  • Resize functionality

​
Code Highlighting

npm install @lexical/code
Adds support for:
  • Syntax highlighting
  • Multiple language support
  • Code block formatting

​
Markdown

npm install @lexical/markdown
Adds support for:
  • Markdown import/export
  • Markdown shortcuts (typing # for heading, * for italic, etc.)
  • CommonMark and GitHub Flavored Markdown

​
HTML Serialization

npm install @lexical/html
Adds support for:
  • HTML import/export
  • DOM serialization
  • Custom HTML handling

​
History (Undo/Redo)

npm install @lexical/history
Adds support for:
  • Undo/redo functionality
  • History state management
  • Custom merge tags

​
Collaboration

npm install @lexical/yjs yjs y-websocket
Adds support for:
  • Real-time collaboration
  • Yjs CRDT integration
  • Multi-user editing
  • Conflict resolution

​
Utility Packages

Additional utilities for common tasks:

​
@lexical/utils

npm install @lexical/utils
Provides:
  • Helper functions for common operations
  • Node traversal utilities
  • Selection utilities
  • Register merging (mergeRegister)

​
@lexical/headless

npm install @lexical/headless
Provides:
  • Headless editor for server-side rendering
  • Testing utilities
  • Non-DOM environments

​
TypeScript Support

Lexical is written in TypeScript and includes type definitions out of the box. No additional @types packages are needed. 
import { LexicalEditor, EditorState, LexicalNode } from 'lexical';
import { LexicalComposer } from '@lexical/react/LexicalComposer';

// Types are automatically available
const config: Parameters<typeof LexicalComposer>[0]['initialConfig'] = {
  namespace: 'MyEditor',
  onError: (error: Error) => console.error(error),
};

​
CDN Usage

For quick prototyping, you can use Lexical via CDN (not recommended for production): 
<script type="module">
  import { createEditor } from 'https://esm.sh/[email protected]';
  import { registerRichText } from 'https://esm.sh/@lexical/[email protected]';
  
  const editor = createEditor({
    namespace: 'CDNEditor',
    onError: console.error,
  });
  
  registerRichText(editor);
  editor.setRootElement(document.getElementById('editor'));
</script>
CDN usage is not recommended for production applications. Use a proper package manager and bundler for better performance and reliability.

​
Version Compatibility

All @lexical/* packages should be kept at the same version to ensure compatibility: 
{
  "dependencies": {
    "lexical": "0.41.0",
    "@lexical/react": "0.41.0",
    "@lexical/rich-text": "0.41.0",
    "@lexical/list": "0.41.0"
  }
}
Mixing different versions of Lexical packages may cause runtime errors and unexpected behavior.

​
Common Installation Patterns

​
Minimal React Setup

For a basic plain text editor: 
npm install lexical @lexical/react

​
Standard Rich Text Editor

For a typical rich text editor with common features: 
npm install lexical @lexical/react @lexical/rich-text @lexical/list @lexical/link @lexical/history
For a comprehensive editor with all features: 
npm install lexical @lexical/react @lexical/rich-text @lexical/list @lexical/link @lexical/table @lexical/code @lexical/markdown @lexical/html @lexical/history @lexical/utils

​
Collaborative Editor

For real-time collaboration: 
npm install lexical @lexical/react @lexical/rich-text @lexical/yjs yjs y-websocket

​
Next Steps

Quickstart Guide

Build your first editor with step-by-step instructions

Browser Support

Check which browsers are supported by Lexical

React Integration

Learn about React-specific features and components

Core Concepts

Understand Lexical’s architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us