Lexical Editor Kit

A ready-to-use rich text editor built on top of Lexical — Meta's extensible text editor framework.

Built with the open-source Lexical Playground as a reference. If you're familiar with Lexical, you can customize every plugin, node, and context provided by this kit to build your own editor from scratch.

Demo

Live Playground

Installation

npm install lexical-editor-kit

You also need to install Lexical peer dependencies:

npm install lexical @lexical/react @lexical/rich-text @lexical/html @lexical/clipboard \
  @lexical/markdown @lexical/mark @lexical/overflow @lexical/history @lexical/link \
  @lexical/selection @lexical/utils @lexical/extension @lexical/file @lexical/hashtag \
  @lexical/code-shiki react react-dom

Optional packages (install only the features you need):

npm install @lexical/table   # Table support
npm install @lexical/list    # List support (bullet, numbered, checklist)
npm install @lexical/code    # Code block support

Quick Start

Option 1: Use the Playground Editor (Fastest)

Drop in a fully-configured editor with all plugins and nodes pre-wired:

import { createEditor, getPlaygroundNodes, SettingsContext } from "lexical-editor-kit";
import { PlaygroundEditorPlugin } from "lexical-editor-kit/playground";
import { EditorContextProvider } from "lexical-editor-kit/playground";

const PlaygroundEditorComponent = createEditor({
  plugins: [PlaygroundEditorPlugin],
  nodes: [...getPlaygroundNodes()],
  providers: [SettingsContext, EditorContextProvider],
});

export default function PlayGroundEditor() {
  return <PlaygroundEditorComponent />;
}

Option 2: Build Your Own Editor with createEditor

Pick only the plugins and nodes you need:

import { createEditor } from "lexical-editor-kit";
import { AutoLinkPlugin, CollapsiblePlugin, ImagesPlugin } from "lexical-editor-kit/plugins";
import { HeadingNode, QuoteNode, ImageNode } from "lexical-editor-kit/nodes";
import { SettingsContext, SharedHistoryContext } from "lexical-editor-kit/providers";
import "lexical-editor-kit/index.css";

const MyEditor = createEditor({
  nodes: [HeadingNode, QuoteNode, ImageNode],
  plugins: [AutoLinkPlugin, CollapsiblePlugin, ImagesPlugin],
  providers: [SettingsContext, SharedHistoryContext],
});

function App() {
  return <MyEditor />;
}

Option 3: Use the EditorBuilder (Fluent API)

import { EditorBuilder } from "lexical-editor-kit";
import { CollapsiblePlugin, ImagesPlugin } from "lexical-editor-kit/plugins";
import { HeadingNode, ImageNode } from "lexical-editor-kit/nodes";
import { SettingsContext } from "lexical-editor-kit/providers";
import "lexical-editor-kit/index.css";

const MyEditor = new EditorBuilder()
  .usePlugin(CollapsiblePlugin)
  .usePlugin(ImagesPlugin)
  .useNode(HeadingNode)
  .useNode(ImageNode)
  .useProvider(SettingsContext)
  .build();

function App() {
  return <MyEditor />;
}

Customization

This library is built on top of the open-source Lexical Playground. Every plugin, node, and context is exported individually — if you know how Lexical works, you can mix, match, extend, or replace any component to create a fully custom editor.

See the Lexical Documentation and Lexical GitHub for details on the core framework.

Available Plugins

All plugins are available via lexical-editor-kit/plugins.

| Plugin | Description | |--------|-------------| | AutocompletePlugin | Text autocomplete suggestions | | AutoEmbedPlugin | Auto-embed URLs (YouTube, etc.) | | AutoLinkPlugin | Auto-detect and linkify URLs | | CodeActionMenuPlugin | Action menu for code blocks | | CodeHighlightPrismPlugin | Code syntax highlighting (Prism) | | CodeHighlightShikiPlugin | Code syntax highlighting (Shiki) | | CollapsiblePlugin | Collapsible/accordion blocks | | ComponentPickerPlugin | Slash command menu (/) | | ContextMenuPlugin | Right-click context menu | | DragDropPastePlugin | Drag & drop file/image paste | | DraggableBlockPlugin | Drag handle for blocks | | EmojiPickerPlugin | Emoji picker (: trigger) | | EmojisPlugin | Emoji rendering support | | FloatingLinkEditorPlugin | Floating link editor popup | | ImagesPlugin | Image insert & resize | | InsertHTMLPlugin | Insert raw HTML content | | KeywordsPlugin | Keyword highlighting | | LayoutPlugin | Multi-column layouts | | LightToolbarPlugin | Minimal toolbar | | LinkPlugin | Link support | | ListMaxIndentLevelPlugin | Limit list indent depth | | MarkdownShortcutPlugin | Markdown shortcuts | | MentionsPlugin | @mention support | | PageBreakPlugin | Page break insertion | | SpecialTextPlugin | Special text formatting | | StickyPlugin | Sticky note blocks | | TabFocusPlugin | Tab key focus management | | TableActionMenuPlugin | Table right-click actions | | TableCellResizerPlugin | Table column/row resizing | | TableExcelPastePlugin | Excel paste with cell styles (background color, font color, font size, bold/italic, text alignment, column widths, row heights) | | TableHoverActionsV2Plugin | Table hover add row/column | | TableOfContentsPlugin | Table of contents sidebar | | TableScrollShadowPlugin | Table horizontal scroll shadow | | YouTubePlugin | YouTube embed support |

Available Nodes

All nodes are available via lexical-editor-kit/nodes.

Lexical Built-in Nodes

| Node | Package | |------|---------| | HeadingNode, QuoteNode | @lexical/rich-text | | ListNode, ListItemNode | @lexical/list | | CodeNode, CodeHighlightNode | @lexical/code | | TableNode, TableRowNode, TableCellNode | @lexical/table | | HashtagNode | @lexical/hashtag | | AutoLinkNode, LinkNode | @lexical/link | | OverflowNode | @lexical/overflow | | MarkNode | @lexical/mark | | HorizontalRuleNode | @lexical/react |

Custom Nodes

| Node | Description | |------|-------------| | AutocompleteNode | Autocomplete suggestion node | | CollapsibleContainerNode | Collapsible container | | CollapsibleContentNode | Collapsible content area | | CollapsibleTitleNode | Collapsible title | | EmojiNode | Emoji node | | ImageNode | Image with caption & resize | | KeywordNode | Highlighted keyword | | LayoutContainerNode | Multi-column container | | LayoutItemNode | Column item in layout | | MentionNode | @mention node | | PageBreakNode | Page break | | SpecialTextNode | Special formatted text | | StickyNode | Sticky note | | YouTubeNode | YouTube embed |

Available Contexts / Providers

All providers are available via lexical-editor-kit/providers.

| Provider | Description | |----------|-------------| | EditorContextProvider | Root context wrapping all editor state | | FlashMessageContext | Flash notification messages | | SettingsContext | Editor settings state | | SharedHistoryContext | Shared undo/redo history | | ToolbarContext | Toolbar state (block type, font, format) | | TableContext | Table cell selection state |

Package Exports

| Import Path | Description | |-------------|-------------| | lexical-editor-kit | Core API: createEditor, EditorBuilder, settings, contexts, themes | | lexical-editor-kit/plugins | All editor plugins | | lexical-editor-kit/nodes | All Lexical node classes | | lexical-editor-kit/providers | All context providers | | lexical-editor-kit/playground | Pre-configured playground editor | | lexical-editor-kit/index.css | Editor styles |

Custom & Modified Plugins

The following plugins are newly added or modified compared to the original Lexical Playground.

| Plugin | Status | Description | |--------|--------|-------------| | TableExcelPastePlugin | New | Excel copy & paste support. Preserves cell styles including background color, font color, font size, bold/italic/underline/strikethrough, text alignment, column widths, and row heights. Parses Excel's <style> block and <col span> for accurate reproduction. | | TableHoverActionsV2Plugin | Modified | Refactored from the original playground's legacy drag-and-drop library to @dnd-kit for table row/column hover actions (add, move, drag). |

References

• Lexical Documentation
• Lexical GitHub
• Lexical Playground — The UI and feature structure of this project were built using this as a reference.

License

Open source. Free to use.